MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

DOM Property Viewer

这篇翻译不完整。请帮忙从英语翻译这篇文章

DOM 属性查看器最新出现在 Firefox 48. 默认是被禁用的. 在 开发者工具设置 中开启.

DOM属性查看器允许您从当前页面的   window 对象或所选的iframe开始,检查 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

过滤

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

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

文档标签和贡献者

标签: 
 此页面的贡献者: xgqfrms-GitHub, Jiang-Xuan
 最后编辑者: xgqfrms-GitHub,