右键单击 Chrome DevTools 的 Elements 选项卡中的大多数元素，您将找到进入隔离模式的选项。它在视觉上隐藏了页面上的所有其他内容，（尽管对 CSS 或 DOM 的更改似乎仍然会影响页面布局。）
这样做的目的是什么？我理解添加它以允许 Selenium 或类似工具针对他们的报告。但为什么人类用户需要这个？如何使用它来帮助调试？
【问题讨论】：
标签： google-chrome google-chrome-devtools chromium
如果没有任何额外的上下文，可以推测隔离模式允许针对特定元素及其后代进行集中开发 - 减少其他暂时不相关的周围区域的视觉干扰，可能隐藏与这些区域相关的代码等。存在类似的工具，例如，在多个mind mapping 应用程序的功能中，其中一个可以隐藏工作图的所有其他分支和节点，除了打算在给定会话中“关注”的分支和节点。
但在这种情况下，它不仅仅是对专注的开发者的帮助，也不仅仅是针对我们中间更容易分心的表面调整。此功能是功能套件的一部分，可帮助使用 CSS Container Queries 进行开发。来自官方文档DevTools: Container Queries tooling的Isolation mode v1部分：
隔离模式让开发人员更加关注容器及其 包含后代。这包括：
- 特殊覆盖以突出显示 检查页面上的容器
- 模糊/屏蔽非容器区域以 为容器带来更多关注
- DOM 树中的“焦点模式”（此 将是并行实现的独立功能）
- 看这个 容器的大小查询断点并在它们之间切换，如 当前设备工具栏的媒体查询选项
【讨论】：