Google chrome 是否可以打开chrome developer tools选项卡的多个实例或拆分视图？

我想在查看“网络”选项卡上发送的内容的同时调试代码，而不必在“网络”选项卡和“源”选项卡之间来回切换。对于chrome版本52.0.2743.82或版本54.0.2810.2 canary，有没有办法做到这一点

我知道可以在控制台中记录http请求，该控制台在其他选项卡打开时可见，但如果可能，我希望使用actuall networks选项卡

---

提前感谢

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

但是，无法在拆分视图中使用调试逐步完成代码。如果您使用快捷方式，Chrome将自动切换到Sources选项卡

也不可能让扩展运行单独的调试器实例，因为不允许同时连接客户端

---

我将与其他Chromium贡献者讨论在split视图中共享调试控件的可行性。我不知道这件事是否容易做。我怀疑这是相当多的工作

如果您想设置分割视图，因为它很有用，请转到右侧的溢出菜单，选择“更多工具”，然后选择“显示控制台”。这样可以确保面板的负载低于主面板

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

现在您将看到一个小的源面板

---

这在Chrome 87中现在是可能的。右键单击菜单中的“网络”，然后选择“移动到底部”

它会做到这一点

---

因为我是从问题中被提到这里的，所以我将在这里回答

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

我的解决方法是使用两个单独的选项卡。 右键单击其中一个，然后单击“在新选项卡中打开”

当新选项卡打开时，按F12打开DevTools，并将两个编辑器并排停靠在一个编辑器上，然后按⊞+→ 然后在另一个上向左

结果:

---

啊，太棒了！不知何故，我认为quick source只是用来查看的。@mattzeunert您可以在其中设置断点，但当您使用调试器控件F10等时，它会将您切换回“源”选项卡。如果您可以在不切换选项卡的情况下进行操作，那就太好了。@Gideon，谢谢您的回复！我真的需要一步一步地完成代码，同时查看“网络”选项卡..：@54N1不幸的是，调试控件不可能出现在网络选项卡中。我将与其他Chromium贡献者展开讨论@GideonPyzer-有没有什么地方可以让我们投票支持这个请求？当您调试发送网络请求的代码时，它将非常有用。这将非常有用！他们做得很直观……我知道我不该感谢你，但是，谢谢你，伙计，你才是真正的MVP。