Chrome Devtools DOM相关操作

检查节点

• 选择网页内容，右键，点击 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计算表达式