如何在Chrome控制台中按下按钮时找出调用的功能？
dan*_*007 54 javascript google-closure-library google-chrome-devtools
我正在尝试自学Google Closure javascript库.我正在检查TreeControl UI小部件.
当我点击下面演示中的"剪切"按钮时,如何使用Chrome控制台分析运行的功能？例如,我可以以某种方式为此设置一个断点吗？我已经尝试查看源代码并环顾四周,但我觉得Chrome控制台可能会提供更系统的方法.
https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html
小智 102
您可能正在寻找调试器区域右侧的"事件监听器断点"部分.打开它并选择"鼠标"下的点击事件.查看屏幕图像.然后单击应用程序中的按钮,您将立即进入正在执行的代码.
- Serj Sagan - 您可以通过打开开发人员工具(f12)跳过任何js文件,点击f1(设置),单击左侧的Blackboxing菜单项,然后输入要跳过的文件的名称(例如jquery) .js文件).然后你不会被打断,无法跟踪你不关心的javascript库代码,并且可以专注于你(或其他开发人员)编写并想要诊断的东西. (13认同)
- 这很酷,但是能够跳过jQuery并开始使用你的功能会很好,我认为IE11有这个,很难相信IE有我想要的功能,Chrome不会 (7认同)
- 这应该标记为正确的答案. (5认同)
Kai*_*Kai 27
打开Chrome开发者工具窗口,点击"来源"标签.如果您没有看到任何内容,则可能需要单击该选项卡左上角的"显示导航器"按钮.打开导航器后,导航到cut()定义功能的文件(在您的情况下demo.html).将文件置于视图中时,找到cut()定义函数的行,然后在该函数的第一行设置断点.您可以通过单击左侧的行号来设置断点.
设置断点后,在页面上执行一些会触发该cut()功能的操作,浏览器一进入该cut()功能就会破坏脚本执行(假设断点位于cut()函数的第一行).从这一点开始,您可以使用选项卡右上角的控件来进入/退出/围绕代码,看看发生了什么.
这是我做的截图:http://d.pr/i/f6BO
此外,这是一个很棒的视频,讨论如何使用Chrome开发工具,包括设置断点:http://www.youtube.com/watch？v = nOEw9iiopwI
- 您的屏幕截图链接已损坏. (15认同)
这可能对某些人有帮助：
您可以右键单击元素选项卡上的元素，然后使用“中断”来中断，例如子元素修改。https://developer.chrome.com/devtools/docs/javascript-debugging
| 归档时间： |
|
| 查看次数： |
64909 次 |
| 最近记录： |