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中定义对象类别
Dec 22 Javascript
javascript不同页面传值的改进版
Sep 30 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
jquery实现聊天机器人
2020/02/08 jQuery
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
使用Python绘制图表大全总结
2017/02/11 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python dataframe NaN处理方式
2019/12/26 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
音乐教学案例
2014/01/30 职场文书
小学数学教学反思
2014/02/02 职场文书
物业总经理岗位职责
2014/02/28 职场文书
职业生涯规划书前言
2014/04/15 职场文书
授权委托书
2014/09/17 职场文书
人事局接收函
2015/01/30 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
阿里云日志过滤器配置日志服务
2022/04/09 Servers