我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

1 前言

感谢幽默的老师秃头披风侠带我们一起完成了堂生动有趣的前端调试课程

对于笔者来说, 收获颇丰

至少提高BUG搬运效率50%

废话不多说, 直接开始干货

2 活用console

console.log(xxx)是我这种菜鸟最常用的前端代码方法

遇事不决先打印, 打印不行多打印

这种方法确实非常直观, 但也是效率最低的

2.1 多种console方式

console其实有很多中打印方式:

• log
• warn
• error
• debug
• info

全部的方法可以参考MDN文档

不同的方法在控制台展现的形式也不一样:

希望使用的小伙伴注意以下几点:

• log与info无太大区别
• debug在chrome内核浏览器中不支持
• 根据实际情况判断该使用什么方法: 例如正常日志使用log, 错误信息使用error

让控制台也多姿多彩起来嘛

2.2 table方法

console.table(xxx)在我眼中是值得单独拿出来说的, 先贴上它的使用方式:

table可以将一维数组或一层对象作为表格的形式进行输出, 第一列是索引, 第二列是值

相比先log再点击展开, 这种方式要直观且效率的多

需要注意的是, table不会递归显示, 嵌套的情况并不适用

3 性能分析

按F12调出控制台, 进入性能页面, 在这里我们可以分析整个页面的加载过程

性能分析不是调试的重点, 但在后期项目的优化上可能会用到, 例如数据量巨大的树形结构

简单贴图并说明下使用方式:

4 线上调试

面对线上项目BUG时, 很多兄弟们都会头疼该如何确认发生问题的代码位置

笔者在这里想强调一点:

调试的目的是为了找到BUG而不是解决BUG, 切勿在调试过程中出现”我觉得/我猜/会不会是/有可能是“这样的逻辑

程序不会欺骗你, 先明确调试方案, 再一步步寻找BUG点, 之后再用你丰富的经验战胜它

老师在mac上为我们详细展示了如何利用工具完成本地代理, 实现远程对线上项目的调试

4.1 Source Map

在mac环境下有非常优秀的工具, 对于笔者这种近几年发展出来的微软吹, 自然要在win10下尝试尝试了

如何在win10下利用Fiddler实现线上项目调试, 有需要的兄弟们可以去看我的这篇文章

4.2 临时保存自己的修改

已经实现了线上调试, 接下来就是修改BUG了

前端这种所见即所得的编程感觉是最让人着迷的, 我们在浏览器就可以很方便的修改代码, 从而看到BUG解决后的优雅效果

但在把修改挪到本地代码的时候, 难免会出现遗漏的情况

这是就需要利用源-覆盖面板来进行临时保存

第一步, 我们进入源面板, 打开需要修改的代码App.vue:

接下来, 我们切换到覆盖面板, 点击按钮选择用于临时保存的文件夹:

比如笔者这里选择的是D:\Temp\Debug, 之后简单修改App.vue的代码, ctrl+s保存

此时, 在左侧树形结构, 会出现用于替换项目文件的内容:

之后不管是在电脑的本地文件夹中, 亦或是浏览器调试面板里, 我们都可以看到自己修改后的文件内容

妈妈再也不用担心蓝屏后我抽我自己了呢

5 总结

其实浏览器的功能非常强大, 只是很多我们不了解或者没使用过

如果有更好的技巧或者好玩的内容, 多多分享没有什么坏事

再次感谢秃头披风侠老师!