chromedevelopertool调试技巧
这篇文章是根据目前chrome稳定版(19.0.1084.52 m)写的,因为 google 也在不断完善chromedeveloper tool,所以chrome版本不同可能稍有差别. 一些快捷键也是 windows 上的,mac 下的应该大同小异。
成都创新互联公司是一家集网站建设,湛江企业网站建设,湛江品牌网站建设,网站定制,湛江网站建设报价,网络营销,网络优化,湛江网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了。
1. BeautifyJavascript
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 抛异常时中断的开关,有两种模式:在所有异常处中断,在未捕获的异常处中断. 在异常处中断后就可以查看为什么抛出异常了。
名称栏目:chromedevelopertool调试技巧
当前路径:http://scyanting.com/article/cjjigo.html