Chrome DevTools 搜索网站中的所有 javascript 文件

Question

我正在开发一个新客户的网站，该网站从 CDN 加载 Javascript，因此 Javascript 不会嵌入或嵌入网页源。 我想在每次执行getCurrentPosition() 时暂停，以确定它包含在哪个外部 JS 文件中。

我意识到我可以使用其他工具对 JS 文件的内容进行字符串搜索，但我更愿意使用 Chrome 的调试工具。

我应该尝试创建一个监视表达式还是有其他方法来确定某个 JS 函数何时何地被触发？

Answer 1

一种方法是将Geolocation.getCurrentPosition 方法替换为包装函数，以便您可以在其中设置断点，然后检查堆栈以查看是谁在调用它。

Answer 2

您可以使用 Chrome DevTools 搜索所有文件。找到你的函数并调试它：

1. 打开开发工具 (F12)
2. 转到来源标签
3. 按ctrl + shift + f (Win) 或cmd + option + f (Mac) 打开搜索所有文件
4. 搜索 getCurrentPosition
5. 放置断点（通过单击行左侧的行号）

Answer 3

如果您知道该方法在代码中的哪个位置被调用，您可以set breakpoints。这将在运行时暂停 javascript 的执行并让您获得堆栈跟踪。

Answer 4

您可以在网页上找到您需要的所有信息：https://developer.chrome.com/devtools/docs/javascript-debugging

简单地说（从网页复制）

打开一个网站，例如 Google Closure hovercard 演示页面或 TodoMVC

1. 打开一个网站，例如 Google Closure hovercard 演示页面或 TodoMVC Angular 应用程序

2. 打开 DevTools 窗口。

3. 如果尚未选择，请选择来源。

断点调试

断点是脚本中有意停止或暂停的地方。在 DevTools 中使用断点来调试 JavaScript 代码、DOM 更新和网络调用。

添加和删除断点 在 Sources 面板中，打开一个 JavaScript 文件进行调试。在下面的示例中，我们正在从 TodoMVC 的 AngularJS 版本调试 todoCtrl.js 文件。

单击行间距为该行代码设置断点。一个蓝色标记将指示是否设置了断点：

通过上面的简单示例，您实际上可以“停止”函数getCurrentPosition() 并对其进行调试。

Answer 5

1. 打开谷歌开发工具(F12)
2. 按 Ctrl + p

在打开的框中搜索所有文件（JS、CSS、...）。

在框中您有 5 个选项：

首先选择一个文件以使用选项 2-5

1. 键入“文件名”并选择它。
2. 键入“:linenumber”转到特定的行号（“:10”转到第 10 行）。
3. 键入“@symbol”转到特定符号（“@TestSymbol”转到 TestSymbol 符号）。

在这个选项中，如果你写@JSFunctionName 或@CSSClassName 那么光标 将导航到 JSFunctionName 或 CSSClassName。

4. 键入 '!sn-p' 转到特定的 sn-p（'!sn-pTest' 转到 sn-pTest sn-p）。
5. 键入 '>googleCommand' 以转到特定命令（'>Clear console' 清除控制台）。