Chrome DevTools 中的隔离模式有什么实际用途？

Question

右键单击 Chrome DevTools 的“元素”选项卡中的大多数元素，您将找到“进入隔离模式”的选项。它在视觉上隐藏了页面上的所有其他内容（尽管 CSS 或 DOM 的更改似乎仍然会影响页面布局。）

这样做的目的是什么？我理解添加它是为了允许 Selenium 或类似的工具来定位他们的报告。但为什么人类用户需要这个呢？如何使用它来帮助调试？

Answer 1

在没有任何其他上下文的情况下，人们可以推测隔离模式允许针对特定元素及其后代\xe2\x80\x94进行集中开发，减少其他暂时不相关的周围区域的视觉干扰，也许隐藏与这些区域相关的代码等。存在类似的工具例如，在多个思维导图应用程序的功能中，其中可以隐藏工作图的所有其他分支和节点，除了打算“集中”给定会话的分支和节点之外。

\n

但在这种情况下，它不仅仅是对专注开发的帮助，也不仅仅是对我们当中更容易分心的人进行表面调整。此功能是帮助 CSS容器查询开发的功能套件的一部分。来自官方文档DevTools: Container Queries tooling的隔离模式 v1部分：

\n

\n

隔离模式使开发人员能够更加关注容器及其包含的子容器。这包括：

\n

\n
• 用于突出显示检查页面上的\n容器的特殊覆盖层
\n
• 模糊/遮盖非容器区域\n以将更多焦点集中到容器上
\n
• DOM 树中的 \xe2\x80\x9c 焦点模式\xe2\x80\x9d （这\n将是并行实现的独立功能）
\n
• 查看此\n容器\xe2\x80\x99s 大小查询断点并在它们之间切换，如\n当前设备工具栏\xe2\x80\x99s 媒体查询选项中所示
\n

\n

\n