From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/tools/dom_property_viewer/index.html | 44 ++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 files/zh-cn/tools/dom_property_viewer/index.html (limited to 'files/zh-cn/tools/dom_property_viewer') diff --git a/files/zh-cn/tools/dom_property_viewer/index.html b/files/zh-cn/tools/dom_property_viewer/index.html new file mode 100644 index 0000000000..25e7943e68 --- /dev/null +++ b/files/zh-cn/tools/dom_property_viewer/index.html @@ -0,0 +1,44 @@ +--- +title: DOM Property Viewer +slug: Tools/DOM_Property_Viewer +tags: + - DOM + - Web开发 + - 工具 +translation_of: Tools/DOM_Property_Viewer +--- +
{{ToolsSidebar}}
DOM 属性查看器最新出现在 Firefox 48. 默认是被禁用的. 在 开发者工具设置 中开启.
+ +

DOM属性查看器允许您从当前页面的   {{domxref("window")}} 对象或所选的iframe开始，检查 {{Glossary("DOM")}}  的属性作为可扩展树结构。

+ +

+ +

开启DOM属性查看器

+ +

DOM属性查看器默认是没有开启的. 想要开启它, 打开 开发者工具设置 and 并且选择 "DOM"  作为 "默认FireFox开发者工具".

+ +

打开DOM属性查看器

+ +

一旦开启, 你就可以通过选择在FireFox菜单面板的WEB开发者子面板的 “DOM” 来打开DOM属性查看器（或者是工具面板，如果你显示菜单栏或者是在 Mac OS X）, 或者是按 Ctrl + Shift + W 快捷键.

+ +

工具箱 会显示在浏览器窗口的下面, 在DOM属性查看器被激活的时候. 仅仅在工具箱中激活起 "DOM".

+ +

DOM属性查看器 用户界面

+ +

DOM树

+ +

DOM的不同属性将会显示成一个可以伸展的树形结构. 左手边显示属性的名字, 右手边显示它的值. 直到对象的属性和数组的元素被显示. 如果属性的元素超过了能显示的范围, 你将看到 "more..." 标示, 并且需要去点击来查看全部的元素. 一个锁代表这个属性不可写.

+ +

刷新显示

+ +

如果DOM改变了，你可以点击 刷新 按钮来更新显示的内容:

+ +

Button to update the DOM Inspector display

+ +

过滤

+ +

这里有一个搜索区域在工具栏上:

+ +

+ +

过滤器列出只有匹配你搜索的关键字的项目. 如果项目的名字中包含你搜索的关键字它们将可以列出来. 匹配区分大小写.

-- cgit v1.2.3-54-g00ecf