我发现有很多关于同时查看“Sources”和“Console”的问题，这很容易做到。当我调试JS时，探索“Elements”以查看HTML结构并在逐步执行时检查选择器非常有用。
有没有办法垂直拆分开发工具并同时查看“Elements”和“Sources”？ 如果不可能的话，可能是我走错了方向。你通常如何调试JS并在Chrome中检查选择器?
2个回答
9
是的，您可以根据自己的意愿重新定位不同的选项卡。您可以右键单击“源”选项卡，然后将其移动到底部。
- ashu
0
有没有办法在 DevTool 中垂直分割窗口，同时查看元素和源代码？
当您在“Elements”选项卡中标记元素时，它将作为
您可以通过切换选项卡（从“Sources”切换到“Elements”）在调试器和元素选项卡之间进行切换，并且您可以使用键盘快捷方式进行切换（command + shift + p 快速切换选项卡或运行操作）。
您还可以设置 DOM 断点（用于事件或元素更改时），或者使用 DOM API 从
不，目前还没有。
如何调试您的 JS 代码并在 Chrome 中检查选择器？当您在“Elements”选项卡中标记元素时，它将作为
$0在控制台中可用，您还可以右键单击它并选择“另存为全局变量”。如果您想检查 CSS 选择器，可以从同一菜单中“复制CSS选择器”。您可以通过切换选项卡（从“Sources”切换到“Elements”）在调试器和元素选项卡之间进行切换，并且您可以使用键盘快捷方式进行切换（command + shift + p 快速切换选项卡或运行操作）。
您还可以设置 DOM 断点（用于事件或元素更改时），或者使用 DOM API 从
sources中直接使用控制台抽屉与元素一起工作。- Benjamin Gruenbaum
7
我很高兴向目前领导谷歌开发工具团队并且非常能干的Benedikt提出这个建议 - 尽管我认为这个功能请求足够简单，你可以直接访问https://crbug.com并要求它。我不认为这是一个常见的功能请求，“为什么没有人做它？”的答案可能是“有很多值得做的事情，他们可能没有时间”。 - Benjamin Gruenbaum
1感谢宝贵的输入！非常感激。 - Rocco Marco Guglielmi
很高兴能够帮助你，欢迎来到 Stack Overflow！（我猜你在这里已经有一段时间了，只是这是第一个问题：]） - Benjamin Gruenbaum
1谢谢。我总是能找到答案，所以没有必要问……直到现在 :( - Rocco Marco Guglielmi
截至今天，您可以：查看下面@ashu用户的说明。一旦您在底部打开“菜单”，您可以右键单击“源”选项卡并单击“移动到底部”。希望这可以帮助您。 - Pere
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接