如何让Chrome调试工具刷新后自动聚焦上次选中的元素（含动态页面）？

Chrome原生的元素选中恢复功能失效，本质是因为SPA（Angular/React/Vue等）的DOM元素是异步渲染的——Chrome的原生恢复逻辑在初始页面加载完成后就执行，此时目标元素还未生成，自然无法选中。以下是几种可行的复现方法：

方法1：用LocalStorage+自定义脚本自动选中 #

这是通用性最强的方案，适用于所有SPA：

• 第一步：在Elements面板选中目标元素，右键→Copy→Copy selector，复制该元素的CSS选择器。
• 第二步：打开Console面板，执行以下代码将选择器存入LocalStorage：

  localStorage.setItem('persistSelectedElement', '替换为你复制的选择器')
  

• 第三步：使用DevTools的Snippets功能创建自动执行脚本：
  1. 打开DevTools→Sources→Snippets→右键→New snippet
  2. 粘贴以下代码（可根据框架渲染速度调整延迟时间）：

     document.addEventListener('DOMContentLoaded', () => {
       setTimeout(() => {
         const selector = localStorage.getItem('persistSelectedElement');
         if (selector) {
           const element = document.querySelector(selector);
           if (element) {
             // 滚动到元素并设置为DevTools选中项
             element.scrollIntoView({ behavior: 'smooth' });
             $0 = element;
           }
         }
       }, 1200); // 延迟时间可根据你的SPA渲染速度修改
     });
     

  3. 右键该snippet→Run，之后刷新页面，脚本会自动尝试选中目标元素。
     （可选：开启DevTools实验性功能Auto-run snippets on page load，让脚本每次刷新自动执行）

方法2：利用DOM断点触发选中 #

适合需要精准捕捉元素渲染时机的场景：

• 在Elements面板中，找到目标元素的父级容器（或SPA的根容器，比如React的#root、Vue的#app），右键→Break on→Subtree modifications。
• 刷新页面，当DOM更新渲染出目标元素时，DevTools会自动暂停页面执行。
• 此时直接在Elements面板选中目标元素，或在Console执行$0 = document.querySelector('你的选择器')完成选中，之后继续执行页面即可。

方法3：框架专属工具辅助 #

针对不同框架的DevTools工具，有更贴合的方式：

• React：安装React DevTools后，选中目标组件，刷新页面时React DevTools会自动重新定位到该组件，右键组件→Reveal in Elements panel即可快速选中对应的DOM元素。
• Vue：使用Vue DevTools的Inspect功能选中元素，刷新页面后，Vue DevTools会保持对该组件的关联，点击组件面板的DOM图标即可跳转到Elements面板的对应元素。

关于隐藏设置 #

目前Chrome没有官方的隐藏设置或配置直接支持SPA的元素选中恢复，因为原生逻辑仅适配初始DOM同步加载的场景，未针对SPA的异步渲染机制做适配。

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