如何在 chrome 开发工具中同时查看元素选项卡和源选项卡

Posted 2023-03-05

【中文标题】如何在 chrome 开发工具中同时查看元素选项卡和源选项卡

【英文标题】：How to view elements tab and sources tab at the same time in chrome dev tools

【发布时间】：2013-07-18 03:18:13

【问题描述】：

我有一个流氓空白<div> 从我的代码中的某个位置插入，并且很难找到它何时进入。我正在使用debugger; 并单步执行代码，但是，step 函数在chrome 开发工具的“源”选项卡，“元素”选项卡有我需要的视图。我有两个屏幕，一个屏幕上有开发工具，另一个屏幕上有页面，但是当我单步执行代码时，我需要查看 div 何时通过 html，并且之后切换选项卡非常麻烦每次点击。

有没有什么方法可以实现这个视图以更快地排除故障（可能是开发工具的第二个实例？或拆分选项卡？），或其他建议？由于我不知道它是如何生成的，所以我无法为 div 着色，而只是寻找屏幕上出现的颜色...

【参考方案1】：

仍然无法在 chrome 开发工具上同时显示元素和源选项卡。 （最新的 Chrome 版本：v64）。

如果某个元素被插入到您的 DOM 并且您想找到负责添加它的代码，那么我建议使用比debugger; 更合适的工具。查看“subtree modifications”：

【讨论】：

虽然答案提供了解决方案并被接受，但它不是操作问题标题的确切答案。它很有用，但有点不完整会使线程以这种方式误导。我建议编辑问题或扩展解决方案。

【参考方案2】：

您现在可以右键单击视图选项卡并选择“移至底部”，这样您就可以在