Chrome for Developer 第五章(Chrome 开发者工具中的 DOM 对象属性)

在开发者工具的元素面板,我们可以选择任何DOM节点,然后转到属性标签页来查看该节点的属性。

自己的属性

在属性窗格中,可以看到对象自己的属性会被优先排序并以粗体显示,这有助于我们快速识别这些属性。

首先在代码中获取DOM节点;之后增加一些自定义属性

回到浏览器中,可以看到id为content元素自己的属性

继承属性

如果我们想要追踪一个继承的属性,比如size,我们可以通过展开对象的\[Prototype]链来查找它的来源。这个过程可能需要我们展开多个嵌套的\[Prototype],直到我们找到定义该属性的原始对象。

过滤

如果我们想要过滤特定的属性,可以在过滤条件文本框中输入属性的名称或值,这样可以快速定位到我们感兴趣的属性。 此外,属性窗格默认不显示值为null或undefined的属性,但我们可以通过选中"全部显示"来查看所有属性。

了解属性

属性窗格不仅显示简单的键值对属性,还显示对象和数组,以及与DOM节点对应的属性。后者以链接形式存在,点击这些链接可以在DOM树中定位到对应的节点。此外,属性窗格还区分了对象自己的属性(以粗体显示)和继承自原型链的属性(以常规字体显示)。这有助于我们理解属性的来源。

方法

方法在属性窗格中以f()标记,这些是我们可以调用的函数。

相关推荐
Full Stack Developme26 分钟前
Linux Shell 教程概览
linux·前端·chrome
程序猿阿伟37 分钟前
《Chrome扩展:穿透沙箱与签名体系的技术本质》
前端·chrome
fobwebs2 小时前
Chrome谷歌浏览器多开教程,如何在电脑上同时登录多个GMAIL账号
前端·chrome·多开·同时登录多个gmail
独隅3 小时前
前端工程化在Chrome插件开发中的具体实践完全指南
前端·chrome
SEO_juper20 小时前
跳出率偏高诊断:页面加载慢、内容不对买家需求调整思路
服务器·chrome·seo·跨境电商·外贸·geo·2026
喜欢踢足球的老罗21 小时前
一张跨域图的“四次换乘“:blob URL 与 Chrome 扩展架构里的工程艺术
前端·chrome·架构
FserSuN21 小时前
Chrome CORS / PNA / LNA 问题排查与解决方案
前端·chrome
北风toto1 天前
Shell脚本(.sh)常用语法全解析:从入门到实战
前端·chrome
DFT计算杂谈1 天前
WannierTools输入文件wt.in一键批量生成脚本
java·前端·chrome·python·算法·conda
无限进步_2 天前
从零实现一个迷你Shell——深入理解Linux命令行解释器
linux·运维·服务器·开发语言·c++·chrome