你可能从未见过如此有用的调试技巧

点击上方蓝字关注前端真好玩，从此前端进阶不再难

前段时间写了篇关于 console 的文章，很多读者想让我再写一篇关于 debugger 的。写的过程中发现内容无非三块：

1. VSCode 调试

2. Chrome 调试

3. 调试技巧

一和二笔者参考了一些文章发现他们内容已经很完善了，我完全没有写的必要了，所以我打算直接跳到第三块，分享一个字虽然不多，但是超级有用的技巧。

技巧其实就一句代码：

setTimeout(() => { debugger; }, 2000);

举个很常见的例子：某块内容是需要我 hover 才会显示的，比如在掘金信息流中，每篇文章当我鼠标移入后都会改变背景色以及新增一个分享 Icon

但是此时我们想调试 hover 态的时候，我只有以下几个选择：

1. 改代码，让它默认 hover 态。这个选择只适应于本地开发环境，而且每次改代码还得等热更新也很麻烦

2. 用 Chrome 开发工具让 DOM 属于 hover 态。这个选择确实可以解决大部分问题，但是首先你得找到会触发 hover 的 DOM，容器很多你得一个个试

遇到这种情况你就可以使用这个小技巧，在 Chrome 控制台中输入 setTimeout(() => { debugger; }, 2000);，然后将鼠标移入你需要触发 hover 的地方，稍等两秒你就可以开始调试了，不需改代码也不需找到触发 hover 的元素，轻松愉快~

最后推荐两个笔者参考过程中觉得内容很完善的文章：

1. VSCode 调试，小胡子哥写的，内容包括了 Node 以及常规的 JS 调试

2. Chrome 调试，笔者朋友龙哥翻译的小册，一分钱你买不了吃亏，主题内容 16 章节，只能说超值

下篇文章预告，应该算是个稍微大点的工程。现在越来越多的公司要求熟悉 TS 了，然后就有读者想让我出一个教程，目前已经在写了，除了文章教大家写 TS 以外，还会配套相应的练习作业帮助大家巩固，应该就是这两周搞定~

- END -

欢迎同仁投稿，扫描下方二维码联系即可

转载同样可以联系下方二维码获取授权