实用Javascript调试技巧

红太狼 2021-12-04 00:13 427阅读 0赞

**摘要：** 高效调试JS代码。

*  原文：[实用Javascript调试技巧分享][Javascript]
 *  作者：MudOnTire

**[Fundebug][]经授权转载，版权归原作者所有。**

见过太多同学调试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);

得到：

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wMS5qcGc][]

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

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

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wMi5wbmc][]

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

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wMy5naWY][]

**注意点**

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

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wNC5wbmc][]

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

\[外链图片转存失败(img-MPA6C1cb-1563503928162)([https://image.fundebug.com/2019-07-19-05.png][https_image.fundebug.com_2019-07-19-05.png])\]

### 3. 学会使用console.dir ###

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

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wNi5wbmc][]

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

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

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wNy5wbmc][]

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

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wOC5wbmc][]

推荐大家使用[Fundebug][Fundebug 1]，一款很好用的BUG监控工具~

### 4. 学会使用console.table ###

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

**console.log打印结果：**

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wOS5wbmc][]

**console.table打印结果：**

\[外链图片转存失败(img-cLcDd201-1563503928191)([https://image.fundebug.com/2019-07-19-10.png][https_image.fundebug.com_2019-07-19-10.png])\]

非常的准确和快速！

### 5. 学会使用console.time ###

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

\[外链图片转存失败(img-DhmnQJHg-1563503928192)([https://image.fundebug.com/2019-07-19-11.png][https_image.fundebug.com_2019-07-19-11.png])\]

### 6. 使用debugger打断点 ###

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

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0xMi5wbmc][]

### 7. 查到源码文件 ###

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

\[外链图片转存失败(img-hWoZNjW9-1563503928196)([https://image.fundebug.com/2019-07-19-13.png][https_image.fundebug.com_2019-07-19-13.png])\]

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

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0xNC5wbmc][]

### 8. 压缩JS文件的阅读 ###

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

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0xNS5wbmc][]

**点完之后变成这样：**

![aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0xNi5wbmc][]

以上就是我个人在平时比较常用的一些调试小技巧，如果大家有其他好的调试技巧也欢迎分享，谢谢！

最后，推荐大家使用[Fundebug][Fundebug 1]，一款很好用的BUG监控工具~

### 关于Fundebug ###

[Fundebug][]专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多知名企业。欢迎大家[免费试用][Link 1]！

![aHR0cHM6Ly9zdGF0aWMuZnVuZGVidWcuY24vd2VjaGF0X3Nsb2dhbi5wbmc][]

[Javascript]: https://segmentfault.com/a/1190000019474390
[Fundebug]: https://www.fundebug.com/
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wMS5qcGc]: /images/20211203/96c044d221fc467d98f9a290a4df8d99.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wMi5wbmc]: /images/20211203/fa9f8861bd9140fea977bd41a9f7cb1f.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wMy5naWY]: /images/20211203/17de4e07cfec4fd1a7d35331b28a73d8.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wNC5wbmc]: /images/20211203/8d9820eb23364ad4981fb6a1282d6e50.png
[https_image.fundebug.com_2019-07-19-05.png]: https://image.fundebug.com/2019-07-19-05.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wNi5wbmc]: /images/20211203/1ac28236a546488e9aa14e6f63fd095a.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wNy5wbmc]: /images/20211203/91a42f373b1c45d68d356dd6c7989cf2.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wOC5wbmc]: /images/20211203/fc641bf419904307aa08a941b3b34599.png
[Fundebug 1]: https://www.fundebug.com/?utm_source=MudOnTire
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0wOS5wbmc]: /images/20211203/483b22c5ba9d40fb9c121b2a5c57a07e.png
[https_image.fundebug.com_2019-07-19-10.png]: https://image.fundebug.com/2019-07-19-10.png
[https_image.fundebug.com_2019-07-19-11.png]: https://image.fundebug.com/2019-07-19-11.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0xMi5wbmc]: /images/20211203/bd2e61e99f884d6d8f297abdd6577160.png
[https_image.fundebug.com_2019-07-19-13.png]: https://image.fundebug.com/2019-07-19-13.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0xNC5wbmc]: /images/20211203/e81bbf96a1f242beb67a64249dd49a1f.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0xNS5wbmc]: /images/20211203/67418a08e73641279714b271fb1d184e.png
[aHR0cHM6Ly9pbWFnZS5mdW5kZWJ1Zy5jb20vMjAxOS0wNy0xOS0xNi5wbmc]: /images/20211203/02e96f9663a043adb39ad05f4a5effd7.png
[Link 1]: https://www.fundebug.com/team/create
[aHR0cHM6Ly9zdGF0aWMuZnVuZGVidWcuY24vd2VjaGF0X3Nsb2dhbi5wbmc]: /images/20211203/af63f8e377a447729b6537ebc427e434.png