本文概述
- 1.不要使用alert
- 2.学习使用console.log
- 3.学习使用console.dir
- 4.学习使用console.table
- 5.学习使用console.time
- 6.使用调试器中断点
- 7.查找源文件
- 8.阅读压缩的JavaScript代码
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);
结果:
文章图片
标签不需要定义良好, 但是视觉效果必须引人注目。当然, 最好给标签起一个有意义的名字。
实际上, console.log可以接收任意数量的参数, 并最终进行拼接并输出这些对象, 例如:
文章图片
如果打印的信息太多, 并且很难找到目标信息, 则可以在控制台中对其进行过滤:
文章图片
注意当你使用console.log打印引用类型的对象(例如数组或自定义对象)时, 输出结果可能不是执行console.log方法时的值。例如:可以发现两个console.log的输出结果均为[1、2、3、4]。由于该数组是引用类型, 因此在调用console.log方法时将获得该数组的最新状态。我们可以使用JSON.parse(JSON.stringify(… ))解决问题:3.学习使用console.dir 有时, 我们可能想查看DOM对象中存在哪些属性和方法, 但是console.log方法仅打印HTML标记, 如下所示:
文章图片
如果要获取DOM对象的结构, 可以使用console.dir, 例如:
文章图片
实际上, console.dir可以打印出任何JavaScript对象的属性列表, 例如打印方法的属性列表:
文章图片
4.学习使用console.table 当我们获得用户列表时, 通常每个用户都有多个属性。但是, 我们通常只希望查看其中一些属性, 因此在使用console.log打印时, 需要扩展每个用户对象。好了, console.table可以完美地解决问题。例如, 如果我只想获取以下用户的ID和坐标,
用console.log打印的结果是:
文章图片
使用console.table打印的结果是:
文章图片
后者是如此精确和快速!
5.学习使用console.time 【8种实用的JavaScript调试技巧】有时我们可能想知道一段代码的性能或异步方法需要运行多长时间, 因此我们需要使用计时器, 而JavaScript为我们提供了console.time方法。例如:
文章图片
6.使用调试器中断点 有时我们需要断点进行单步调试, 通常我们会选择直接在浏览器控制台中断点。但是, 如果这样做, 则需要先转到“源代码”面板以找到源代码, 然后找到需要断点的代码行。我们可以使用debugger关键字直接在源代码中定义断点。例如:
文章图片
7.查找源文件 有时我们可能想在控制台的“源代码”中找到一个js源文件, 并且一一打开这些文件夹会很麻烦。实际上, Chrome为我们提供了文件搜索功能, 但是大多数时候我们都忽略它。
文章图片
只需按Command + P(请自行检查Windows快捷方式)即可弹出搜索框并查找要查找的文件:
文章图片
8.阅读压缩的JavaScript代码 有时我们需要阅读Sources中的一段js代码, 但发现它已被压缩。 Chrome提供了一种方便的格式化工具, 以使代码可读:
文章图片
然后, 它变成:
文章图片
这些是我使用的一些调试技巧。谢谢阅读。
推荐阅读
- 如何解决Spring Boot内存泄漏问题
- 是什么使Java应用程序的CPU使用率飙升()
- 你真的知道Java中的4种引用类型吗()
- Node.js性能优化的8个技巧
- Flexbox – 终极的CSS Flex Cheatsheet(带有动画图表!)
- 适用于Python程序员的有趣的Python图形库
- 深入了解Spark内存管理模型
- Redis流教程(20分钟)
- Android手动回收bitmap,引发Canvas: trying to use a recycled bitmap处理