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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
详解javascript事件冒泡
Jan 09 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
jquery animate 动画效果使用说明
2009/11/04 Javascript
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
Python如何操作docker redis过程解析
2020/08/10 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
辩论赛主持词
2014/03/18 职场文书
新年主持词
2014/03/27 职场文书
作文评语大全
2014/04/23 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
文明旅游倡议书
2015/04/28 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript