实用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 相关文章推荐
javascript for循环设法提高性能
Feb 24 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
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
php链表用法实例分析
2015/07/09 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
vue组件与复用详解
2018/04/08 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
优秀毕业生自我鉴定
2014/01/19 职场文书
测试工程师职业规划书
2014/02/06 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL