如何排查开发者控制台开启时行为异常的浏览器扩展？

1. 确认panel是否被浏览器自动回收 #

浏览器对无交互的扩展panel有自动休眠/回收机制，而打开开发者工具会阻止这个休眠行为，这正好匹配你遇到的现象。可以在panel中添加卸载事件日志，验证是否真的被重新加载：

window.addEventListener('unload', () => {
  console.log('Panel 即将被卸载');
});

如果能打印出这条日志，说明问题根源就是浏览器回收panel导致状态丢失。

2. 将展开状态存入持久化存储 #

如果列表的展开状态只存在内存中，panel被回收再唤醒后状态必然丢失，列表会回到折叠状态。改用chrome.storage.local来持久化保存状态：

// 点击展开/折叠时同步保存状态
document.querySelector('.expand-btn').addEventListener('click', () => {
  const list = document.querySelector('.data-list');
  list.classList.toggle('expanded');
  chrome.storage.local.set({isListExpanded: list.classList.contains('expanded')});
});

// panel初始化时读取状态并恢复
document.addEventListener('DOMContentLoaded', async () => {
  const {isListExpanded} = await chrome.storage.local.get('isListExpanded');
  if (isListExpanded) {
    document.querySelector('.data-list').classList.add('expanded');
  }
});

3. 排查代码中的自动重置逻辑 #

检查代码里是否存在定时器（setTimeout/setInterval）或visibilitychange事件监听，可能在无操作时误触发了折叠行为：

• 比如这类错误逻辑会在panel失焦时自动折叠列表：

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    document.querySelector('.data-list').classList.remove('expanded');
  }
});

如果有类似代码，需要调整判断条件，避免无交互时触发折叠。

4. 排查后台脚本的干扰 #

查看扩展的后台脚本（background）是否有定期向panel发送消息、或执行了影响panel状态的逻辑。可以临时注释后台脚本代码，观察问题是否消失，逐步定位干扰源。

5. 模拟闲置状态复现问题 #

利用Chrome Performance面板的「Simulate idle state」功能，模拟浏览器闲置状态，这样就能在打开开发者工具的情况下复现问题，方便查看日志和DOM变化。

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