Chrome DevTools中如何给DOM元素添加可在页面重载后保留的书签？

方法1：原生临时标记（仅当前调试会话生效） #

适合短时间内不需要刷新页面的调试场景：

• 选中Elements面板里的目标div，右键选择Add bookmark，标记后的节点会直接展示在DevTools侧边栏的Bookmarks列表里，点击即可快速跳转，页面刷新后标记会自动清除。
• 也可以右键目标节点选择Store as global variable，DevTools会自动生成temp1、temp2这类全局变量指向该节点，在Console输入对应变量名后，右键结果选择Reveal in Elements panel也能快速定位。

方法2：自定义属性标记（页面重载后依然生效） #

如果需要刷新页面后也能快速找到目标节点，可以用修改DOM属性的方式：

• 选中目标div后，在Console面板执行以下代码，给节点添加自定义调试标记：

  // 引号内的内容可以替换成你自定义的、容易识别的标记名
  $0.setAttribute('data-debug-mark', 'target-div-01')
  

• 后续不管页面是否刷新，直接在Elements面板的搜索框输入[data-debug-mark="target-div-01"]，就能直接定位到该节点。如果担心手动加属性麻烦，可以提前写个用户脚本，匹配当前站点后自动给对应选择器的节点加标记，只要节点的特征不变，每次加载都会自动打上标记。

方法3：存储唯一选择器定位 #

如果不想修改页面DOM属性，可以用这个方案：

• 右键目标div，选择Copy -> Copy selector，把复制到的选择器内容保存到本地，后续需要定位时，在Console面板执行document.querySelector('你保存的选择器内容')，右键返回的结果选择Reveal in Elements panel即可跳转，只要页面结构没有大的调整、选择器有效，刷新页面后也能正常使用。

内容的提问来源于stack exchange，提问作者guettli