【前端调试教程】PC端调试

引言

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

今天依旧是更新前端的文章，关于人工智能和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

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

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

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

断点调试栏

点击代码区域的行的数字，即可添加断点此外我们还可以查看函数的作用域（包含闭包）和调用堆栈，查看调用的顺序来排查错误关于闭包和堆栈的知识可以参考：

❝
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
❞

❝
https://developer.mozilla.org/zh-CN/docs/Glossary/Call_stack
❞

此外还可以查看发送请求的断点和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）等情况下的运行情况大家可以访问：https://googlechrome.github.io/devtools-samples/jank/ 然后打开性能模板，点击左上角录制按钮进行分析这里我增加了很多方格，然后可以看到每一帧都红了，说明有问题然后我们点击下方的函数调用，查看具体代码：然后会进入代码部分，可以看到导致问题的代码然后进行解决：此外，我们除了观察帧数区域的变化，我们还可以打开fps相关信息，如下图，更多工具中点击绘图（render）勾选帧的统计信息，也可以看到网站的刷新率，太低的话说明网页的效果不是很好，一般60hz以上。