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

Question

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

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

Answer 1

仍然无法在chrome dev工具上同时显示元素和源选项卡.(最新Chrome版本:v64).

如果某个元素插入到您的DOM中并且您想要找到负责添加它的代码,那么我建议使用比它更合适的工具debugger;.查看" 子树修改 ":