实用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 相关文章推荐
js 学习笔记(三)
Dec 29 Javascript
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
javascript加号"+"的二义性说明
Mar 04 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
浅谈vue中组件绑定事件时是否加.native
Nov 09 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
php 日期时间处理函数小结
2009/12/18 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
jquery JSON的解析方式
2009/07/25 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
Python贪心算法实例小结
2018/04/22 Python
python实现多层感知器
2019/01/18 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
python压包的概念及实例详解
2021/02/17 Python
法国家具及室内配件店:home24
2017/01/21 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
公务员保密承诺书
2014/03/27 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
个人查摆剖析材料
2014/10/16 职场文书
劳资员岗位职责
2015/02/13 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
网吧管理制度范本
2015/08/05 职场文书
如何利用python实现列表嵌套字典取值
2022/06/10 Python