blob: 25e7943e68adca9036c7ea6931af910b6b77ba15 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
---
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>
|
