在调试器中查找 Javascript 源文件的快速方法？

Question

RStudio 使用 Chrome Devtools 在其查看器窗格中提供调试支持。 （它被标记为“RStudio Devtools”，但我不确定除此之外它的定制程度如何）。您可以使用右键单击“检查元素”打开其窗口。

在开发使用 Javascript 的显示时，Devtools 中的源代码窗格对于设置断点、单步执行等非常有用。

一件相当不方便的事情是找到我想要设置断点的行。一旦我打开了源文件，搜索就很容易了，但是找到正确的源文件就很难了。通常在我转到源窗格后，我会看到如下内容：

我知道我要调试的文件的名称，但它隐藏在左侧文件列表中index.html 之下的几个级别。有没有办法快速搜索这个文件层次结构的文件名，这样我就不需要打开所有级别到我想要的文件？比如我可能想调试htmlwidgets.js:

Answer 1

您会在“源”窗格中注意到，如果您没有打开的文件，您会在中间看到一条消息，指示您可以键入 Command + P（或在 Windows/Linux 上为 Ctrl + P）来打开一个文件。单击时，这将打开一个文本框，该文本框将对所有源文件的名称进行模糊搜索。在那里输入文件名，它应该在第一个结果中。您可以使用键盘导航到它并使用<Enter>/<return> 选择它，或者直接用鼠标单击。