前端应该掌握的浏览器调试技巧
作者：清欢bx
https://juejin.cn/post/7145256569041584142
前言
曾经我只会一个console.log，但是我充满了自信，觉得一个打印输出就能解决所有问题。后来，在阅读vue源码的旅途里，我感受到了迷茫，无所适从，觉得每一处都需要打印输出，才能解决我的困惑，所以我觉得我需要新的帮手了，最终我凭借着debugger杀出重围。
再后来，在为公司提供基础框架和组件库的同时，各种类型的问题纷纷而至，页面渲染问题，网络问题，代码编译问题，依赖包问题，脚手架问题，越来越力不从心。有句话说的好，当你觉得力所不逮时，你需要继续学习了。后来我拥有了打印输出、普通断点、条件断点、DOM断点、VS code 断点等调式方式，稍微有些不那么彷徨。
不简单的console
console 是我们开发中经常使用的功能，用来输出打印和调试开发，比较熟悉的有log、error、warn，这几个是常用的，但是如果你仅仅只是了解这几个那就挺可惜了，错过了那些有助于调高开发效率的功能，今天我们列举一些常用又可以提高开发效率的功能。
console.log
这应该是我们最常用的功能，基本上每天都会使用到，作用也很简单，在控制台输出内容，这边有个小技巧。
假设你有多个变量需要输出，如果直接输出，没办法查看对应名称，可以添加一个中括号，同时借助ES6的属性的简洁表示法，可以更直观的查看变量对应。
const name = "小明";
const age = 20;
const sex = "女";
console.warn
在控制台输出警告信息，用于代码存在不合理或不符合规范但不影响系统运行的提示
console.error
在控制台输出错误信息，用于代码错误和异常的提示
console.time和console.timeEnd
这两个方法一般是配合使用，用于计算代码段的执行时间，有助于性能调试和判断。
从图中可以看出javascript的执行效率还是很高的，计算0到10000000数字之和花费的时间大概23.5ms，我们可以根据输出的时间判断是否符合我们的预期，是否需要对其做进一步优化，也可以判断是否是由于某一块代码执行时间太长，占用太长线程时间，导致我们页面卡顿等一系列问题。
console.assert
第一个参数为 false（例如null，undefined，''，0，或者结果为false的逻辑等）的情况下会在控制台输出错误日志，可以减少书写判断逻辑，用于判断空值或者false逻辑还是很有用处的。
console.dir
对于DOM节点的打印输出，如果采用console.log，会以标签的形式输出，和直接查看没有太大的差异，有时我们可能想要查看DOM的相关事件和属性，可以采用console.dir，输出DOM节点对应的js对象映射。
console.table
这个方法可能比较少人知道，可以将数组（或者是 类数组 的对象，或者就是一个 对象 ）打印成一个表格，对于预览还是有挺大帮助的。
console.$i
这个功能还是比较好玩的，了解它的话可能让你大吃一惊，浏览器真的很强。这个功能是让我们可以在 devtool 开发者工具直接使用npm包，当然这个按需功能，需要扩展程序Console Importer作为辅助工具
以时间处理插件dayjs作为示例，在控制台输入congsole.$i('dayjs')即可安装dayjsnpm包，可以使用其相应功能。
breakpoint
console虽然简单，但是对于bug调试，源码查看，或者大家都不想遇到的历史老项目排错，同事项目排错等较为复杂的场景，起到的作用就没那么大了，还是需要断点调试更为直观高效。打断点的方式有两种：
直接断点
打开 Chrome 开发者工具，在Sources源代码面板，找到需要断点的文件，点击对应的行数，就能实现断点。
代码断点
在需要断点的地方，书写debugger就能实现断点，对于直接断点对比的缺点是不需要断点的时候，需要删除掉对应的断点代码。
断点知识点
断点调试操作
这么笼统的去说可能不大好理解，但确实挺简单的，需要自己去尝试，在实践中学习，熟练使用，才有更深的理解和收获。
查找对应文件
快捷键ctrl+p弹出文件搜索弹窗，直接输入文件名称就能实现查询。
跳转到对应行
快捷键ctrl+p弹出文件搜索弹窗，输入英文冒号:，继续输入想要跳转的行数，就是实现快速跳转到对应行。
条件断点
条件断点，相对于普通断点多了条件逻辑判断，只有符合条件逻辑的才会进入断点，这能解决有些断点会进入多次，但我们只需要符合特定逻辑的断点，这能提高效率。
怎么实现条件断点呢？跟普通断点类似，但是这回不是直接选中，而是对于行数右键点击，选择Add conditional breakpoint...，输入对应的逻辑判断，注意书写的逻辑使用的变量是当前行可以拿到的变量。
DOM断点
当你想对DOM节点发生变化时进行断点，请使用 DOM 更改断点，最终还是会断点到触发dom操作的相应js上，但是更加高效。设置 DOM 断点：
单击Elements选项卡 找到要设置断点的元素 右键单击该元素 将鼠标悬停在Break on，然后选择Subtree modifications、Attributes modifications或Node removal
Subtree modifications（子树修改）：当当前选择的节点的子节点被移除或添加，或者子节点的内容被改变时触发。不会在子节点属性更改或对当前选定节点的任何更改时触发。 Attributes modifications（属性修改）：在当前选定的节点上添加或删除属性或属性值更改时触发。 Node Removal（节点移除） : 当当前选中的节点被移除时触发。
VS code 断点
有些人喜欢在浏览器打断点，有些人喜欢在IDE断点，这个看个人喜好。但是Vs Code断点还是需要学会的，对于编译问题、脚本或者脚手架工具这些Node运行环境，就需要借助于IDE的调试环境了，当然Vs Code断点的很简单，跟浏览器类似，都是主流操作。
在终端面板选择调试终端 Javascript Debug Terminal
在需要断点的位置点击所在行号的小红点，出现高亮小红点，实现断点。
运行代码，进入调试状态
Vs code 调试控制台，实现断点数据调试，跟浏览器控制台一致
小结
这边只是对于一些调试功能做了阐述，其他的还是靠各位诸君自己。对于调试技巧任重而道远，需要学习与实践并行，才能更好的灵活使用，在对应的问题使用对应的调试方式，可以提高我们的开发效率以及解决问题能力，提高自己的竞争力。
- EOF -
觉得本文对你有帮助？请分享给更多人
点赞和在看就是最大的支持❤️