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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
JS面向对象编程 for Cookie
Sep 19 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
理解AngularJs指令
Dec 10 Javascript
JavaScript中0和""比较引发的问题
May 26 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
node使用promise替代回调函数
May 07 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
详解 TypeScript 枚举类型
Nov 02 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
基于文本的搜索
2006/10/09 PHP
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
python计算日期之间的放假日期
2018/06/05 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
会计实习生工作总结的自我评价
2013/10/07 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
关于学习的演讲稿
2014/05/10 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
2014年护士长工作总结
2014/11/11 职场文书
护士先进个人总结
2015/02/13 职场文书
甲午大海战观后感
2015/06/02 职场文书
nginx lua 操作 mysql
2022/05/15 Servers
Mysql 一主多从的部署
2022/05/20 MySQL