是否可以打开多个实例或拆分Chrome开发人员工具标签的视图？

Question

我想在看到网络标签上发送的内容的同时调试代码，而无需在网络标签和来源标签。有没有办法这样做的铬版本52.0.2743.82或版本54.0.2810.2金丝雀？

我知道可以在控制台中记录http请求，这可以在其他选项卡打开的情况下显示，但如果可能的话我想要实际的网络选项卡..

提前谢谢

Answer 1

您可以在查看“网络”面板（或其他主面板）时查看“快速来源”。这将允许您查看源并添加断点。

但是，无法使用拆分视图中的调试来逐步执行代码。如果您使用快捷方式，Chrome会自动切换到“来源”标签。

由于Chrome Debugging Protocol不允许同时连接客户端，因此也无法使用运行单独调试器实例的扩展。

我将与其他Chromium贡献者讨论在分割视图中共享调试控件的可行性。我不知道它是否会轻易完成。我怀疑这是一项相当多的工作。

如果您想设置拆分视图，因为它仍然有用，请转到右侧的溢出菜单并选择“更多工具”，然后选择“显示控制台”。这可确保面板在主要面板下方加载。

在显示的面板左侧，单击溢出菜单并选择“快速来源”。

现在您将看到一个小的“来源”面板。

Answer 2

1. 打开Chrome DevTools（Mac：Alt + CMD + J，Windows / Linux：Control + Shift + J）
2. 点击右上角的三个点（自定义和控制DevTools）
3. 在Dockside下选择“Undock into seperate window”
4. 按键盘快捷键再次打开DevTools。

现在，您可以根据需要创建任意数量的实例。

Answer 3

现在可以在Chrome 87中实现。右键单击菜单中的“网络”，然后选择“移至底部”

Answer 4

因为我是从 this 问题中被推荐到这里的，所以我会在这里回答。

在我的场景中，我需要能够同时处理两个不同的源文件（在 DevTools->Sources 下），例如一个 html 和一个 css 文件。

我的解决方法是在两个单独的选项卡上工作。
右键单击其中之一，然后单击“在新标签页中打开”。

当新标签页打开时按 F12 打开 DevTools，并排停靠两个编辑器（专注于一个并按 ⊞+→ 然后向左另一个）。

结果：