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

Question

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

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

我是否应该尝试创建一个监视表达式，还是有另一种方法可以确定触发某个JS函数的时间和位置？

Answer 1

您可以使用Chrome DevTools搜索所有文件。找到你的功能并进行调试：

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

Answer 2

1. 打开Goog​​le Dev工具（F12）
2. 按Ctrl + p

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



在框中，您有5个选项：



1. 输入＆＃39;文件名＆＃39;并选择它。
2. 类型＆＃39;：linenumber＆＃39;转到特定的行号（＆＃39;：10＆＃39;转到第10行）。

3. 输入＆＃39; @ symbol＆＃39;转到特定符号（＆＃39; @ TestSymbol＆＃39;转到TestSymbol符号）。

   在此选项中，如果您编写@JSFunctionName或@CSSClassName，则表示光标 将导航到JSFunctionName或CSSClassName。

4. 输入＆＃39;！代码段＆＃39;转到特定代码段（＆＃39;！snippetTest＆＃39;转到snippetTest代码段）。

5. 输入＆＃39;＆gt; googleCommand＆＃39;转到特定命令（＆＃39;＆gt;清除控制台＆＃39;清除控制台）。

使用选项2-5选择一个文件。

Answer 3

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

Answer 4

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

Answer 5

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

简单地把它（从网页上复制）

  

打开Goog​​le Closure hovercard演示页或TodoMVC

等网站      

  

1. 打开Goog​​le Closure hovercard演示页面或TodoMVC Angular应用程序等网站

  

2. 打开DevTools窗口。

  

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

  

使用断点进行调试

  

断点是脚本中故意停止或暂停的位置。在DevTools中使用断点来调试JavaScript代码，DOM更新和网络调用。

     

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

     

单击line gutter为该行代码设置断点。蓝色标记将指示是否已设置断点：

通过上面这个简单的例子你可以实际上＆＃34;停止＆＃34;函数getCurrentPosition()并调试它。