这是我参与「第四届青训营 」笔记创作活动的的第1天
前言
作为前端开发人员，在开发过程中难免会遇到一些bug，如果我们具备一些调试知识，那么将大大提升我们debug的能力，提高我们的工作效率。
前端Debug的特点：
- 多平台：浏览器、Hybrid、Node.js、微信小程序、桌面应用···
- 多环境：本地开发、线上环镜···
- 多工具：Chrome devToos、Spy-Debugger、Whistle、vConsole、Charles···
- 多技巧：Console、BreakPoint、sourceMap、代理···
1.Elements(元素)
在需要调试的页面上点击鼠标右键选择‘检查’即可打开调试工具，选择elements（元素），我们可以看到页面结构以及样式在这得到了呈现。
在数字1处的‘样式’，我们可以对页面已有的样式进行查看。点击1.1处，我们可以将页面中的伪类进行确定状态以方便查看样式。点击1.2处，我们可以在页面中添加一些样式来查看。
在数字2处的‘已计算’，我们可以更加方便地搜索你想要知道地样式数据，并且对盒子容器有更加直观的查看。
2.Console（控制台）
我们点击控制台，在这里我们可以对日志进行一些打印，当然打印语句也是有不同形式的。
console.log普通打印console.warn警告打印console.error错误打印console.debug调试打印console.info调试信息打印console.table将JSON数据以表格的形式展示console.dir将节点以树的形式打印出来
3.Sources（源代码）
如图：
区域1：页面资源文件目录树
区域2：代码预览区域
区域3：Debug工具栏（从左往右依次为） 暂停（继续）、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所有断点、代码执行异常处自动
区域4：断点调试器
4.Network(网络)
区域1：控制面板
区域2：过滤面板
区域3：概览面板
区域4：Request Table 面板
区域5：请求详情面板
区域6：总结面板
5.Performance(性能)
区域1：控制面板
区域2：概览面板
区域3：线程面板
区域4：统计面板
6.Application(应用程序)
用于显示对应网站的本地存储数据
7.Lighthouse
用于评估网站性能的好坏，并提出对应的解决措施。
