ChatGPT解决这个技术问题 Extra ChatGPT

如何转到 Chrome 开发者工具中的特定文件?

我正在使用繁重的前端方法开发一个 Web 应用程序。通过使用 Dojo 和 AMD 方式,我目前拥有可以轻松加载一百多个不同 javascript 文件的测试屏幕。

当我想针对任何特定问题进行调试或验证是否看到特定文件的旧版本时,我发现很难在 Chrome 开发者工具的 Sources 选项卡中找到我的文件。

是否有任何快捷方式或操作可以让我输入文件名并将我带到该文件的来源?

在控制台的右下方,有一个齿轮图标。点击它。在设置窗口的最后一个选项卡上有一个快捷方式选项卡。您可以看到关键组合,如答案。
使用 Google 开发工具中的“转到文件”(一种灵活且有用的工具,可以搜索您的函数名称、CSS 中的类名称……)'Go to file' in Google Dev Tools

J
JDB

在源选项卡中使用 CTRL+O(Mac 为⌘+O)按文件名搜索脚本、样式表和片段。

(查看文件时使用 CTRL+SHIFT+O 过滤/导航到 JavaScript 函数/CSS 规则)

[Chrome Devtools Cheatsheet]


很高兴知道这一点!您曾经(在 Chrome 35 之前?)能够通过在 Sources 选项卡中使用文件导航器键入来开始文件名搜索;很高兴知道他们已将此功能隐藏在快捷方式后面,而不是完全删除它。 =)
过滤器/搜索的警告是您似乎无法进行精确搜索或通配符。搜索 .js 会返回文件名中包含 js. 的任何文件:/
当我打开一个文件时,我看到相同文件的多个版本。我必须遍历每个文件才能找到合适的文件。你有什么建议吗?
A
Aleksei Mialkin

CTRL + P 在 Windows 中打开搜索输入。

https://i.stack.imgur.com/8NICn.png

⌘ + P — 在 Mac 中。

https://i.stack.imgur.com/73FA2.png


OP 似乎具有相同的行为。我想知道一个是否已弃用。
l
live-love

在 Windows 中:

使用 CTRL+SHIFT+F 搜索文件中的内容。

使用 CTRL+SHIFT+O 搜索文件名。


如果使用构建过程,并且文件在 chrome 中不再可识别,则按内容搜索是一个很好的解决方案。
J
Jackie

Mac:Command + O Windows:Ctrl + O