看到太多同学调试Javascript只是简单的console.log甚至alert，看着他们真的给自己抓鸡。.因为大部分同学都追求优雅高效的代码编写，而忽略了如何优雅高效的调试代码，不得不说有点“偏科”。下面我将分享一些实用又灵巧的调试技巧，希望能让大家在调试自己的代码时更加从容自信。1.不要使用alert首先，alert只能打印出字符串。如果打印出来的对象不是String，会调用toString()方法将对象转成字符串（比如[objectObject]），所以除非打印String类型的对象，否则无法得到任何其他信息.其次，alert会阻塞UI和javascript的执行，必须点击'OK'按钮才能继续，效率很低。所以喜欢用alert的同学可以改掉这个习惯。2.学会使用console.logconsole.log谁都会，但是很多同学只知道最简单的console.log(x)打印一个对象。当你的代码中console.log过多时，打印某一项会比较困难打印的结果与代码相对应，所以我们可以在打印的信息上加一个标签，方便区分：letx=1;console.log('aaaaaaa',x);get:标签不一定要有明确的意思，视觉效果显着当然最好有明确的意思。其实console.log可以接收任意数量的参数，最好将这些对象拼接输出。比如打印的信息太多，不容易找到目标信息，可以在console中过滤：注意console的使用。当日志打印引用类型的对象（如数组、自定义对象）时，输出的结果可能不是console.log方法执行时的值。例如：可以发现两个console.log输出的结果展开后都是[1,2,3,4]，因为数组是引用类型，所以展开后数组的所有状态***获得。我们可以使用JSON.parse(JSON.stringify(...))来解决这个问题：3.学会使用console.dir有时候我们想看看一个DOM对象中有哪些属性和方法，但是常规的控制台。日志打印的只是HTML标签，像这样：与直接检查元素没有区别。如果我们想把DOM对象的结构看成是JavaScript对象，我们可以使用console.dir，例如：其实console.dir可以打印出任何JavaScript对象的属性列表，比如打印一个方法：4.学习使用console.table我们经常会遇到这样的场景：获取一个用户列表，每个用户有很多属性，而我们只想查看其中的一部分。在用console.log打印出来的时候，我们需要把每个用户对象展开来一一查看，很麻烦。而console.table完美的解决了这个问题。比如我只想获取以下用户的id和坐标：console.logprintresult:console.tableprintresult:非常准确快速！5、学会使用console.time有时候我们想知道一段代码的性能或者一个异步方法需要运行多长时间。这时候，我们就需要用到定时器了。JavaScript提供了现成的console.time方法，例如：6.使用调试器打断有时我们需要打断点进行单步调试。一般我们会选择直接在浏览器控制台打断点，但是这种方式需要先在Sources中找到源码，然后再找到需要打断点的代码行。浪费时间。使用debugger关键字，我们可以直接在源码中定义断点，这样就方便多了，例如：7.查找源码文件有时候我们想在控制台的Sources中查找某个js源文件，需要要一个一个打开文件夹，找起来很麻烦。其实Chrome提供了文件搜索功能，只是很多时候我们忽略了它。.按Command+P（windows快捷键，请自行查看）会弹出搜索框搜索你要的文件：8.读取压缩的JS文件有时候我们需要在Sources中读取一段js代码，但是我们发现它是压缩过的，而且Chrome还提供了一个方便的格式化工具，让代码重新变得可读：点击之后，就变成了这样：以上是我在日常生活中常用的一些调试技巧。如果你有其他好的调试技巧也欢迎分享，谢谢🙏！
