前端应该掌握的浏览器调试技巧

20,073 阅读6分钟

前言

曾经我只会一个console.log,但是我充满了自信,觉得一个打印输出就能解决所有问题。后来,在阅读vue源码的旅途里,我感受到了迷茫,无所适从,觉得每一处都需要打印输出,才能解决我的困惑,所以我觉得我需要新的帮手了,最终我凭借着debugger杀出重围。再后来,在为公司提供基础框架和组件库的同时,各种类型的问题纷纷而至,页面渲染问题,网络问题,代码编译问题,依赖包问题,脚手架问题,越来越力不从心。有句话说的好,当你觉得力所不逮时,你需要继续学习了。后来我拥有了打印输出普通断点条件断点DOM断点VS code 断点等调式方式,稍微有些不那么彷徨。

不简单的console

console 是我们开发中经常使用的功能,用来输出打印和调试开发,比较熟悉的有logerrorwarn,这几个是常用的,但是如果你仅仅只是了解这几个那就挺可惜了,错过了那些有助于调高开发效率的功能,今天我们列举一些常用又可以提高开发效率的功能。

console.log

这应该是我们最常用的功能,基本上每天都会使用到,作用也很简单,在控制台输出内容,这边有个小技巧。

假设你有多个变量需要输出,如果直接输出,没办法查看对应名称,可以添加一个中括号,同时借助ES6的属性的简洁表示法,可以更直观的查看变量对应。

const name = "小明";
const age = 20;
const sex = "女";

image.png

console.warn

在控制台输出警告信息,用于代码存在不合理或不符合规范但不影响系统运行的提示

console.error

在控制台输出错误信息,用于代码错误和异常的提示

console.time和console.timeEnd

这两个方法一般是配合使用,用于计算代码段的执行时间,有助于性能调试和判断。

从图中可以看出javascript的执行效率还是很高的,计算0到10000000数字之和花费的时间大概23.5ms,我们可以根据输出的时间判断是否符合我们的预期,是否需要对其做进一步优化,也可以判断是否是由于某一块代码执行时间太长,占用太长线程时间,导致我们页面卡顿等一系列问题。

image.png

console.assert

第一个参数为 false(例如null,undefined,'',0,或者结果为false的逻辑等)的情况下会在控制台输出错误日志,可以减少书写判断逻辑,用于判断空值或者false逻辑还是很有用处的。

image.png

console.dir

对于DOM节点的打印输出,如果采用console.log,会以标签的形式输出,和直接查看没有太大的差异,有时我们可能想要查看DOM的相关事件和属性,可以采用console.dir,输出DOM节点对应的js对象映射。

image.png

console.table

这个方法可能比较少人知道,可以将数组(或者是 类数组 的对象,或者就是一个 对象 )打印成一个表格,对于预览还是有挺大帮助的。

image.png

console.$i

这个功能还是比较好玩的,了解它的话可能让你大吃一惊,浏览器真的很强。这个功能是让我们可以在 devtool 开发者工具直接使用npm包,当然这个按需功能,需要扩展程序Console Importer作为辅助工具

以时间处理插件dayjs作为示例,在控制台输入congsole.$i('dayjs')即可安装dayjsnpm包,可以使用其相应功能。

breakpoint

console虽然简单,但是对于bug调试,源码查看,或者大家都不想遇到的历史老项目排错,同事项目排错等较为复杂的场景,起到的作用就没那么大了,还是需要断点调试更为直观高效。打断点的方式有两种:

直接断点

打开 Chrome 开发者工具,在Sources源代码面板,找到需要断点的文件,点击对应的行数,就能实现断点。

image.png

代码断点

在需要断点的地方,书写debugger就能实现断点,对于直接断点对比的缺点是不需要断点的时候,需要删除掉对应的断点代码。

image.png

断点知识点

断点调试操作

这么笼统的去说可能不大好理解,但确实挺简单的,需要自己去尝试,在实践中学习,熟练使用,才有更深的理解和收获。

image.png

查找对应文件

快捷键ctrl+p弹出文件搜索弹窗,直接输入文件名称就能实现查询。

image.png

跳转到对应行

快捷键ctrl+p弹出文件搜索弹窗,输入英文冒号:,继续输入想要跳转的行数,就是实现快速跳转到对应行。

image.png

条件断点

条件断点,相对于普通断点多了条件逻辑判断,只有符合条件逻辑的才会进入断点,这能解决有些断点会进入多次,但我们只需要符合特定逻辑的断点,这能提高效率。

怎么实现条件断点呢?跟普通断点类似,但是这回不是直接选中,而是对于行数右键点击,选择Add conditional breakpoint...,输入对应的逻辑判断,注意书写的逻辑使用的变量是当前行可以拿到的变量。

image.png

DOM断点

当你想对DOM节点发生变化时进行断点,请使用 DOM 更改断点,最终还是会断点到触发dom操作的相应js上,但是更加高效。设置 DOM 断点:

  • 单击Elements选项卡
  • 找到要设置断点的元素
  • 右键单击该元素
  • 将鼠标悬停在Break on,然后选择Subtree modificationsAttributes modificationsNode removal

image.png

  • Subtree modifications(子树修改):当当前选择的节点的子节点被移除或添加,或者子节点的内容被改变时触发。不会在子节点属性更改或对当前选定节点的任何更改时触发。
  • Attributes modifications(属性修改):在当前选定的节点上添加或删除属性或属性值更改时触发。
  • Node Removal(节点移除) : 当当前选中的节点被移除时触发。

VS code 断点

有些人喜欢在浏览器打断点,有些人喜欢在IDE断点,这个看个人喜好。但是Vs Code断点还是需要学会的,对于编译问题脚本或者脚手架工具这些Node运行环境,就需要借助于IDE的调试环境了,当然Vs Code断点的很简单,跟浏览器类似,都是主流操作。

  • 在终端面板选择调试终端Javascript Debug Terminal

image.png

  • 在需要断点的位置点击所在行号的小红点,出现高亮小红点,实现断点。

image.png

  • 运行代码,进入调试状态

image.png

  • Vs code 调试控制台,实现断点数据调试,跟浏览器控制台一致

image.png

小结

这边只是对于一些调试功能做了阐述,其他的还是靠各位诸君自己。对于调试技巧任重而道远,需要学习与实践并行,才能更好的灵活使用,在对应的问题使用对应的调试方式,可以提高我们的开发效率以及解决问题能力,提高自己的竞争力。