序

调试技能是任何技术研发中不可或缺的技能。掌握各种调试技巧，一定会事半功倍。比如快速定位问题，降低故障概率，帮助分析逻辑错误等等。在互联网前端开发日益重要的今天，降低开发成本、提高工作效率、掌握前端开发中的调试技巧显得尤为重要。

本文将逐一讲解各种前端JS调试技巧。也许你已经掌握了，让我们一起来复习一下。也许有你没见过的方法。可能你还不知道怎么调试它们，借此机会填空。

首先，' '调试器；'

除了console.log，调试器是另一个我非常喜欢的快速调试工具。在代码中添加调试器后，Chrome会自动停在插入的地方，很像C或Java中的断点。您也可以在某些条件控件中插入调试语句，例如：

if(this hing){调试器；} 2.以表格形式显示对象

有时候我们需要看一些复杂物体的详细信息。最简单的方法是使用console.log并将其显示为列表，然后上下滚动浏览。但是，似乎最好用console.table将其显示为列表，大概是这样的：

var animals=[ { animal: 'Horse '，name: 'Henry '，age: 43 }，{ animal: 'Dog '，name: 'Fred '，age: 13 }，{ animal: 'Cat '，name: 'Frodo '，age : 18 }]；控制台.桌子(动物)；

三、多屏尺寸测试

Chrome有一个非常吸引人的功能，可以模拟不同设备的大小。点按Chrome的检查器中的切换设备模式按钮，然后您可以在不同的设备屏幕大小下进行调试：

4.在控制台中快速选择DOM元素

在元素选择面板中选择一个DOM元素，然后在控制台中使用它，这也是一个非常常见的操作。Chrome Inspector会缓存其历史记录中的最后五个DOM元素，您可以用类似于Shell中$0的方式快速将它们与元素相关联。例如，下面的列表中有“项目-4”、“项目-3”、“项目-2”、“项目-1”和“项目-0”。你可以这样使用它们：

5.获取某个功能的呼叫跟踪记录

JavaScript框架极大地方便了我们的开发，但也带来了很多预定义的功能，比如创建View、绑定事件等。因此我们很难跟踪自定义函数的调用过程。尽管JavaScript不是一种非常严格的语言，但有时很难弄清楚发生了什么，尤其是当您需要查看其他人的代码时。此时，console.trace将发挥作用，可以帮助您跟踪函数调用。例如，在下面的代码中，我们需要在car对象中跟踪funcZ的调用过程：

var汽车；var func 1=func(){ func 2()；} var func 2=func(){ func 4()；} var func 3=func(){ } var func 4=func(){ Car=new Car()；car . FuncX()；} var Car=function(){ this . brand=' Volvo '；this.color=' redthis . FuncX=function(){ this . FuncY()；} this . FuncY=function(){ this . FuncZ()；} this . FuncZ=function(){ console . trace(' trace car ')} } func 1()；这里可以清楚地看到，func1调用func2，然后是func4，它创建了一个Car的实例，然后调用car.funcX

6.格式化压缩代码

有时候，在生产环境中，我们发现一些莫名其妙的问题，然后忘记把sourcemaps放在这个服务器上，或者当我们查看别人网站的源代码时，看到一堆不知道说什么的代码，就像下图一样。Chrome为我们提供了一个非常人性化的反压缩工具来增强代码的可读性，大致使用如下：

七、快速定位调试功能

当我们想给函数添加断点时，我们通常会选择这样做：

1.在检查器中找到指定的行，然后添加断点

2.向脚本添加调试器调用

但是这两种方法有一个小问题，就是都需要在对应的脚本文件中找到对应的行，会比较麻烦。本文介绍了一种相对快捷的方法，即在控制台中使用debug(funcName)，然后脚本会自动停止在分配给相应函数的地方。这种方法有一个缺陷就是不能止于私有函数或者匿名函数，所以还是需要时不时的改变：

var func 1=func(){ func 2()；};var Car=function(){ this . FuncX=function(){ this . FuncY()；} this . FuncY=function(){ this . FuncZ()；} } var Car=new Car()；

八、禁止无关脚本运行

我们在开发现代网页的时候，总是会用到一些第三方的框架或者库，几乎都是经过测试的，bug相对较少。然而，当我们调试自己的脚本时，我们会不小心跳到这些文件中，导致额外的调试任务。解决办法是禁止这部分不需要调试的脚本。有关详细信息，请参见本文： JavaScript-黑盒调试。

在复杂的调试情况下，我们找到了关键元素。在一些复杂的调试环境中，我们可能需要输出多行内容。这时候我们习惯用console.log、console.debug、console.warn、console.info、console.error来区分，然后我们可以在Inspector中进行过滤。但是有时候我们还是希望能够自定义显示样式，可以用CSS定义个性化的信息样式：

console . todo=function(msg){ console . log(' % c % s % s % s '，' color:黄色；背景-颜色：黑色，''，msg，'')；} console .重要=函数(msg) {console.log(' % c % s % s % s '，' color: brownfont - weight:粗体；文本修饰：下划线；'，''，msg，'')；} console.todo(“这是需要解决的问题”)；console.important('这是一条重要消息')；

在console.log()中，可以使用%s作为字符串，%i作为数字，%c作为自定义样式。

九、监控指定函数的调用和参数

在Chrome中，您可以监控指定函数的调用状态和参数：

var func1=函数(x，y，z){ }；

此方法允许您实时监控哪些参数被传递到指定的函数中。

X.在控制台中使用$查询元素

它也可以在控制台中使用，基于像querySelector这样的CSS选择器进行查询。(“CSS-Selector”)将返回满足匹配的第一个元素，而$ $(“CSS-Selector”)将返回所有匹配的元素。请注意，如果您多次使用元素，不要忘记将它们存储在变量中。

XI。邮递员

很多人习惯使用Postman调试API或者发起Ajax请求，但是不要忘记你的浏览器也可以做到这一点，你也不需要担心身份验证，因为Cookie都是为你交付的，只要能在network的选项卡中进行就可以了，大概是这样的：

十二、DOM变化检测

DOM有时候很操蛋，有时候不知道什么时候会发生变化，但是Chrome提供了一个小功能，当DOM发生变化的时候，会提醒你可以监控属性变化等等：

摘要

以上就是本文的全部内容。希望这篇文章的内容能对你学习或使用Javascript有所帮助。有问题可以留言交流。