在 Chrome DevTools 中同时查看 Elements 和 Sources

Question

我发现了多个关于同时查看 Sources 和控制台的问题，而且这样做很容易。当我在调试 JS 时，探索元素以查看 HTML 结构并在逐步执行时检查选择器非常有用。

有什么方法可以垂直拆分 DevTool 并同时查看 Elements 和 Sources 吗？ 如果这是不可能的，那可能是我以错误的方式进行。您通常如何调试 JS 并检查 Chrome 中的选择器？

Answer 1

是的，您可以根据自己的意愿重新定位不同的标签。您可以右键单击 Sources 选项卡，然后将其移至底部。

在 Chrome 中打开开发者工具后，转到 Sources 选项卡，然后按 Esc 按钮。它在底部启动控制台窗口。

Answer 2

有什么方法可以垂直拆分 DevTool 并同时查看 Elements 和 Sources 吗？

不，暂时没有。

您通常如何调试 JS 并检查 Chrome 中的选择器？

当您在“元素”选项卡中标记一个元素时，它将在控制台中显示为$0，您也可以右键单击它并选择“另存为全局变量”。如果你想检查 CSS 选择器，你可以从同一个菜单中“复制 CSS 选择器”。

您可以从“源”到“元素”“切换选项卡”以在调试器和元素选项卡之间切换，您可以使用键盘快捷键（command + shift + p 在选项卡之间快速切换或运行操作)。

您还可以设置 DOM 断点（用于事件或元素更改时），或使用 DOM API 使用控制台抽屉直接处理来自 sources 的元素。