检查节点

  • 选择网页内容,右键,点击 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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐