实用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 语法集锦 脚本之家基础推荐
Nov 15 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 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版(4)
2006/10/09 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
Three.js快速入门教程
2016/09/09 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
Python爬取京东的商品分类与链接
2016/08/26 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
大学生毕业自我鉴定范文
2014/02/03 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
植树节活动总结
2014/04/30 职场文书
青年标兵事迹材料
2014/08/16 职场文书
班级活动总结格式
2014/08/30 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
DSP接收机前端设想
2022/04/05 无线电