如何在Chrome控制台中按下按钮时找出调用的功能？ [英] How do I find out what functions are called when a button is pressed in Chrome Console?

问题描述

我正在尝试自学Google Closure javascript库。我正在检查TreeControl UI小部件。

I am trying to teach myself the Google Closure javascript library. I am examining the TreeControl UI widget.

当我点击下面演示中的剪切按钮时，如何使用Chrome控制台分析运行的功能？例如，我可以以某种方式为此设置一个断点吗？我已经尝试查看来源并环顾四周，但我觉得Chrome控制台可能会提供更系统的方法。

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.

https://github.com/google/closure-library/blob/master/closure/ goog / demos / tree / demo.html

推荐答案

打开Chrome开发者工具窗口，点击来源标签。如果您没有看到任何内容，则可能需要单击该选项卡左上角的显示导航器按钮。打开导航器后，导航到定义 cut（）函数的文件（在您的情况下，它是 demo.html ）。当您将文件带入视图时，找到定义 cut（）函数的行，然后在该函数的第一行设置断点。您可以通过单击左侧的行号来设置断点。

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.

设置断点后，在页面上执行一些会触发断点的操作 cut（）函数，一旦进入 cut（）函数，浏览器就会破坏脚本执行（假设你的断点位于 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.

这是我做的截图它： http://d.pr/i/f6BO

此外，这是一个很棒的视频，讨论如何使用Chrome开发工具，包括设置断点： http://www.youtube.com/watch?v=nOEw9iiopwI

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控制台中按下按钮时找出调用的功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！