Chrome DevTools 搜索网站中的所有 javascript 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37685351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chrome DevTools search all javascript files in website
提问by sparecycle
I'm working on a new client's website that loads Javascript from a CDN so the Javascript is not embedded or inline with the webpage source. I would like to pause everytime getCurrentPosition()is executedin order to determine which external JS file it is contained in.
我正在处理一个从 CDN 加载 Javascript 的新客户网站，因此 Javascript 未嵌入或内嵌于网页源代码中。我想在每次getCurrentPosition()执行时暂停，以确定它包含在哪个外部 JS 文件中。
I realize I could use other tools to do a string search through the contents of the JS files but I would rather keep to Chrome's debugging tools.
我意识到我可以使用其他工具对 JS 文件的内容进行字符串搜索，但我宁愿保留 Chrome 的调试工具。
Should I be trying to create a watch expression or is there another way to pin down when and where a certain JS function is fired?
我应该尝试创建一个监视表达式还是有另一种方法来确定某个 JS 函数在何时何地被触发？
回答by Jaqen H'ghar
You can search in all files using Chrome DevTools. Find your function and debug it:
您可以使用 Chrome DevTools 搜索所有文件。找到你的函数并调试它：
- Open DevTools (F12)
- Go to sources tab
- Open Search All Files by pressing
ctrl + shift + f(Win) orcmd + option + f(Mac) - Search getCurrentPosition
- Put a breakpoint (By clicking the line number at the left of the line)
- 打开开发者工具 (F12)
- 转到来源选项卡
- 按
ctrl + shift + f(Win) 或cmd + option + f(Mac)打开“搜索所有文件” - 搜索getCurrentPosition
- 放置断点（通过单击行左侧的行号）
回答by Iman Bahrampour
- Open Google Dev tools(F12)
- Press Ctrl + p
- 打开谷歌开发工具（F12）
- 按 Ctrl + p
In the opened box search for all files(JS, CSS, ...).
在打开的框中搜索所有文件（JS、CSS、...）。
In the box you have 5 options:
在框中，您有 5 个选项：
- Type 'filename' and select it.
- Type ':linenumber' to go to specific line number(':10' go to line 10).
Type '@symbol' to go to specific symbol('@TestSymbol' go to TestSymbol symbol).
In this option, if you write @JSFunctionName or @CSSClassName then the cursor will navigate to the JSFunctionName or the CSSClassName.
Type '!snippet' to go to specific snippet('!snippetTest' go to snippetTest snippet).
- Type '>googleCommand' to go to specific command('>Clear console' clear the console).
- 输入“文件名”并选择它。
- 键入 ':linenumber' 转到特定行号（':10' 转到第 10 行）。
键入“@symbol”转到特定符号（“@TestSymbol”转到 TestSymbol 符号）。
在此选项中，如果您编写@JSFunctionName 或@CSSClassName，则光标将导航到 JSFunctionName 或 CSSClassName。
输入 '!snippet' 转到特定的代码段（'!snippetTest' 转到snippetTest 代码段）。
- 键入“>googleCommand”以转到特定命令（“>清除控制台”清除控制台）。
For using options 2-5 select a file.
要使用选项 2-5，请选择一个文件。
回答by Evan Wise
One way would be to replace the Geolocation.getCurrentPositionmethod with a wrapper function so that you can set a breakpoint inside it, and then examine the stack to see who is calling it.
一种方法是Geolocation.getCurrentPosition用包装函数替换该方法，以便您可以在其中设置断点，然后检查堆栈以查看谁在调用它。
回答by Daniel Lizik
If you know where in the code the method is called you can set breakpoints. This will pause the javascript execution during runtime and allow you get a stack trace.
如果您知道该方法在代码中的哪个位置被调用，您可以设置断点。这将在运行时暂停 javascript 执行并允许您获得堆栈跟踪。
回答by John Skoumbourdis
You can find all the information that you need at the webpage: https://developer.chrome.com/devtools/docs/javascript-debugging
您可以在网页上找到您需要的所有信息：https: //developer.chrome.com/devtools/docs/javascript-debugging
By simply putting it (copied from the webpage)
通过简单地把它（从网页复制）
Open a site such as the Google Closure hovercard demo page or the TodoMVC
Open a site such as the Google Closure hovercard demo page or the TodoMVC Angular app
Open the DevTools window.
If it is not already selected, select Sources.
打开一个站点，例如 Google Closure hovercard 演示页面或 TodoMVC
打开一个站点，例如 Google Closure hovercard 演示页面或 TodoMVC Angular 应用程序
打开开发者工具窗口。
如果尚未选择，请选择来源。
Debugging with breakpoints
使用断点调试
A breakpoint is an intentional stopping or pausing place in a script. Use breakpoints in DevTools to debug JavaScript code, DOM updates, and network calls.
Add and remove breakpoints In the Sources panel, open a JavaScript file for debugging. In the example below, we are debugging the todoCtrl.js file from the AngularJS version of TodoMVC.
Click the line gutter to set a breakpoint for that line of code. A blue tag will indicate if a breakpoint has been set:
断点是脚本中有意停止或暂停的地方。使用 DevTools 中的断点来调试 JavaScript 代码、DOM 更新和网络调用。
添加和删除断点 在 Sources 面板中，打开 JavaScript 文件进行调试。在下面的示例中，我们正在调试来自 TodoMVC 的 AngularJS 版本的 todoCtrl.js 文件。
单击行间距为该行代码设置断点。蓝色标记将指示是否已设置断点：
With the above simple example you can actually "stop" the function getCurrentPosition()and debug it.
通过上面的简单示例，您实际上可以“停止”该函数getCurrentPosition()并对其进行调试。
