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

Question

我发现我的代码中出现了一个不知道从哪里插入的流氓空的 <div> ，很难找到它是从哪里进来的。 我使用 debugger; 并逐步执行代码，但是步骤函数在chrome开发工具的“Sources”选项卡中，而“Elements”选项卡则显示需要查看的内容。 我有两个屏幕，其中一个屏幕上打开了开发工具，另一个屏幕上显示了页面，但是我需要在逐步执行代码时查看HTML中何时出现该div，每次单击后切换选项卡非常麻烦。

有没有办法实现这种视图以加快故障排除速度（例如第二个开发工具实例？或分割选项卡？），或者还有其他建议？因为我不知道它是如何生成的，所以无法对该div进行颜色标记并查找颜色是否出现在屏幕上...

- chris Frisina

Answer 1

目前无法在Chrome开发工具中同时显示元素和源选项卡。(最新Chrome版本：v64)。

如果您想查找添加某个元素的代码，则建议使用比debugger;更适合的工具。请查看"子树修改"：

- Konrad Dzwinel

---

虽然这个答案提供了一个解决方案并被接受，但它并不是问题标题的确切答案。它很有用，但有点不完整，使得帖子在某种程度上具有误导性。我建议要么编辑问题，要么扩展解决方案。 - Bulent Vural

Answer 2

现在可以在同一页中查看元素和页面源代码。

请按照以下步骤操作：

1. 打开调试器或使用 Ctrl+Shift+C 快捷键

2. 从右上角点击“自定义和控制开发工具”图标，在选项中选择显示控制台抽屉：

3. 现在从左下角，点击快速源选项，如下图所示：

4. 所有在源中打开的 js 文件将在此处显示：

- Harsha Vardhan

Answer 3

现在您可以右键单击视图选项卡，然后选择“移动到底部”，这样您就可以同时查看元素和源代码。

- tony