8种实用的JavaScript调试技巧

本文概述

  • 1.不要使用alert
  • 2.学习使用console.log
  • 3.学习使用console.dir
  • 4.学习使用console.table
  • 5.学习使用console.time
  • 6.使用调试器中断点
  • 7.查找源文件
  • 8.阅读压缩的JavaScript代码
我看到太多的人仅使用console.log调试JavaScript代码, 甚至只是简单地发出alert。他们追求优雅, 高效的代码, 但忽略了优雅, 高效的调试代码。今天, 我将分享一些实用的调试技术, 并希望它们可以帮助你更加自信地调试js代码。
1.不要使用alert 首先, alert方法只能打印出字符串。如果打印的对象不是String, 则将调用toString()方法将对象转换为字符串(例如, 将对象转换为[object Object])。因此, 除非你以String类型打印对象, 否则将无法获得其他信息。其次, alert将阻止UI线程, 只有在单击“确定”按钮之后, JavaScript代码才会继续执行。因此它效率很低。因此, 最好改变使用alert的习惯。
2.学习使用console.log 每个人都知道如何使用console.log, 但是许多人只知道最简单的console.log(x)来打印对象。当你的代码中包含更多console.log时, 将很难找到相应的打印结果。因此, 我们可以在打印信息中添加标签以进行区分:
let x = 1; console.log('aaaaaaaa', x);

结果:
8种实用的JavaScript调试技巧

文章图片
标签不需要定义良好, 但是视觉效果必须引人注目。当然, 最好给标签起一个有意义的名字。
实际上, console.log可以接收任意数量的参数, 并最终进行拼接并输出这些对象, 例如:
8种实用的JavaScript调试技巧

文章图片
如果打印的信息太多, 并且很难找到目标信息, 则可以在控制台中对其进行过滤:
8种实用的JavaScript调试技巧

文章图片
注意当你使用console.log打印引用类型的对象(例如数组或自定义对象)时, 输出结果可能不是执行console.log方法时的值。例如:可以发现两个console.log的输出结果均为[1、2、3、4]。由于该数组是引用类型, 因此在调用console.log方法时将获得该数组的最新状态。我们可以使用JSON.parse(JSON.stringify(… ))解决问题:
3.学习使用console.dir 有时, 我们可能想查看DOM对象中存在哪些属性和方法, 但是console.log方法仅打印HTML标记, 如下所示:
8种实用的JavaScript调试技巧

文章图片
如果要获取DOM对象的结构, 可以使用console.dir, 例如:
8种实用的JavaScript调试技巧

文章图片
实际上, console.dir可以打印出任何JavaScript对象的属性列表, 例如打印方法的属性列表:
8种实用的JavaScript调试技巧

文章图片
4.学习使用console.table 当我们获得用户列表时, 通常每个用户都有多个属性。但是, 我们通常只希望查看其中一些属性, 因此在使用console.log打印时, 需要扩展每个用户对象。好了, console.table可以完美地解决问题。例如, 如果我只想获取以下用户的ID和坐标,
用console.log打印的结果是:
8种实用的JavaScript调试技巧

文章图片
使用console.table打印的结果是:
8种实用的JavaScript调试技巧

文章图片
后者是如此精确和快速!
5.学习使用console.time 【8种实用的JavaScript调试技巧】有时我们可能想知道一段代码的性能或异步方法需要运行多长时间, 因此我们需要使用计时器, 而JavaScript为我们提供了console.time方法。例如:
8种实用的JavaScript调试技巧

文章图片
6.使用调试器中断点 有时我们需要断点进行单步调试, 通常我们会选择直接在浏览器控制台中断点。但是, 如果这样做, 则需要先转到“源代码”面板以找到源代码, 然后找到需要断点的代码行。我们可以使用debugger关键字直接在源代码中定义断点。例如:
8种实用的JavaScript调试技巧

文章图片
7.查找源文件 有时我们可能想在控制台的“源代码”中找到一个js源文件, 并且一一打开这些文件夹会很麻烦。实际上, Chrome为我们提供了文件搜索功能, 但是大多数时候我们都忽略它。
8种实用的JavaScript调试技巧

文章图片
只需按Command + P(请自行检查Windows快捷方式)即可弹出搜索框并查找要查找的文件:
8种实用的JavaScript调试技巧

文章图片
8.阅读压缩的JavaScript代码 有时我们需要阅读Sources中的一段js代码, 但发现它已被压缩。 Chrome提供了一种方便的格式化工具, 以使代码可读:
8种实用的JavaScript调试技巧

文章图片
然后, 它变成:
8种实用的JavaScript调试技巧

文章图片
这些是我使用的一些调试技巧。谢谢阅读。

    推荐阅读