引自:http://www.poluoluo.com/jzxy/201209/178110_2.html

这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的,因为 google 也在不断完善chrome developer tool,所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的,mac 下的应该大同小异。

常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了。

1. Beautify Javascript

js 文件在上线前一般都会压缩下,压缩的 javascript 几乎没有可读性,几乎无法设定断点. 在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}),点击会将压缩 js 文件格式化缩进规整的文件,这时候在设定断点可读性就大大提高了。

2. 查看元素绑定了哪些事件

在 Elements 面板,选中一个元素,然后在右侧的 Event Listeners 下面会按类型出这个元素相关的事件,也就是在事件捕获和冒泡阶段会经过的这个节点的事件。

在 Event Listeners 右侧下拉按钮中可以选择 Selected Node Only 只列出这个节点上的事件

展开事件后会显示出这个事件是在哪个文件中绑定的,点击文件名会直接跳到绑定事件处理函数所在行,如果 js 是压缩了的,可以先 Pretty print 下,然后再查看绑定的事件。

3. Ajax 时中断

在 Scripts 面板右侧有个 XHR Breakpoints,点右侧的 + 会添加一个 xhr 断点,断点是根据 xhr 的 url 匹配中断的,如果不写匹配规则会在所有 ajax,这个匹配只是简单的字符串查找,发送前中断,在中断后再在 Call Stack 中查看时那个地方发起的 ajax 请求

4. 页面事件中断

除了给设定常规断点外,还可以在某一特定事件发生时中断(不针对元素) ,在 Scripts 面板右侧,有个 Event Listener Breakpoints,这里列出了支持的所有事件,不仅 click,keyup 等事件,还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断),onload,scroll 等事件。

5. Javascript 异常时中断

Pretty print 左侧的按钮是开启 js 抛异常时中断的开关,有两种模式:在所有异常处中断,在未捕获的异常处中断. 在异常处中断后就可以查看为什么抛出异常了。

6. DOM Level 3 Event 事件中断

在 Elements 面板,选中一个元素右键,有两个选项:Break on subtree modifications,Break on attributes modifications,这两个对应 DOM Level 3 Event 中的DOMSubtreeModified , DOMSubtreeModified 事件 在 Scripts 面板 DOM Breakpoints 处会列出所有 level3 的 event 中断

7. 所有 js 文件中查找

在 chrome developer tool 打开的情况下,按 ctrl + shift + F,在通过 js 钩子查找代码位置时很有用,查找支持正则表达式

8. command line api

  • $(id_selector) 这个与页面是否有 jQuery 无关
  • $$(css_selector)
  • $0,$1,$2,$3,$4
    1. Elements 面板中最近选中的 5 个元素,最后选择的是 $0
    2. 这个 5 个变量时先进先出的
  • copy(str) 复制 str 到剪切板,在断点时复制变量时有用
  • monitorEvents(object[,types])/unmonitorEvents(object[,types])
    1. 当 object 上 types 事件发生时在 console 中输出 event 对象
  • 更多 console api 请 console.log(console) 或 点击
  • 更多 command line api 点击
  • 9. 实时修改 js 代码生效

    • 页面外部 js 文件在 Scripts 面板中可以直接修改,改完后按 ctrl + S 保存,会立即生效
    • 注意
      1. 经测试不支持 html 页面中 js 修改
      2. 经过 Pretty print 格式化的脚本不支持修改

    10. console 中执行的代码可断点

    在 console 中输入代码的最后一行加上 //@ sourceURL=filename.js,会在 Scripts 面板中有个叫 filename.js 的文件,然后他就和外部 js 文件一样了

    1. function hello() {
    2. alert('say hi');
    3. }
    4. //@ sourceURL=hello.js

好强大的页面功能调试(js调试,查找js绑定的事件)值得学习的更多相关文章

  1. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  2. Chrome调试 ---- 控制台获取元素上绑定的事件信息以及监控事件

    需求场景 在前端开发中,偶尔需要验证下某个元素上到底绑定了哪些事件,以及监控某个元素上的事件触发情况. 解决方案 普通操作 之前面对这种情况,一般采取的措施就是在各个事件里写console.info, ...

  3. vue.js下移动端绑定click事件失效,pc端正常的问题

    原因可能是 我在项目中使用到了 better-scroll,默认它会阻止 touch 事件.所以在配置中需要加上 click: true 即可. 例如: mounted () { this.scrol ...

  4. 如何使用chrome浏览器进行js调试找出元素绑定的点击事件

    大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的Web前端脚本时,想找到一个元素绑定的点击事件,并不是那么容易,因为有些前端脚本封装的比较隐蔽,甚至有些加密脚本,用传统的查找元素ID.或 ...

  5. js 给元素绑定回车事件

    经常会看到登录页面输入完账户密码,回车就登录了.实现方法: JQuery方法: $("#focus")为获取id为focus的元素 $("#focus").ke ...

  6. 【转】天啦噜!原来Chrome自带的开发者工具还能这么用!(提升JS调试能力的10个技巧)

    天啦噜!原来Chrome自带的开发者工具还能这么用! (提升JS调试能力的10个技巧)   Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript ...

  7. 一探前端开发中的JS调试技巧

    前言 调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

  8. 前端开发中的JS调试技巧

    前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今 ...

  9. 【repost】一探前端开发中的JS调试技巧

    有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读 前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...

随机推荐

  1. HDOJ 1501 Zipper 【DP】【DFS+剪枝】

    HDOJ 1501 Zipper [DP][DFS+剪枝] Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...

  2. CWinApp类CMultiDocTemplate类CDocument类CView类的关系

    转自:http://blog.csdn.net/bboot/article/details/26884011 不得不转,瞬间搞清了很多问题,短小精悍 1.CWinApp类   它包含并管理着应用程序的 ...

  3. ThreadLocal管理登录信息

    通常在项目中,用户登录后,我们会将用户的信息存到session,如果想在其它地方获取session中的用户信息,我们需要先获取HttpServletRequest,再通过request.getSess ...

  4. 20145201 《Java程序设计》第一周学习总结(修改)

    # 20145201 <Java程序设计>第一周学习总结 ## 教材学习内容总结 万事开头难,终于开始学习了Java.寒假的时候看到老师的要求确实有点慌,但是这周翻开书,从书本知识第一行学 ...

  5. codeforces 738

    D: 题意:一行1*n的格子放船只,船数为a,船的长度为b,每格为0或1,1表示该格并不是船只的一部分,找出最少的格子数使得射击这些格子至少能打中一艘船. 思路:船的长度为b,即每段连续的长度为b的0 ...

  6. iOS日常学习 - 让你的 Xcode8 继续使用插件

    本文转载,原文链接 随着 iOS10 的正式版即将发布,Xcode8 GM 也在发布会后放出,本文不会涉及到 Xcode8 有哪些更新,而是记录了如何让 Xcode8 继续支持 Plugin. 相信各 ...

  7. 关于ENABLE_BITCODE

    pod 'TSVoiceConverter' 如果,设置了工程target的ENABLE_BITCODE为NO.但是,在真机上运行时,仍然提示类似于如下错误: URGENT: all bitcode ...

  8. 深入理解MR1与MR2的执行流程

    摘自:Tom White ,<Hadoop.The.Definitive.Guide.3rd.Edition> MR1 MR2

  9. ThinkPad.E440_FN键反了

    1.一直不知道,为何我的 FN键反了(Fn+F1 才是F1的功能),想改过来.查到是 BIOS中改,但是 BIOS里面没有 那些个修改的选项,于是 还原了BIOS的设置,于是出问题了... 2.问题1 ...

  10. thinkphp3.2.3 定时任务重新加载, 无法加载新的定时任务的问题

    thinkphp3.2.3 的定时任务有个坑,一旦你改名定时任何或者路径,新的定时任务将无法加载,无论你重启php还是重启nginx,甚至重启服务器,都不行. 原因是你要删掉一个类似lock文件,才可 ...