【问题标题】:How to go to a specific file in Chrome Developer Tools?如何转到 Chrome 开发者工具中的特定文件?
【发布时间】:2013-01-14 12:13:10
【问题描述】:

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

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

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

【问题讨论】:

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

标签: javascript debugging google-chrome google-chrome-devtools frontend


【解决方案1】:

在源选项卡中使用 CTRL+O+O 用于 Mac)搜索脚本, 样式表和 sn-ps 按文件名。

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

[Chrome Devtools Cheatsheet]

【讨论】:

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

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

+ P — 在 Mac 中。

【讨论】:

  • OP 似乎具有相同的行为。我想知道一个是否已弃用。
【解决方案3】:

在 Windows 中:

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

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

【讨论】:

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

Mac:Command + O 窗口:Ctrl + O

【讨论】:

    猜你喜欢
    • 2020-02-21
    • 2015-08-26
    • 1970-01-01
    • 2016-08-20
    • 2014-11-10
    • 1970-01-01
    • 1970-01-01
    • 2014-08-08
    • 1970-01-01
    相关资源
    最近更新 更多