Javascript 如何找出在 Chrome 控制台中按下按钮时调用的函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11008047/
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
How do I find out what functions are called when a button is pressed in Chrome Console?
提问by dangerChihuahua007
I am trying to teach myself the Google Closure javascript library. I am examining the TreeControl UI widget.
我正在尝试自学 Google Closure javascript 库。我正在检查 TreeControl UI 小部件。
How can I use Chrome Console to analyze what functions are run when I click on the "Cut" button in the demo below? For instance, can I somehow set a break point for that? I've tried viewing the source and looking around, but I feel that Chrome Console may offer a more systematic method.
在下面的演示中，我如何使用 Chrome Console 来分析在单击“剪切”按钮时运行了哪些功能？例如，我可以以某种方式为此设置断点吗？我曾尝试查看源代码并环顾四周，但我觉得 Chrome Console 可能提供了更系统的方法。
https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html
https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html
采纳答案by Kai
With the Chrome Developer Tools window open, click on the "Sources" tab. If you don't see anything you may need to click on the "Show Navigator" button in the upper-left corner of that tab. With the navigator open, navigate to the file where the cut()function is defined (in your case it's demo.html). When you bring the file into view, find the line where the cut()function is defined and then set a breakpoint on the first line within that function. You can set a breakpoint by clicking the line number on the left side.
打开 Chrome 开发者工具窗口，点击“来源”标签。如果您没有看到任何内容，则可能需要单击该选项卡左上角的“显示导航器”按钮。打开导航器后，导航到cut()定义函数的文件（在您的情况下是demo.html）。当您查看文件时，找到cut()定义函数的行，然后在该函数的第一行设置断点。您可以通过单击左侧的行号来设置断点。
Once you've set your breakpoint(s), do something on the page that would trigger the cut()function and the browser should break script execution as soon as it enters the cut()function (assuming your breakpoint is on the first line within the cut()function). From this point you can use the controls on the top right of the tab to step in/out/around code and see what's going on.
设置断点后，在页面上执行一些会触发cut()函数的操作，浏览器应在进入cut()函数后立即中断脚本执行（假设您的断点位于cut()函数内的第一行）。从这一点开始，您可以使用选项卡右上角的控件来单步执行/退出/绕过代码并查看发生了什么。
Here's a screenshot of me doing it: http://d.pr/i/f6BO
这是我做的截图：http: //d.pr/i/f6BO
Also, here's a great video that talks about using the Chrome Dev tools, including setting breakpoints: http://www.youtube.com/watch?v=nOEw9iiopwI
此外，这里有一个很棒的视频，介绍了如何使用 Chrome 开发工具，包括设置断点：http: //www.youtube.com/watch?v=nOEw9iiopwI
回答by
You may be looking for the "Event Listener Breakpoints" section on the right side of the Debugger area. Open that up and select the click event under "mouse". See the screen image. Then click on the button in the app and you will immediately be taken to the code being executed.
您可能正在寻找调试器区域右侧的“事件侦听器断点”部分。打开它并选择“鼠标”下的点击事件。请参阅屏幕图像。然后单击应用程序中的按钮，您将立即被带到正在执行的代码。
回答by Hymanie Chan
The thing that you are looking for is called 'Profiling'.
您正在寻找的东西称为“分析”。
It can be achieved by:
可以通过以下方式实现：
- Go to Profiles
- Choose first option ('Collect JavaScript CPU Profile')
- Start it before pressing button 'Cut'
- 转到个人资料
- 选择第一个选项（“收集 JavaScript CPU 配置文件”）
- 在按下“剪切”按钮之前启动它
回答by timhc22
This may be helpful for some people:
这可能对某些人有帮助：
You can right click an element on the elements tab and use 'break on' to break on e.g. sub element modification. https://developer.chrome.com/devtools/docs/javascript-debugging
您可以右键单击元素选项卡上的元素，然后使用“中断”来中断，例如子元素修改。https://developer.chrome.com/devtools/docs/javascript-debugging
