Chrome调试折腾记之JS断点调试技巧
更新时间：2017年09月11日 09:16:21 作者：crper
这篇文章主要介绍了Chrome调试折腾记之JS断点调试技巧，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS调试技巧技巧
一：格式化压缩代码
技巧二：快速跳转到某个断点的位置
右侧的Breakpoints会汇总你在JS文件所有打过的断点，点击跟checkbox同一行的会暂时取消这个断点，若是点击checkbox下一行的会直接跳转到该断点的位置
技巧三：查看断点内部的作用范围【很实用】
右侧的scope可以看到相当多实用的信息，比如this的指向，是否有值，断点是对象还是其他等。。
技巧4：监听事件断点
右侧的Event Listener Breakpoints可以选择性的监听某类行为事件，比如键盘输入，拖拉等。。勾选前面的checkbox就可以生效，当你触发改行为的时候就会跳转到触发的JS
技巧5：DOM及 XHR监听跳转
DOM Breakpoints : 是你Elements页，感觉要监听某段dom的可能有一些行为，但是又不具体知道确切位置就可以用了
XHR Breakpoints： 向服务器请求的，ajax的核心要点
默认勾选了，所有XHR行为，可选项是判断URL。。。我用的不多
技巧6：单步执行、单步进入、强制进入、单步退出
这个东东是调试中必不可少的，其实用过firebug的小伙伴，对这个就有一个清晰的认识你。基本一样；先上图；
功能名词依次，不懂的可以看看我firebug那个系列的
- Pause script excution 【单步执行，在断点处暂停，等待调试–不是直译】 ： 暂停后这个按钮会变成 Resume script excution 【继续执行】 ， 快捷键 【F8 或者 Ctrl + \】
- Step over next function call【单步跳过】 ： 会跳到下一个断点，快捷键 【F10 或者 Ctrl + `】
- Step into next function call【单步进入】 ： 会进入函数内部调试，快捷键【F11 或者 Ctrl + ;】
- Step out of current function 【单步跳出】: 会跳出当前这个断点的函数，快捷键【Shift + F11 或者 Ctrl + Shift + ;】
后面的就是chrome的特色功能
- Deactivate breakpoints : 使所有断点临时失效，快捷键【Ctrl + F8】
- Don't Pause on exceptions: 不要在表达式处暂停，还有一个可选项【Pause On Caught Exceptions– 若抛出异常则需要暂停在那里】
总结
这篇文章就到此处，更深入的及一些效率的小操作就到下篇文章再介绍，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了微信小程序自定义计时器功能，设置一个时间，可以开始倒计时、暂停，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要介绍了javascript返回顶部的按钮实现方法,需要的朋友可以参考下2016-01-01
prettify是Google提供的一款源代码语法高亮着色器，它提供一种简单的形式来着色HTML页面上的程序代码，最值得亮点的地方是不需要指明代码的语言类型，它会自动进行判断。2010-12-12
这篇文章主要介绍了JavaScript实现按Ctrl键打开新页面的例子,本文方法适用HTML5环境中,需要的朋友可以参考下2014-09-09
这篇文章主要为大家介绍了Uni-app跨平台开发应用入门实战示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
本篇文章主要是对js中call与apply的用法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
本篇文章主要是对javascript客户端遍历控件与获取父容器对象示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要给大家介绍了关于超好玩js页面效果之实现数值的动态变化的相关资料,文中通过示例代码及图文介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了原生JavaScript实现购物车效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了JS中将多个逗号替换为一个逗号的实现代码,需要的朋友可以参考下2017-06-06
最新评论