如何用Chrome控制台快速查找调试JavaScript运行代码

个人觉得 Chrome 是目前最好用的浏览器,IE 简直就是搅屎棍。不知道大家在看别人写的网页时,怎么找对应的 js 动作的?是不是根据 id 或者 name 等标识,在 js 文件中挨个搜索?这种办法是最基础的,最原始的。不过对于大型网站,引用的 js 文件一大片的那种,不知道各位还有没有心情查找。Chrome 内核给我们提供了非常强大的开发人员工具,使用它,我们可以提升很高的效率,下面就跟我一起学习下 Chrome 控制台快速查找调试 JavaScript 运行代码吧!以本站为例,点击用户中心修改用户的昵称,我们可以这样做。

Chrome 控制台必须使用 Chrome 内核才有,目前市面上,除了 IE 之外几乎都有,按 F12 即可开启。选择 Chrome 控制台中 sources 资源选项卡,打开 debugger 窗口。选择 event listener breakpoints 下的 Mouse 下的 click 事件,如下图所示:

点击按钮后,会执行一步 JavaScript,并且暂停,出现 js 调试效果。这个时候如果跳到 jquery 等第三方封装库中,我们可以使用 blackbox script 功能,将其加入黑箱子中,这样就不会暂停到第三方类库中。

如果第一步暂停效果不是你要的代码,你可以点击继续调试按钮,进入下一步 js 执行位置,在资源窗口可以看到对应的代码,如下图:

仅仅只需要点击几下鼠标,就能快速找到网页中执行的 js 代码所在文件及行号,是不是非常方便呢?

http://xzh.i3geek.com
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途及非法用途,否则后果自负!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"qq301.com",如遇到无法解压的请联系管理员!
资源客是一个优秀的分享资源站,本站资源均为各位友友分享而来,特殊原创会标明如有侵犯版权等可联系删除

资源客 » 如何用Chrome控制台快速查找调试JavaScript运行代码