1 课程内容概括

在软件开发中，难免会遇到各种bug，如何通过调试debug是非常重要的。本课程针对前端开发中在PC端的开发调试知识做出了介绍。

2 前端debug特点

1.涵盖多平台，既包括浏览器端，也包括Hybird混合APP、NodeJS，还包括小程序、桌面应用等。

2.有本地开发环境，也有线上环境。

3.工具数量很多，既包括浏览器自带的开发者工具，也包括如Charles的专业工具。

4、有多种技巧，比如控制台、断电、sourceMap、代理等。

通过点击.cls开启动态修改元素class的功能。

通过输入字符串动态为元素添加类名，通过勾选、取消类名动态查看类名效果

通过点击样式编辑并预览

Computed点击箭头跳转CSS规则

通过控制台的日志等级分类查看日志

通过console.table 显示JSON、数组数据

通过console.dir显示对象属性

通过添加占位符的形式为日志添加样式

在该选项卡中可以查看页面资源文件目录树、代码预览、Debug操作（暂停/继续、单步跳过、进入/跳出函数、单步执行、激活/关闭所有断点）等、使用断点调试器。

通过debugger关键字、在行号点击的方式可以设置断点，并可以查看断点列表，在断点命中时可以通过鼠标放置在变量上的方法查看变量值。

可以通过对Watch点击加号的方式监控变量、查看变量值。

通过Scope与Call Stack查看作用域、调用栈。

针对压缩后的代码，可以使用Source Map尝试调试。

该选项卡有控制面板、过滤面板、概览区域、请求表面板、总结面板、请求详情面板。

显示Local Storage、Session Storage、Indexed DB、Web SQL、Cookie等存储类信息。

页面卡顿时可以查看FPS指标，并寻找性能瓶颈、优化代码。

显示核心Web指标，LCP：测量加载性能；FID，测量交互性能；CLS：测量视觉稳定性。

本笔记涉及到前端调试的意义及在PC端使用浏览器调试的方法，是前端调试的基础。