Chrome Devtools DOM相关操作
devtools
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
项目地址:https://gitcode.com/gh_mirrors/de/devtools
免费下载资源
·
检查节点
- 选择网页内容,右键,点击
Inspect
【检查】
使用键盘导航DOM树
- 使用上下箭头,可以在这几个li之间来回选择
- 使用右箭头,展开这个li标签
- 左箭头,折叠这个li标签
搜索节点
- ctrl + f
- 可以通过字符串,CSS 选择器 或 XPath 搜索DOM树
拖动节点
- 双击,随意拖动
强制状态
- 当进行某些操作时会触发某些操作,例如:将鼠标悬停在下方的蝇王上,背景颜色变为橙色。
- 当鼠标移走,这种状态会消失,如果想使状态在鼠标离去之后还仍然保持鼠标放上去的状态。可以点击
Styles
中的:hover
选中:hover
。
用 $0 引用当前选中的节点
- 点击ESC键打开控制台
- 选中
<li>The Left Hand of Darkness</li>
- 键入$0并按下Enter键。表达式的结果表明,$0计算结果为
<li>The Left Hand of Darkness</li>
存储为全局变量
- 如果您需要多次引用某个节点,请将其存储为全局变量
- 右键你想保存的节点,选择
Store as global variable
- 在控制台输入
temp1
,然后按Enter。表达式的结果表明变量的计算结果为节点。
复制JS路径
- 当您需要在自动化测试中引用它时,将 JavaScript 路径复制到节点
- The Brothers Karamazov
- 在 DOM 树中右键单击并选择Copy > Copy JS Path。一个document.querySelector()解析为节点已经被复制到剪贴板中的表达
- 将表达式粘贴到控制台中
- 按Enter计算表达式
GitHub 加速计划 / de / devtools
24.59 K
4.14 K
下载
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
最近提交(Master分支:2 个月前 )
79116147 - 3 个月前
f0359002 - 4 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)