这是我参与 [第五届青训营] 伴学笔记创作活动的第8天
前端调试有多平台、多环境、多工具、多技巧的特点，这些特点也是前端开发本身带来的
devTools
在浏览器点开检查即可，有多种功能，还可以使用扩展安装其他功能
element
可以检查页面元素，操作元素样式，强制元素状态，筛选css等功能
console
显示日志、警告、报错、用户消息等等，还可以在控制台输入JS代码运行一些脚本
常用的有console.table 、console.dir
console.table
常用于控制台打印数组、JSON数据
let arr=[{type:1,class:1},{type:2,class:2},{type:3,class:3}];
console.table(arr);
console.dir
常用于类似文件树的方式展示对象的属性，特别是DOM元素
<div>123</div>
<script>
console.dir(document.querySelector('div'))
</script>
Source
可以查看、调试代码。有监视变量、操作断点、查看作用域、侦听事件等作用。可以在源代码中想要断点的行下加上 debugger;
为防止开发的代码在Source中被看到，可以使用 Webpack等工具对代码进行压缩混淆，使代码不可读
不过在开发时压缩混淆的代码无法调试，可以使用 Sorce Map工具定位代码位置
//webpack.config.js
module.exports = {
//...
devtool: 'inline-source-map',
//...
}
NetWork
可以查看所有请求，包括Fech/XHR、JS、CSS、Img等，以及它们的请求相关信息，返回的结果等——还可以设置网络条件、禁用缓存、模拟弱网环境
代理工具
构建一个代理服务器（通常是PC端），之后使用HTTP代理连接到服务器。常用工具有Charles、Fiddler等。连接后可以检测浏览器请求，调试页面。还可以做远程代理，将页面资源代理到远程某位置，或将资源代理到本地
Nodejs调试
- 结合浏览器：在终端执行命令
node --inspect，并在浏览器edge://inspect/#devices页面点击Open dedicated DevTools for Node即可开启 - 结合VsCode：使用调试功能即可
总结：
前端开发中总会有许多需要调试的场景，善于使用前端调试工具可以及时发现bug并更改，调整样式、分析接口请求、代码热更新、性能优化等。学会调试正是前端开发的基础之一
