实用Javascript调试技巧分享(小结)


Posted in Javascript onJune 18, 2019

见过太多同学调试Javascript只会用简单的console.log甚至alert,看着真为他们捉鸡。。因为大多数同学追求优雅而高效地写代码,却忽略了如何优雅而高效地调试代码,不得不说是有点“偏科”了。下面我就分享一些实用且聪明的调试技巧,希望能让大家调试自己代码的时候更加从容自信。

1. 不要使用alert

首先,alert只能打印出字符串,如果打印的对象不是String,则会调用toString()方法将该对象转成字符串(比如转成[object Object]这种),所以除非你打印String类型的对象,其他什么信息都获取不到。其次,alert会阻塞UI和javascript的执行,必须点击'OK'按钮才能继续,非常低效。所以,喜欢使用alert的同学可以改改这个习惯了。

2. 学会使用console.log

console.log谁都会用,但是很多同学只知道最简单的console.log(x)这样打印一个对象,当你的代码里面console.log多了之后,会很难将某条打印结果和代码对应,所以我们可以给打印信息加上一个标签便于区分:

let x = 1;
console.log('aaaaaaaa', x);

得到:

实用Javascript调试技巧分享(小结)

标签不一定要有明确的含义,视觉效果显著就可以了,当然有明确意义更好。

事实上,console.log可以接收任意多的参数,最后将这些对象拼接输出,比如:

实用Javascript调试技巧分享(小结)

如果打印信息过多,不容易找到目标信息的话,可以在控制台中进行过滤:

实用Javascript调试技巧分享(小结)

注意点

在使用console.log打印一个引用类型(比如数组和自定义对象)的对象的时候,输出结果可能并不是执行console.log方法那个时间点的值。举个例子:

实用Javascript调试技巧分享(小结)

可以发现两个console.log输出的结果展开后都是[1, 2, 3, 4],因为数组是引用类型,所以在展开后获取到的都是数组最新的状态。我们可以使用JSON.parse(JSON.stringify(...))来解决这个问题:

实用Javascript调试技巧分享(小结)

3. 学会使用console.dir

我们有时候想看看一个DOM对象里面到底有什么属性和方法,但是常规的console.log打印出来的只是HTML标签,就像这样:

实用Javascript调试技巧分享(小结)

和直接审查元素没有什么区别。

如果我们想看到DOM对象作为JavaScript对象的结构可以使用console.dir,比如:

实用Javascript调试技巧分享(小结)

事实上,console.dir可以打印出任何JavaScript对象的属性列表,比如打印一个方法:

实用Javascript调试技巧分享(小结)

4. 学会使用console.table

我们经常会遇到这样的场景:获取到一个用户列表,每个用户有很多属性,但是我们只想查看其中的某些属性,在用console.log打印出来的时候需要把每个用户对象展开一个个查看,非常麻烦。而console.table完美的解决这个问题,比如我只想获取到下列用户的id和坐标:

console.log打印结果:

实用Javascript调试技巧分享(小结)

console.table打印结果:

实用Javascript调试技巧分享(小结)

非常的准确和快速!

5. 学会使用console.time

有时候我们想知道一段代码的性能或者一个异步方法需要运行多久,这时候需要用到定时器,JavaScript提供了现成的console.time方法,例如:

实用Javascript调试技巧分享(小结)

6. 使用debugger打断点

有时候我们需要打断点进行单步调试,一般会选择在浏览器控制台直接打断点,但这样还需要先去Sources里面找到源码,然后再找到需要打断点的那行代码,比较费时间。使用debugger关键词,我们可以直接在源码中定义断点,方便很多,比如:

实用Javascript调试技巧分享(小结)

7. 查到源码文件

有时候我们想在控制台的Sources中查找某个js源文件,要把文件夹逐一点开找,非常麻烦。其实Chrome提供了文件的搜索功能,只不过大部分时候我们给忽略了。。

实用Javascript调试技巧分享(小结)

只要按Command + P(windows的快捷键请自行查看)就能弹出搜索框搜索你想要找的文件啦:

实用Javascript调试技巧分享(小结)

8. 压缩JS文件的阅读

有时候我们需要在Sources中阅读一段js代码,但是发现它被压缩了,Chrome也提供了和方便的格式化工具,让代码变得重新可读:

实用Javascript调试技巧分享(小结)

点完之后变成这样:

实用Javascript调试技巧分享(小结)

以上就是我个人在平时比较常用的一些调试小技巧,如果大家有其他好的调试技巧也欢迎分享,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
JavaScript运行原理分析
Feb 09 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
js实现拖拽与碰撞检测
Sep 18 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 #Javascript
小程序click-scroll组件设计
Jun 18 #Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 #Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 #Javascript
JS删除String里某个字符的方法
Jan 06 #Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 #Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 #Javascript
You might like
用Flash图形化数据(一)
2006/10/09 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
Vue3 源码导读(推荐)
2019/10/14 Javascript
python提示No module named images的解决方法
2014/09/29 Python
在Python中进行自动化单元测试的教程
2015/04/15 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
配置管理计划的主要内容有哪些
2014/06/20 面试题
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
动物科学专业毕业生的自我评价
2013/11/29 职场文书
自主招生自荐信范文
2013/12/04 职场文书
应付会计岗位职责
2013/12/12 职场文书
面试必备的求职信
2014/05/25 职场文书
委托书的格式
2014/08/01 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
会议主持人开场白台词
2015/05/28 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS