这是我参与「第四届青训营」笔记创作活动的第4天

前言

我们在项目开发过程中，经常遇到需要进行调试的代码模块。对于初学者而言，手工跟踪最为有效和方便，一方面可以重新对于系统的内部逻辑进行一次梳理，另一方面还可以找到产生问题的地方。而对于高阶的开发者而言，手工跟踪的方式极大地浪费了时间，所以需要调试工具的帮忙。下面我们就来介绍一下前端调试的一些方案。

一、Debug

Debug，快速定位，，理顺逻辑，调试代码。看到后端使用Debug，总会露出羡慕的小眼神。于是手指轻跳，前端也有自己的 Debug。如 console.log，confirm，alert 等当然最常用的还是浏览器的 devTools工具来进行调试操作。

前端Debug特点

多平台 (浏览器，Node，小程序，桌面应用程序等)
多环境 (线上环境和开发环境)
多工具 (Chrome devTools、rles、Spy-Debugger、Whistle、vConsole 等)
多技巧 (Console、BreakPoint、sourceMap、代理等)

二、Chrome devTools

Chrome devTools 这也是前端工程师最常用的调试工具之一，它能很方便的帮助我们进行代码调试，网页性能分析等，也是我们前端工程师必须掌握的一种调试方法，下面我们来简单介绍一下它的一些调试方法

2.1 修改元素属性

修改 css 元素属性是我们日常工作学习中最常用的，因为写出来的样式总会于设计稿有点小出处，这时候我们就需要借助于 devTools 工具来帮助我们对页面样式进行微调辣~

这就是调节样式的控制面板，下面我们来简单介绍一下常用的功能

点击 .cls 开启动态修改元素的class
输入字符串可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值（字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
Computed下点击样式里的箭头可以跳转到 styles面板中的css规则

我们有时候也需要调试伪类的样式，但是当我们选择元素在面板当中也并没有伪类样式选项，此时我们就需要给当前元素强制添加伪类

我们可以在 dom 结构当中右击选择强制执行状态就可以添加相应的伪类辣~
也可以点击右侧面板 .hov 也可以强制添加伪类

2.2 console

console 也是我们开发中很常用的调试方法之一，它能够在控制台面板当中输出一些日志相关的信息，我们在写逻辑的时候，也能很方便的对一些我们想要查看的变量进行查看，下面我们来简单介绍一下

console.log 输出
console.warn 警告输出
console.error 错误输出
console.debug 调试输出
console.table 具像化的展示JSON和数组数据
console.dir 通过类似文件树的方式展示对象的属性
等等

2.3 Sorce Tab

这个是我们的源代码调试，在这里面我们可以很方便的对我们的 js 代码进行调试，打断点、查看 js 调用栈、作用域等一系列操作

左边就是我们源代码目录结构，中间就是源代码区域，右边就是调试工具栏区域

2.4 NetWork

该面板主要用于查看当前项目的网络请求状况，请求资源大小，请求所消耗的时长等，也是我们开发中比较常用的功能

2.5 Application

该面板主要是本地存储、cookie、缓存相关的功能

2.6 Performance

该面板主要是帮助我们分析网页的性能，我们可以对项目进行录制，它会帮我们生成一份网页性能描述等信息，帮助我们快速定位到网页当中的性能瓶颈

2.7 Lighthouse

该面板主要是对我们网站的性能分析，它会给出该网站的性能评分标准，也会指出哪些地方存在性能瓶颈，还有相应的解决方案

核心Web指标：

Largest Contentful Paint (LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
First Input Delay (FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
Cumulative Layout Shift (CLS):累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。

三、压缩后的代码调试

前端在开发结束之后，会将本地的代码进行打包，然后部署到服务器当中，方便用户访问，但是打包之后的代码为了减少代码体积，我们都会将代码进行压缩 '丑化'等一系列操作，最终得到一份很丑陋的代码如下

如果程序在运行过程中出现了问题，我们是很难发现问题的所在之处的，所以最终的解决办法是在打包的时候配置 source Map 映射，但是我们在部署项目的时候，这个文件是不能部署上去的，第一就是它的体积过大，第二就是不安全

下面就是 sourcemap 文件

{
    "version" : 3，
    "file" : "index.js ",
    "mappings" : "AAEAA, SAASC, eAAe ,QAAQC,QAAU,WACXCC,QAQC ,IAAI,SACF)J,SASC, Ae      ,QA4QI,OAESCL SASC, eA4e,QOAC,QA iACACC,Op8AQC,IAIT,QACF3,SAASC,eAAe,QAAQI,0AE5CL,SAASC, eAAe, 0AAoK,QAAU , wACvC,MAAMC,MIAAM"，
    "sources" : ["webpack: // sourcemap/ ./src/index. js"]，
    "sourcescontent" : ["let numberA = 1"1", InnumberB = \"\" ; ndocument. getElementById( "numA\").oninput = function () ANnconsole.log( '-----' );in numberA =
    document. getElementById( \ "numA " ).value;\n}; \ndocument.getElementById( "numB\N" ). oninput = function () {\nconsole.log(\"++十+\" );in numberB =
    document . getElementById( \ "numB\ " ).value;\n }; \ndocument. getElementById()"run\(" ).onclick = function () {Nn throwError( 'a bug' ); in document. getElementById( \ "result\ " ).innerHTNL = numberA + numberB; \n}; \n"
    ],
    "names" : ["document", "getElementById", "oninput", "console","log","value" ,"onclick","Error"],
    "sourceRoot" : ""
}

思考：既然 sourcemap 文件存放的是项目源代码，那么是肯定不能部署到服务器上的，那么我们在线上环境该如何使用 sourcemap 进行调试呢？

答：我们可以使用代理工具来解决，我们会将打包之后的代码部署到服务器上，然后在本地会生成一份 sourcemap 文件，然后在本地使用 Map Local 网络映射来访问本地的 sourcemap 文件就可以进行调试辣~

总结

上面就是一些我们前端开发中一些常用和不常用的一些调试方式，当然还有更多的调试方式，这里也不一一列举了，代码调试是我们开发人员所必备技能，它能够帮助我们快速定位到程序出错的地方，让我们快速的解决在程序中出现的Bug。好了，今天的分享到此结束，啊哈哈哈~

前端调试 | 青训营笔记

前言