我当前面临的问题是，当一个页面，引用了几十个外部的插件库时，有时候仅凭插件名称，并不知道页面中的一个函数调用，是引用的哪一个库文件。因此要借助一些调试手段，chrome调试器有如下一些手段：

• 在调试器的network面板中，能看到本页面内所有的js外部引用，但仅为“引用”，这些js不一定被实际调用了。
• 如果是查找一个dom对象的行为，比如click，可以直接在event listeners中查到js调用。
• 注意这里有两个重要选项：
  
  Events Listeners的具体使用：
  ancestors（祖先元素）这个选项，是列出所有上级元素的事件，可以用来区别，是本身触发，还是父级元素触发
  framework listeners(框架事件），是选择，是否列出调用的js框架，如果未选中，会显示jquery.js为最终框架（一般我们不需要显示这个）

• 最复杂的情况，如果与行为无关，本页中只有一个函数钩子（比如查找上图中的aaa()定义部分 ），咱们需要查找“在其它模块的函数定义”时，则需要一步步的摸着石头过河：

• 当知道函数调用关系，可以设置断点时，使用f8为直接运行下一个断点。f10为从下一个断点处单步运行。
• 当不知道调用关系，只能步进调试---找到函数入口，然后用f11单步运行，shift+f11为越过当前函数（当前函数仍会执行）；

 

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: