Chrome DevTools控制台：如何阻止自动切换至iframe上下文？

我完全懂这个自动切换上下文的糟心之处——页面刷新后iframe自动被选中，调试到一半突然切上下文，真的很打断节奏。既然你已经试过禁用Strict site isolation和Top document isolation没效果，那可以试试下面这几个更针对性的方案：

1. 手动锁定控制台上下文 #

打开Chrome DevTools的「Console」面板，找到顶部的上下文选择器（就是显示top或当前iframe名称的下拉框）：

• 先选中top确保当前是顶层上下文
• 右键点击这个下拉框，选择「Lock to context」（锁定上下文）
  这样之后不管DOM资源管理器（Elements面板）选中什么对象，控制台都会牢牢保持在顶层上下文，不会自动切换。

2. 关闭自动切换的实验性功能 #

Chrome DevTools里有专门的开关可以关掉这个“选中元素自动切控制台上下文”的功能：

1. 打开DevTools设置（按F1键，或者点击右上角三个点图标→「Settings」）
2. 切换到「Experiments」标签页
3. 找到**「Disable auto-switching console context when selecting elements in the Elements panel」**选项，勾选它
4. 重启DevTools（关闭后重新打开），这个功能就会被彻底禁用，从根源解决问题

3. 用代码强制锁定顶层上下文 #

如果GUI设置都不生效，还可以在控制台里执行一段代码来自动锁定：

// 强制切换并锁定控制台到顶层上下文
const contextSelector = document.querySelector('#console .context-selector');
if (contextSelector) {
  contextSelector.value = 'top';
  contextSelector.dispatchEvent(new Event('change'));
  // 触发锁定按钮
  const lockBtn = contextSelector.parentElement.querySelector('[title*="Lock"]');
  lockBtn?.click();
}

这段代码会自动选中top上下文并触发锁定操作，适合需要快速处理的场景。

如果以上方法都没效果，可以试试重置DevTools设置：在Settings→「Preferences」里找到「Restore defaults and reload」，重置后再重新配置，有时候旧的缓存配置会干扰新设置生效。

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