如何使用DevTools调试带有弹出窗口的Chrome扩展？

• 基础DOM/样式调试：打开目标测试网页，按下F12调出DevTools，切换到「元素」面板，点击左上角的「选择元素」箭头图标（快捷键Ctrl+Shift+C/Command+Shift+C），随后触发弹窗（将鼠标移到目标单词上按下Shift键），鼠标悬停到弹出的释义窗口点击，即可直接定位到弹窗对应的DOM节点，可直接修改样式属性、查看节点绑定的事件监听器，通过事件关联路径直接定位到业务代码位置。
• 解决弹窗失焦自动消失问题：如果弹窗触发后失去焦点就自动关闭，有两种常用处理方法：
  • 方法1：触发弹窗后立即按下F8（或Ctrl+\）暂停JS执行，页面所有交互会被冻结，可正常选中弹窗元素调试
  • 方法2：在DevTools「源代码」面板的「事件监听器断点」区域，展开「鼠标」勾选mouseout、展开「键盘」勾选keyup，触发弹窗后代码会在弹窗消失前断住，可逐步调试关闭逻辑
• 注入脚本业务逻辑调试：打开Chrome扩展管理页面（地址栏输入chrome://extensions/），开启右上角开发者模式，找到对应的词典扩展点击「详细信息」，在「已注入的脚本」分类下可找到对应的内容脚本文件，点击即可跳转到DevTools源代码面板，可自行添加断点调试弹窗触发、渲染的全流程逻辑。
• 弹窗内容加载调试：如果需要排查弹窗释义加载异常，可切换到DevTools「网络」面板，筛选「Fetch/XHR」请求，触发弹窗后即可查看对应的资源请求日志；如果是本地词典加载，可在「应用」面板的「缓存存储」/「IndexedDB」分类下查看本地词典资源的存储与读取情况。

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