---
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>