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

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

自己的属性

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

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

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

继承属性

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

过滤

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

了解属性

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

方法

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

相关推荐
IPdodo_8 小时前
2026年AI 数据采集代理 IP 选型:成功率、并发、轮换与成本评估
前端·网络·人工智能·chrome·python·http·网络调试
IT小白杨2 天前
哪种浏览器适合跨境电商?2026场景化方案建议与架构对比
服务器·chrome·经验分享·架构·安全架构·指纹浏览器
IT小白杨2 天前
多账号运营为什么需要独立浏览器环境:原理、机制与自测方法
服务器·chrome·经验分享·安全架构·指纹浏览器
ly76892 天前
浏览器工作原理详解:从入门到工程实践
chrome·firefox·edge浏览器
梦想blog3 天前
Claude Code + Chrome MCP:让浏览器自动化测试更简单
前端·chrome·自动化·mcp
Codiggerworld4 天前
Chrome DevTools 隐藏神技:这 5 个调试技巧你可能从来没用过
前端·chrome·chrome devtools
RisunJan4 天前
Linux命令-whoami(显示当前有效用户名)
linux·运维·chrome
不可求~4 天前
调用 GPT、Claude、Gemini API 报错怎么办:一套通用排查清单
网络·chrome·gpt
fb_123454 天前
Shell 脚本从 0 到精通|脚本规范 + 变量 + 数值运算 + 条件测试(可直接复制,面试必备)
chrome·面试·职场和发展
就叫飞六吧5 天前
两道门:X-Frame-Options 和 SameSite 到底谁管什么
开发语言·chrome·ai编程