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

Question

我有一个流氓空白<div>从我的代码中的某个位置插入，很难找到它何时进入。我正在使用debugger;并单步执行代码，但是， step函数位于chrome dev工具的“Sources”选项卡中，“Elements”选项卡具有我需要的视图。我有两个屏幕，在一个屏幕上有开发工具，在另一个屏幕上有页面，但是当我逐步完成代码时，我需要看看div何时出现在HTML上，切换标签后非常麻烦每次点击。

有没有办法完成此视图以更快地进行故障排除（可能是开发工具的第二个实例？或拆分标签？）或其他建议？由于我不知道它是如何生成的，我无法为div着色，只是寻找屏幕上的颜色......

Answer 1

仍然无法在chrome dev工具上同时显示元素和源标签。 （最新Chrome版本：v64）。

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

Answer 2

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

看到元素和源