--- title: DOM Property Viewer slug: Tools/DOM_Property_Viewer tags: - DOM - Web开发 - 工具 translation_of: Tools/DOM_Property_Viewer --- <div>{{ToolsSidebar}}</div><div class="geckoVersionNote">DOM 属性查看器最新出现在 Firefox 48. 默认是被禁用的. 在 <a href="/en-US/docs/Tools_Toolbox#Settings">开发者工具设置</a> 中开启.</div> <p>DOM属性查看器允许您从当前页面的 {{domxref("window")}} 对象或<a href="/zh-CN/docs/tools/Working_with_iframes">所选的iframe</a>开始,检查 {{Glossary("DOM")}} 的属性作为可扩展树结构。</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13098/DOM%20Inspector.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 843px;"></p> <h2 id="开启DOM属性查看器">开启DOM属性查看器</h2> <p>DOM属性查看器默认是没有开启的. 想要开启它, 打开 <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">开发者工具设置</a> and 并且选择 "DOM" 作为 "默认FireFox开发者工具".</p> <h2 id="打开DOM属性查看器">打开DOM属性查看器</h2> <p>一旦开启, 你就可以通过选择在FireFox菜单面板的WEB开发者子面板的 “DOM” 来打开DOM属性查看器(或者是工具面板,如果你显示菜单栏或者是在 Mac OS X), 或者是按 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>W</kbd> 快捷键.</p> <p><a href="/en-US/docs/Tools/DevTools_Window">工具箱</a> 会显示在浏览器窗口的下面, 在DOM属性查看器被激活的时候. 仅仅在工具箱中激活起 "DOM".</p> <h2 id="DOM属性查看器_用户界面">DOM属性查看器 用户界面</h2> <h3 id="DOM树">DOM树</h3> <p>DOM的不同属性将会显示成一个可以伸展的树形结构. 左手边显示属性的名字, 右手边显示它的值. 直到对象的属性和数组的元素被显示. 如果属性的元素超过了能显示的范围, 你将看到 "more..." 标示, 并且需要去点击来查看全部的元素. 一个锁代表这个属性不可写.</p> <h3 id="刷新显示">刷新显示</h3> <p>如果DOM改变了,你可以点击 <em>刷新</em> 按钮来更新显示的内容:</p> <p><img alt="Button to update the DOM Inspector display" src="https://mdn.mozillademos.org/files/13102/DOM%20Inspector%20Refresh%20button.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 852px;"></p> <h3 id="过滤">过滤</h3> <p>这里有一个搜索区域在工具栏上:</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13100/DOM%20Inspector%20search%20box.png" style="display: block; height: 315px; margin-left: auto; margin-right: auto; width: 851px;"></p> <p>过滤器列出只有匹配你搜索的关键字的项目. 如果项目的名字中包含你搜索的关键字它们将可以列出来. 匹配区分大小写.</p>