如何有效地Debug调试前端代码？

引言

新年好各位读者，不知道各位年吃的好吗，本宇宙过了个年长胖了好几斤啊。

今天依旧是更新前端的文章，关于人工智能和WEBGIS后期会陆续更新几篇，其实都已经找好了素材，就是比较忙，加上前端需要总结和学习的东西很多，因此前端会更新的比较频繁，如有感兴趣的可以在评论中留言。话不多少我们开始吧！

DevTools

由于JS的特殊性，没有Nodejs的时候，都是在浏览器中运行的，因此很多人会懵，因为不像其他语言如Python在代码行里打断点就行，前端都不知道在哪里打断点，甚至在早期不知道调试，我一般都是使用console.log来进行打印，有的时候还有一些奇奇怪怪的bug找不到错的原因，而其实浏览器内置DevTools有很多你没用过的功能会大大提高你的调试效率。

DevTools就是大家用浏览器F12可以召唤出来，或者右击鼠标的检查按钮，相信接触过前端的朋友对这都不陌生，一般我们会经常用到元素（Element）选择一下元素、控制台（console）看看打印，但是其他的几个功能就用得少了，其实其他的功能也大有可为，今天我就将这个几个功能都介绍一下，都是在开发当中会经常用到的。

1.元素 Element

在元素一栏，我们可以看到，左边为HTML代码，鼠标移动到对应的html元素，会在浏览器中框选，可以查看元素的大小，并且还可以在右侧的样式中实时修改样式，

选择html元素

实时修改css样式：

点击.cls增加新的class；取消勾选"popular-container"类，则取消该class的样式：

点击左上角可以在网页中选择元素

右键元素还可以隐藏和强制其状态变为伪类

也可以点击:hov是状态变为伪类

在已计算中可以找到已经生效的css样式，然后跳转

也可以对Html元素进行截屏

2.控制台 Console

可以在控制台展示不同的日志打印，并且可以使用一些占位符：

• %s ：字符串占位符
• %o ：对象占位符
• %c ：样式占位符
• %d ：数学占位符

console.log('Welcome to bytedance!');
console.warn('Welcome to bytedance!');
console.error('Welcome to bytedance!');
console.debug('Welcome to bytedance!');
console.info('Welcome to bytedance!');
console.log('%s %o,%c %s','hello',{name:'tom',age:18},'font-size:24px;color:red','Welcome to bytedance!')

具象化展示数组和JSON： console.table

文件树展示: console.dir(object)

源代码 Source

如下图所示，源代码分以下四个区域，分别为：

1. 文件目录树
2. 代码区域
3. Debug工具栏（从左往右）

• 暂停（继续）
• 单步跳过
• 进入函数
• 跳出函数
• 单步执行
• 激活（关闭所有断点）
• 出现异常时暂停

1. 断点调试栏

点击代码区域的行的数字，即可添加断点

此外我们还可以查看函数的作用域（包含闭包）和调用堆栈，查看调用的顺序来排查错误

关于闭包和堆栈的知识可以参考：

❝ developer.mozilla.org/zh-CN/docs/… ❞ ❝ developer.mozilla.org/zh-CN/docs/… ❞

此外还可以查看发送请求的断点和DOM发生变化的断点：

SourceMap

我们在看别人的网站都是一条代码，这是因为别人在打包项目上线都进行了加密和混淆，但这并不利于我们上线后调试，因为我们用vue脚手架等打包都会加密和混淆，导致代码不可看，这里我们可以设置webpack使用sourcemap，与我们的源码进行映射，这样我们打包后除了源代码还有一个.map文件，浏览器根据.map文件进行还原，一般企业里都是把.map文件上传到另一个服务器，这样出错了再去对照。需要设置一下webpack.config.js的devtool配置项：

module.exports = {
  devtool: "source-map",
}

网络 Network

在这里模块，我们可以查看网站的所有请求，如http请求，图片，websocket等等，不需要我们在代码里打印核对返回的数据对不对，和后端配合的时候，可以直接看这里即可，而且可以根据你的请求查看速度和占用，可以利于我们优化网站的加载速度，以及网络这里可以看到别人网站的一些素材和接口。

查看详细的请求如请求头、状态，返回的数据等等

查看图片的地址等等：

模拟不同网络效果：

应用程序 Application

这一模块主要是看你的网页存储的数据，这一块用过session和cookie应该都比较熟悉，项目没用到的也不需要了解，就不多做介绍了。

性能 Performance

这里主要是可以看到网站的性能表现，每一帧加载的内容，加载速度，以及展示你的统计数据

我们还可以设置cpu的性能和网络性能（3g、2g）等情况下的运行情况

大家可以访问：googlechrome.github.io/devtools-sa… 然后打开性能模板，点击左上角录制按钮进行分析 这里我增加了很多方格，然后可以看到每一帧都红了，说明有问题

然后我们点击下方的函数调用，查看具体代码：

然后会进入代码部分，可以看到导致问题的代码然后进行解决：

此外，我们除了观察帧数区域的变化，我们还可以打开fps相关信息，如下图，更多工具中点击绘图（render）

勾选帧的统计信息，也可以看到网站的刷新率，太低的话说明网页的效果不是很好，一般60hz以上。

LightHouse

性能模块已经是比较详细的了，LightHouse为我们提供了一个网页的报表，可以快速评估你的网站，并且给出一些指导意见

结尾

好了今天就介绍这么多了，都是前端的干货，也是我学习字节跳动课程的知识，前端要学的东西太多了，不过也是非常有意思的。深度学习、前端开发、后端开发、客户端开发都可以用JavaScript开发，可以玩的东西非常多，好了，这里是GIS宇宙，我们下期再见~

本人其他平台账号：