这是我参与「第五届青训营 」笔记创作活动的第1天
一、本堂课重点内容：
Chrome DevTools 谷歌浏览器开发者工具，重点介绍了谷歌浏览器开发者工具的各个功能的使用情况介绍。
二、详细知识点介绍：
1.Elements
主要是对网页中HTML、CSS部分进行监听，并且可以通过浏览器开发者工具进行修改实时呈现修改后的效果。
2.Console
控制台，这个部分主要介绍了console的一系列方法进行介绍，介绍了console.log、console.warn、console.error、console.debug、console.info、console.table、console.dir这些方法的作用，通过console的这些方法可以选择等级的对日志进行分类查看。
3.Sources
在这个部分可以对代码进行分析调试，可以给代码添加断点，然后通过Debug工具栏中的操作进行调试，工具栏从左到右依次为暂停/继续、单步跳过、进入函数、跳出函数、单步执行、激活/关闭所有断点、代码执行异常处自动。
4.NetWork
这个部分主要是对网络请求进行监听，在这里可以看到浏览器加载的各种资源，如js、css、img、XHR(数据请求)等等，可以点击然后查看详细信息，如请求信息、响应信息等等。
5.Application
这个部分主要介绍了浏览器存储，在这里可以查看到网站存储在浏览器上的一些信息数据，然后可以这种对这些存储数据进行删除处理。
6.Performance
这个部分可以对代码的性能进行监测，如果有超时的地方，会给出红色提示，然后在红色处查找超时的代码，然后点击就可以找到影响性能的代码，然后进行修改提高性能。
7.Lighthouse
这个部分用于测试网站的性能，通过测试得到数据可以了解一个网站性能怎么样，而判断一个网站性能的好坏主要看LCP、FID、CLS这三个部分。
(1).Largest Contentful Paint (LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
(2).First Input Delay (FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
(3).Cumulative Layout Shift (CLS):累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。
三、实践练习例子：
四、课后个人总结：
通过对本次课程的学习让我对PC段的调试有了一定的了解，并且通过实际也让自己对浏览器开发者工具的使用有了初步的认识，之后通过更多的实践让自己对浏览器开发者工具的使用更加熟练，之后如果遇到一些问题也可以通过浏览器开发者工具快速找到解决办法。
五、引用参考：
掘金-字节内部课程-前端入门工具篇-前端开发调试之PC端调试
