大家好，我是路飞写代码，前端工程师，一起分享知识，拥抱未来。

我从事前端开发工作已经五六年了，目前来说自己碰到的任何的前端问题，都能够轻松的解决掉，个人认为最主要的是自己掌握了各种debug技巧，能够快速定位，单步调试任何前端Javascript代码，压缩过的，未压缩过的代码其实都可以调试，这也是为什么前端做权限管理这块不安全的原因。今天的分享肯定也会让您眼前一亮，原来前端还可以这么玩。

debug技巧

刀耕火种的原始调试方式console

首先作为我们前端来说，接触到的第一种最原始的调试方式就是console这个工具了。相信每一个前端都会经常使用，那么我们首先来说一下这个基础的工具。

我估计目前大多数前端仍然还是只会用console.log进行调试，也仅仅是用console.log来进行输出一些变量的值，输出一段标记性提示。但是console并不仅仅只有这个用处，下面我分享几个有用的调试console技巧。

console分类输出console.log('文字信息');console.info('提示信息');console.warn('警告信息');console.error('错误信息');

这个比较简单，log、info、warn、error都有相应的提示图标展示效果，比如warn前面是一个黄色的三角叹号等。我们可以看一下效果：

分类输出效果

为什么要分类输出呢，这样我们其实是可以通过chrome这个调试工具进行过滤等级，比如我们只想显示错误的输出信息，屏蔽掉其他的输出，我们可以选择Filter旁边的下拉框，来进行显示哪些调试级别的信息。

过滤输出

console计时功能假如我们要测试一段前端代码耗时多长时间，这是一个很有用的工具，我们可以通过在计时代码开始前加入console.time('flag')，然后在要计时的代码结束后加入console.timeEnd('flag')。我们就可以知道这段代码耗时多长时间，进而我们找出可以优化的地方。

console.time("Chrome中循环10000次的时间");for(var i = 0; i < 10000; i++){}console.timeEnd("Chrome中循环10000次的时间");

我们来看一下chrome效果

console计时功能展示

console计次输出还是我们上面的例子，假如我们想得到循环次数，如何使用呢，当然用在这个场景可能不太合适，因为是已知循环多少次了，最合适的应用场景应该是当我们在按照某种条件进行筛选时，我们不知道有多少符合条件的，这时候用在这个地方最为合适。我们可以通过这种方式调试输出符合条件的有多少，不过我们还是打算用上面的示例做一个演示(循环次数缩减到5为了演示)

(function () { for(var i = 0; i < 5; i++){ console.count("运行次数："); }})() //用到了匿名函数自运行知识点

我们再次看一下运行结果图：

console计数功能演示

console查看DOM节点我们可以在调试控制台输出我们的Dom文档树，通过console.dirxml(node)，在终端我们就可以进行查看dom的结构构成，但是我并不推荐使用这个，因为个人感觉用处不大，有更好的工具可以替代，那就是Chrome自带的文档选择工具，这个更方便，也更加的直接清晰。

console.dirxml(document);

我们看一下效果如下：

查看节点功能演示

我们在看一下通过chrome自带的元素选择工具的动图，我们很容易发现这个工具更加的高效精准。

元素选择器的使用

我们看到可以很方便的选取自己想要查看的元素节点。我个人也推荐大家使用这种方式来查看元素dom结构。

console自定义输出样式虽然你读到这儿可能觉得这是一个鸡肋的功能，但是我还是要说一下这个自定义输出样式，其实作为一个码农，总要有一些追求，看到各种大神用的编辑器五颜六色，而自己的编辑器甚至输出全是清一色的黑白色，未免感觉不到成为一个大神需要怎样的境界。

编程大神

大神其实就是一些极致追求者，喜欢专研的比普通人更深入一层，喜欢所有东西做到极致。那么如果你能做到这些，你也可以成为大神。而这个就让他成为你变成大神的第一步吧，定制输出你的调试样式。

使用%c为打印内容定义样式,再输出信息前加上%c，后面写上标准的css样式，就可以为输出的信息添加样式了

console.log("%c自定义样式", "color: red; font-style: italic");console.log("%c自定义3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");console.log('%c自定义彩虹文本', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');console.log('%c自定义背景颜色字号', 'color: #fff; background: #f40; font-size: 24px;');

我们来看一下效果炫酷不炫酷：

自定义输出样式

以上就是我们讲的console的妙用，没想到吧，console竟然还有这么多技巧，当然我们只是分享了一部分，还有很多其他有用的功能，等待你成为大神的那一天去发掘探索。

超级赛亚人进化之debugger利器

做前端如果说你目前还不知道有debugger这个技巧，那么可以说你根本没有真正的入门，也并没有静下心来去学习前端，这是成为一个大神必备的技巧，有了这个技巧，你调试起来会得心应手，在该断点时断点，不用费劲去单步调试到你想调试的那个代码，直接在那个调试代码的前一行，加上一句debugger；语句，然后运行程序，程序就会自动断点到你书写debugger;语句的地方。

(function (){ for(var i=0; i<5; i++){ if(i===3){ debugger; } }})() // 匿名函数自运行函数

下面我们看一下效果图，简直是一个神器存在，让我们的调试感到无比的快感。

debugger神器

这个debugger才是我们前端应该经常用到的调试技巧，它会让你的前端水平极大的提升，你可以直接调试一些框架代码。这样就能够研究透一些自己不理解的痛点，通过这种方式我们就能庖丁解牛般的将框架核心全掌握到，当然这个需要耐心和毅力。

如何去调试一些在线网站的压缩代码呢？

前面我们提到了压缩、未压缩的代码我们都可以进行调试，当然不是说大话，忽悠人，真的可以调试压缩代码，下面我就来将我的经验分享给大家。

这其间我曾经面试过一家公司，我向面试官说过我可以调试压缩过的在线网站的代码，面试官竟然蔑视的对我笑了，好像我在吹嘘自己，而且觉得我说的不真实。我能感觉到面试官那种极不相信的面容，最后我也没有进入那家公司，感觉面试官技术比我差了不少。

我们用一个普通的在线网页来进行说明，我们任意找一个普通网站，然后F12打开调试工具，我们切换到source面板，然后找到一个压缩代码，选中打开：

压缩代码

假如我们直接断点到这儿，在进行单步是不行的，因为所有的代码都在一行，如果单步整个都会断掉。这时候我们就需要对这个压缩后的代码进行格式化，而Chrome其实为我们提供了这个格式化工具，我们看到在打开的js文件面板下面有个大括号图标，这个就是格式化按钮，我们单击对压缩代码进行格式化。

对压缩代码的格式化

我们看到此时代码已经完全被格式化，这个时候我们就可以进行代码的调试了。就可以对这个压缩的代码进行断点调试。当然这个调试就比较难受，因为这是压缩过的，所有的名字已经不是一些见名知意的变量了，而是一些简单字母。所以调试起来比较麻烦，但是我们却可以调试它执行过程中的输出了什么，到某个阶段，每个变量的值是什么。进而我们可以找到我们想要的那个语句。

小结

至此我们的分享就到这儿了，前端调试技巧，只要你掌握了这些，你就可以无惧调试任何前端代码。当然这个也会成为你日后前端开发工作中的利器，帮助你胜任你的前端开发，也能助力你成为一个优秀的前端开发者。

我是路飞写代码，前端工程师，一起分享知识，拥抱未来。