Chrome开发者工具：在不切换到“Sources”选项卡的情况下进入调试器

Question

如果我在JavaScript源代码中使用 debugger 语句，并打开Chrome开发者工具，它将停止执行，以便我可以在控制台中交互式地探索当前上下文。非常棒。

但不幸的是，它还会切换到 "Sources" 选项卡并显示发生 debugger 语句的行。大多数时候，我想要输入JavaScript命令，因此必须手动切换回 "Console" 选项卡。

我能避免切换选项卡并保持在 "Console" 选项卡吗？

或者我使用方法不正确？

- Jo Liss

---

我认为调试器每次执行的操作都是相同的。但在 Sources 页面中按“ESC”键时会显示控制台。我从来没有使用过控制台选项卡，因为调试90%的时间都涉及“步进”。 - joecritch

我已经回答了你的问题，但是我可以问一下你为什么使用debugger而不是更灵活的断点？ - MaxArt

感谢您的回答，还有@joecritch！我使用debugger而不是断点，因为我通常在我的编辑器中打开源代码（实际上是在CoffeeScript中），所以很容易添加一个debugger行。如果要设置断点，我必须通过“源”选项卡导航到我感兴趣的点，这需要更长的时间。 - Jo Liss

我注意到了同样的问题，并将其报告为“错误”https://bugs.chromium.org/p/chromium/issues/detail?id=609248 - kzahel

这是谷歌最糟糕的设计决策之一。我发现自己不断地在选项卡之间来回切换。就像楼主一样，我只想让选项卡停留在“控制台”上。请给我们提供选项，这样我们可以决定是否要使用默认行为。 - Stack Undefined

Answer 1

右击源标签，选择“移动到底部”。

- Shirantha Madusanka

---

目前最好的选择。 - JoeCool-Avismón

我爱你，伙计... 你帮我省了很多的烦恼。 - Ted

不错！小提示：按下“esc”键可以切换底部面板的开/关状态。 - Kerry Johnson

Answer 2

看起来谷歌浏览器在这9年中增加了一个偏好设置： https://dev59.com/Rb7pa4cB1Zd3GeqPwldo#69216922

引用那个回答：

我遇到了同样的问题，它让我疯了！ 我停止切换的方法是进入开发者工具设置 -> 首选项。

在`Sources`选项下，取消勾选“触发断点时焦点聚焦于源面板”。

- Nick Farina

---

Chrome的愚蠢、烦人的默认行为——我没有设置断点，但每次与我的用户界面进行交互时，它都会将开发工具标签聚焦到“Sources”。真是让人抓狂。 - Lee Cichanowicz

Answer 3

有一个原因 - 就是无论是由于断点还是 debugger 语句，代码停止时，通常都需要查看执行停止的位置。因此，开发人员工具会切换到“脚本/源”选项卡，这是主要浏览器之间的常见行为，可能还会显示局部变量、调用堆栈等。

最好的方法是保持控制台窗口始终打开，这样你就可以随时准备工作。只需按 Esc 键或单击左下角第二个图标即可。这就是我通常的做法。

当您期望从输入的命令中获得大量响应时，请切换到“控制台”选项卡。

- MaxArt

---

你解释了 debugger 的行为方式，但你没有回答问题，问题是“我能避免切换选项卡而留在控制台选项卡吗？”这是否可能做到？ - Daniel Bonnell

我建议你可以做的最好的事情。我认为它相当清楚地回答了这个问题。 - MaxArt

不是对问题的回答。 - PVermeer