Chrome调试折腾记之JS断点调试技巧


Posted in Javascript onSeptember 11, 2017

JS调试技巧技巧

一:格式化压缩代码

Chrome调试折腾记之JS断点调试技巧
Chrome调试折腾记之JS断点调试技巧

技巧二:快速跳转到某个断点的位置

右侧的Breakpoints会汇总你在JS文件所有打过的断点,点击跟checkbox同一行的会暂时取消这个断点,若是点击checkbox下一行的会直接跳转到该断点的位置

Chrome调试折腾记之JS断点调试技巧

技巧三:查看断点内部的作用范围【很实用】

右侧的scope可以看到相当多实用的信息,比如this的指向,是否有值,断点是对象还是其他等。。

Chrome调试折腾记之JS断点调试技巧

技巧4:监听事件断点

右侧的Event Listener Breakpoints可以选择性的监听某类行为事件,比如键盘输入,拖拉等。。勾选前面的checkbox就可以生效,当你触发改行为的时候就会跳转到触发的JS

Chrome调试折腾记之JS断点调试技巧

技巧5:DOM及 XHR监听跳转

DOM Breakpoints : 是你Elements页,感觉要监听某段dom的可能有一些行为,但是又不具体知道确切位置就可以用了

Chrome调试折腾记之JS断点调试技巧 

Chrome调试折腾记之JS断点调试技巧

XHR Breakpoints: 向服务器请求的,ajax的核心要点

默认勾选了,所有XHR行为,可选项是判断URL。。。我用的不多

Chrome调试折腾记之JS断点调试技巧

技巧6:单步执行、单步进入、强制进入、单步退出

这个东东是调试中必不可少的,其实用过firebug的小伙伴,对这个就有一个清晰的认识你。基本一样;先上图;

Chrome调试折腾记之JS断点调试技巧

功能名词依次,不懂的可以看看我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? 若抛出异常则需要暂停在那里】

总结

这篇文章就到此处,更深入的及一些效率的小操作就到下篇文章再介绍,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
jQuery的事件预绑定
Dec 05 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 #Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 #Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 #Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 #Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 #Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 #Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 #Javascript
You might like
生成卡号php代码
2008/04/09 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
Yii实现简单分页的方法
2016/04/29 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
纯JS前端实现分页代码
2016/06/21 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
python与C互相调用的方法详解
2017/07/14 Python
python最长回文串算法
2018/06/04 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
Python partial函数原理及用法解析
2019/12/11 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
高中军训感言600字
2014/03/11 职场文书
班主任工作经验交流材料
2014/05/13 职场文书
生产助理岗位职责
2014/06/18 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
感谢信的格式
2015/01/21 职场文书
居委会工作总结2015
2015/05/18 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android