前端Debug的特点：

1.多平台（浏览器、Hybrid、NodeJS、小程序、桌面应用等）

2.多环境（本地、线上环境）

3.多工具（Chrome devTools、Charles、Spy-Debugger、Whistie、vConsole）

4.多技巧（Console、BreakPoint、sourceMap、代理等等）

microsoft浏览器——元素（element）调试

如下插一段代码：

<style>
        div {
            width: 100px;
            height: 50px;
            background-color: wheat;
        }
</style>
<body>
    <div></div>
</body>

代码的演示如下

屏幕截图 2023-08-18 113909.png

我们可以对这个div的属性进行调试，并不会改变源代码，示例如下图：

屏幕截图 2023-08-18 114904.png 这个技巧能够帮助我们简化前端的编写

microsoft浏览器——控制台（console）调试

我们为了获取到元素给div加一个id（其实这里可以不用加，因为只有一个div，但这在以后编程中有较多div元素时很适用）

屏幕截图 2023-08-18 115913.png 然后进入控制台（console）输入js代码（console.log(div1)）就可以获取到这个元素

屏幕截图 2023-08-18 115935.png 然后可以用console.dir()来获取到更多的这个元素属性

屏幕截图 2023-08-18 120846.png 要查看日志可以用console.time()进行查看，这里不再演示

microsoft浏览器——源代码（source）调试

屏幕截图 2023-08-18 121403.png 从左到右分别是页面资源文件目录树、代码预览区域、Debug工具栏（监视上边的图标栏）、断点调试器

以下是一个加法的代码：

<input value="" class="num" id="numA" oninput="NumberA()">
    +
    <input value="" class="num" id="numB" oninput="NumberB()">
    =
    <span id="result"></span>
    <button id="run">计算</button>
    <script src="index.js"></script>

js代码为

let numberA = ''
let numberB = ''
function NumberA() {
    numberA = document.getElementById('numA').value;
}
function NumberB() {
    numberB = document.getElementById('numB').value;
}
document.getElementById('run').onclick = function () {
    document.getElementById('result').innerHTML = parseInt(numberA) + parseInt(numberB);
}

这是根据断点调试得出的正确代码，之前错误的js代码为字符串numA和numB相加的结果

二、Chrome DevTools

浏览器右键，点击检查

1. Element

左边显示元素结构，右边是样式

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

可以用以下2种方式强制激活伪类：

选中具有伪类的元素，点击:hov
DOM树右键菜单，选择Force State

可以右键DOM节点，点击Capture node screenshot，截取当前节点的效果图

2. Console控制台

用来展示日志，有很多种

console.log：打印一条日志
console.warn：打印警告，黄色
console.error：打印错误信息，红色
console.debug：打印调试信息
console.info：console.log 别名，输出信息
console.table：具象化的展示JSON和数组数据
console.dir：通过类似文件树的方式展示对象的属性
console.time()和console.timeEnd() ：分别放在js脚本的前面和后面，测量js脚本的消耗时间
- 可以传人一个参数，作为计时器的名称
占位符：给日志添加样式，可以突出1重要的信息
- %s：字符串占位符
- %o：对象占位符
- %c：样式占位符
- %d：数字占位符

3. Source Tab

展示项目的源代码

3-1 Break Point与Watch

在js中加入debugger;或者在Source面板点击代码的行号，代码在运行时如果用到此处js代码就会在此断点处停止运行，等待进一步指示，这时就用到了上图中的区域3Debug工具栏，自行决定如何处理程序。

在代码调试时，把鼠标移动到要观测的变量上，会自动显示该值。
Watch栏也会观测变量的值。也支持自行输入查询变量
Breakpoints：展示程序中的断点

3-2 Scope（作用域）与Call stack（调用栈）

展开Scope可以查看作用域列表（包含闭包）
展开Call Stack可以查看当前javaScript代码的调用栈

3-3 其他

XHR/fetch Breakpoints：所有请求的断点，一旦程序发生了网络请求，就可以进入断点

DOM breakpoints：HTML中的某个元素发生变化的时候，可以添加断点

其余的不太常用

3-4 压缩后的代码如何调试？

由于前端代码天生具有"开源"属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、'b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢？

使用Source Map就可以帮助我们找到源码了，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。代码报错时，直接点击报错链接即可跳转到源码。

在webpack打包的时候加上这样一句：**devtool: 'source-map',**就可以使用source map了

下面是一个打包后的map文件，肯定比源码大。

mappings字段存储了源文件和Source Map的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行爱吗中的内容
- 分号，代表换行

那么既然Source Map可以映射源码，那压缩后的代码带上Source Map上线不就又不安全了吗？如果不带Source Map上线，那么出错后又不可调试了，不行。

Source Map通常应用场景是监控，上线时不带Source Map，通常这样解决：

打包时带上Source Map
上线前将Source Map上传到另一平台，比如监控平台
删掉原项目中的Source Map，将不带Source Map的产物部署上线

总结

在使用前端的插件过程中我们能够更加快速的解决问题，作为一个前端编程人员这项技能也是必备的，总之，在学习好前端的基础知识后会有很多的浏览器插件和相关的组件使用，能够大大的提高我们的编程效率，只要我们将前端的地基打好，以后前端的的路会越走越宽的。

前端开发调试之PC端调试 | 青训营