前言

曾经我只会一个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 调试控制台，完成断点数据调试，跟浏览器控制台一致

小结

这边仅仅关于一些调试功用做了阐述，其他的仍是靠各位诸君自己。关于调试技巧任重而道远，需求学习与实践并行，才能更好的灵活运用，在对应的问题运用对应的调试办法，能够进步咱们的开发功率以及处理问题才能，进步自己的竞争力。