在 Chrome DevTools 中同时查看元素和源

Question

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

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

Answer 1

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

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

Answer 2

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

不，不是此刻。

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

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

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

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