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

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

自己的属性

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

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

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

继承属性

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

过滤

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

了解属性

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

方法

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

相关推荐
牛奔1 天前
mise 管理多版本 Go 项目
开发语言·前端·chrome·后端·golang
Frag0ut1 天前
Chrome扩展程序管理技巧:安全安装、权限审查与高效使用指南
chrome·性能优化·谷歌浏览器·浏览器插件·扩展程序管理·权限审查·冲突排查
福兮说2 天前
浏览器里把 iPhone 的 HEIC 转成 JPG:Chrome 解不开、转完大了七成、拍摄时间全丢,六个坑实测
前端·javascript·图像处理·chrome·ios·iphone·heic
Frag0ut3 天前
Chrome安全隐私设置指南:5个原生功能筑牢浏览器数字防线
chrome·google·谷歌浏览器·权限管理·隐私保护·安全设置·安全浏览
winfredzhang3 天前
用 Chrome 插件 + 局域网 Qwen2.5-VL 打造视频截屏 OCR 工具
人工智能·chrome·ocr·api·plugin
yu俞娥宝4 天前
Chrome插件开发实战进阶(Manifest V3):通信原理、高级API、工程优化与上架避坑(第二篇)
chrome
Helix2504 天前
Chrome 扩展精选与权限管理:打造安全高效的浏览器工具箱
chrome·工具箱·扩展安全·扩展权限·扩展推荐·浏览器扩展管理·浏览器效率
今天要早睡_4 天前
Linux 基础指令速查:从 ls 到 tar 的常用命令全解析
linux·运维·chrome
Frag0ut5 天前
Chrome 浏览器安全指南:常见风险、隐私设置与防护建议
chrome·浏览器·隐私保护·安全防护·账号安全·安全设置·扩展权限
白帽攻防录5 天前
SRC 挖洞:V8 Turbofan 沙箱逃逸深度复盘,CVE-2026-6307 一根长矛怎么刺穿 Chrome 两道边界
网络·chrome·安全·网络安全·浏览器安全