1.Elements部分
首先按下F12键即可进入开发者工具页面，以CSDN博客页面为例，如下可以看到右侧是该页面所对应的前端代码。
在Elements部分的Styles模块下可以看页面的各个类别的样式等。
（1）点击.cls可以开启动态修改元素的class，输入字符串可以动态的给元素添加类名 ；
（2）勾选，取消类名可以动态查看类名生效的效果；
（3）点击具体的样式值（如字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域可以实时进行预览，但是刷新页面样式即刻恢复为原来的样式；
（4）对于如何针对页面里的某个区域进行查看样式代码，可以点击Elements行最左边的按钮，或者选中想要修改的区域，鼠标右键检查即可（如图）；
可以清晰看到，点击按钮后选中我想要看的页面中的图片区域的样式，单击鼠标左键会自动指向该区域所对应的样式代码。在图片区域右键检查也可以达到此效果。
（5）对于某些伪类元素，我们可能不能通过以上形式选中查看样式，如CSDN的文章推荐标题区域，鼠标停留则会出现一条下划线，但是我们会发现如果还使用（4）介绍的方法是无法选中的，效果如图。
鼠标右键点击下划线部分，点击检查按钮，我们会发现虽然给出了代码的位置，但是鼠标离开后下划线又消失了。
那么我们有两种方法可以强制激活伪类，达到可以边修改此样式边查看页面的效果：
1）选中具有伪类的元素，右键，进入DOM树右键菜单，选择Force State下面的 ：hov并点击；这样我们就可以发现下划线即使在鼠标离开后仍旧存在。
2)直接点击右侧的：hov，选中：hover。
（6）Computed下可以查看盒子模型，点击样式里面的箭头可以跳转到styles面板中的css规则。
2.Console部分
Console 部分通常是指浏览器开发者工具（DevTools）中的一个重要功能模块，名为Console 面板。它是开发者用来调试、检查和输出信息的地方，帮助开发者更好地理解代码的执行过程。
（1）console.log(): 开发者可以通过 console.log() 在控制台输出信息。这是调试代码时最常用的功能之一，可以帮助你查看变量的值、函数的执行结果、对象内容等。
（2）console.error(): 当代码中出现错误时，console.error() 可以输出错误信息，通常以红色字体显示，帮助开发者识别问题。
（3）console.warn(): 用于输出警告信息，通常以黄色字体显示，提醒开发者注意潜在的问题。
（4）consle.debug():用于输出调试信息。通常，输出的内容在浏览器的开发者工具中会以较低的优先级显示（有些浏览器默认只显示 console.log 输出）。它通常用于调试阶段的详细信息，但在生产环境中通常不建议使用。
(5) consle.info():用于输出一般性的信息，通常用于展示程序的状态、进度或其他常规信息。输出内容在控制台中显示为蓝色，代表该信息较为普通或非紧急。
(7)consle.table():将数组或对象以表格的形式展示在控制台中。这对于展示大量数据或结构化数据（如数组、对象数组）特别有用，可以使数据更易于阅读和理解。
(8) consle.dir():用于打印对象的详细结构信息，比 console.log() 更加详细和层次化。它通常用来展示对象的内部结构，特别适合查看 DOM 元素和复杂的对象。
(9)占位符：使用占位符（placeholders）能够使调试输出更加灵活和动态。占位符是通过在字符串中插入特定的占位符来表示变量或值，然后在调用 console 方法时传递实际的值来替换这些占位符。 给日志添加样式，可以突出重要的信息。
如: %s:字符串占位符，%o:对象占位符，%c样式占位符，%d:数字占位符······
3.Sources部分
Sources 面板是一个非常强大的调试工具，用于查看、编辑和调试网页的源代码。这个面板包含了多种功能，可以帮助开发者高效地调试 JavaScript 代码、处理文件、设置断点、查看网络请求等。
（1）在左侧区域1的面板中，是页面资源文件目录树，可以看到网页中所有加载的资源（如 JavaScript 文件、HTML 文件、CSS 文件、图片等）。这部分展示了所有可用的文件，你可以通过点击这些文件来查看和调试它们。
File System：列出本地文件，特别是如果使用了文件系统调试工具。
Page：显示从当前页面加载的所有文件，通常包括 HTML、JavaScript 和 CSS 文件。
（2） 区域2是代码预览区域。
（3）区域3是Debug工具栏，从左到右依次为：暂停（继续）、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所有断点、代码执行异常处自动。
（4）区域4是断点调试器。
1）Break Point：使用关键字debugger（在要设置断点的行后面加上debugger;）或代码预览区域单击行号即可设置断点，代码执行到断点处将自动暂停。展开Breakpoints列表可以查看断点列表，勾选取消可以激活禁用对应断点。
2）暂停状态下，鼠标hover变量可以查看变量的值。
3）Watch:在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值。
4) Scope： Scope 面板展示了当前函数执行时可访问的所有变量和对象，包括局部变量、函数参数、全局变量等。当代码在断点处暂停时，你可以展开 Scope 查看当前作用域内的所有数据。它帮助你理解代码在某一时刻的状态。
Local：当前函数或代码块内的局部变量。
Closure：闭包作用域，指在外部函数中定义的变量和内部函数所共享的变量，能够跨越外部函数的执行范围。
Global：全局作用域的变量，可以在整个页面的任何地方访问。
5）Call Stack：显示的是函数调用的顺序和层级。每当一个函数被调用时，它会被添加到调用栈中。当前执行到哪一行代码，栈中就会显示相应的函数调用。可以查看当前javascript代码的调用栈，通过查看调用栈，可以理解当前执行的代码路径，跟踪如何从一个函数跳转到另一个函数，并追溯函数的调用来源。
栈底：通常是最先被调用的函数。
栈顶：显示当前执行中的函数。当代码暂停时，栈顶函数是正在执行的函数，下面是它的调用函数。
4.Network部分
Network 面板是前端调试中不可或缺的工具，它帮助开发者查看和分析网页加载过程中所有的网络请求，解决性能瓶颈、API 调用失败、资源加载错误等问题。通过这一面板，可以了解请求和响应的详细情况，并进行更深入的性能优化和问题排查。
（1）区域1：控制面板，控制面板通常位于 Network 面板的顶部或左上角，提供了一些基本的操作和功能按钮，帮助开发者控制网络请求的监控和记录。
记录按钮：用于启用或禁用网络请求的记录。当记录被启用时，所有网络请求都会显示在 Network 面板中。如果禁用记录，新的请求不会被添加到列表中，但现有的请求仍然可以查看。
清除按钮：清除所有已记录的网络请求，使界面更清晰。通常是在调试时进行的操作，以便开始一个新的测试会话。
模拟网络条件：可以设置模拟不同的网络环境（如慢速网络、无网络等），以便测试应用在不同网络条件下的表现。
离线模式：启用后，浏览器将模拟断开与网络的连接，帮助测试离线功能。
暂停/继续按钮：允许暂停请求记录或查看，方便在特定时刻分析网络请求。
（2）区域2：过滤面板，过滤面板位于 Network 面板的上方或一侧，允许开发者根据不同的条件对网络请求进行筛选，帮助开发者快速定位和分析感兴趣的请求。
资源类型过滤器：可以选择只显示某种类型的请求，如 XHR（API 请求）、CSS、JS、图片、字体、文档等。这对于定位特定类型的资源加载问题非常有用。
状态码过滤器：可以根据 HTTP 响应的状态码进行筛选，帮助你找到所有返回 404、500 等错误码的请求。
搜索框：通过输入 URL 或关键字，开发者可以快速过滤出包含该关键字的请求，进一步提高查找效率。
（3）区域3：概览区域，概览区域通常显示在 Network 面板的上方，提供对所有网络请求的总体视图和一些统计信息。它为开发者提供了一个高层次的概况，以帮助快速理解页面加载性能。
请求概览：可以查看请求的数量、总耗时、总数据大小等。
性能统计：显示加载资源的总体时间、各个资源的下载时间、等待时间等性能相关数据。
资源加载图表：展示所有资源的加载时间图示，通常以时间线的形式呈现，帮助理解不同资源的加载顺序和耗时，找出性能瓶颈。
（4）区域4：Request Table面板，Request Table 面板是 Network 面板的主要区域之一，列出了所有网络请求的详细信息。每一行代表一个请求，你可以看到请求的 URL、方法、状态码、时间等信息。
请求列表：显示页面加载期间发出的所有网络请求。每个请求的基本信息（如请求的 URL、方法、状态码、大小、持续时间等）都会显示在此。
排序功能：可以根据不同的列（如请求时间、状态码等）对请求进行排序，方便开发者找到加载时间长或出错的请求。
多项选择：可以选择多个请求并执行操作，如批量导出等。
（5）区域5：总结面板，总结面板位于 Network 面板的底部，通常显示关于当前网络会话的总览和统计数据。它提供了一些关于所有请求和响应的汇总信息。
请求总览：展示所有请求的概况，例如请求数量、总数据量、请求总时长等。
性能总结：提供一些关于页面加载性能的总结，帮助开发者识别页面加载的瓶颈。
状态码分布：展示不同状态码（例如，200、404、500 等）请求的数量，可以帮助你快速了解哪些请求存在问题。
（6）区域6：请求详情面板，请求详情面板位于 Network 面板的右侧或下方，当你点击某个特定的请求时，显示该请求的详细信息。
请求头：显示发起请求时包含的 HTTP 请求头，如 User-Agent、Accept、Authorization 等。
响应头：显示服务器返回的 HTTP 响应头，如 Content-Type、Cache-Control、Set-Cookie 等。
响应体：查看服务器返回的具体内容，通常以文本或 JSON 格式显示，帮助检查响应数据是否符合预期。
时间信息：展示请求的详细时间线，包括请求的每个阶段（DNS 查找、连接、请求发送、响应接收等）的耗时。
Cookies：如果请求包含 cookies 信息，可以在这个面板中查看与请求相关的所有 cookies。
5.Application部分
Application 面板是一个功能强大的工具，主要用于查看和管理网站应用的各类存储数据、服务工作者、缓存等内容。展示与本地存储相关的信息，这个面板提供了一个详细的视图，帮助开发者深入了解网页或应用在客户端的状态。它特别有助于调试涉及浏览器存储、离线工作、缓存、以及Web应用相关的功能。
点击左侧的Stroage面板中的Clear Site Data可以清楚网页的本地存储数据。
（1） 左侧面板提供了多个不同的选项卡（Tabs），每个选项卡都有不同的功能，主要包括以下几个部分：
1）清单（Manifest）：用于查看网站的 Web App Manifest，该文件通常包含应用名称、图标、颜色主题、启动 URL 等信息。它帮助浏览器了解如何安装 Web 应用，以及应用在设备上的外观和行为。
2）服务工作者（Service Workers）：服务工作者用于控制缓存，提供离线支持。你可以在此查看已注册的服务工作者，检查其状态，甚至手动控制它们（如更新、卸载等）。
3）缓存存储（Cache Storage）：该区域显示缓存中存储的文件，这些文件通常是由服务工作者管理的。开发者可以查看、删除缓存资源，了解哪些资源在离线时可用。
4）Cookies：显示与当前网站相关的所有 cookies。你可以查看、删除或修改 cookies。Cookies 通常用于会话管理、跟踪用户信息等。
5）LocalStorage 和 SessionStorage：
LocalStorage：持久化存储数据，直到被显式删除，通常用于存储网站中不需要经常改变的数据。
SessionStorage：临时存储数据，数据在页面会话结束后自动消失（即浏览器标签页关闭时）。
6）IndexedDB：一个客户端的数据库，可以存储大量结构化数据。它可以持久化存储数据，并支持查询、事务等复杂操作。此区域允许开发者查看和调试 IndexedDB 中的数据。
7）WebSQL：与 IndexedDB 类似，它是一个浏览器数据库，允许客户端存储数据。WebSQL 目前已经不再被推荐使用（现代 Web 应用倾向于使用 IndexedDB），但仍然在一些老旧浏览器中存在。
8）Push 订阅（Push Notifications）：用于管理和调试 Push 通知服务。可以查看当前的推送订阅、消息内容以及通知的触发事件等。
9）背景页面（Background Pages）：这部分是开发者调试后台脚本的地方。特别是针对 Chrome 扩展程序和 Service Worker 中的脚本。
10）合成图层（Layers）：显示页面的渲染层次结构和合成图层的信息，这对调试页面的渲染性能非常有帮助。
（2） 右侧面板（详细视图）
点击左侧面板中的某个项目后，右侧面板将展示更详细的信息。例如：
在 Cookies 中，右侧将列出所有 cookie 的名称、值、路径、过期时间等详细信息。
在 IndexedDB 中，右侧会展示已存储的数据库、对象存储、键值对等。
在 Service Workers 中，右侧会显示当前活跃的服务工作者的状态（例如，是否在运行、是否被激活、是否注册成功等）。
（3） 调试功能
1）服务工作者调试：在服务工作者的选项卡中，你可以手动控制服务工作者的生命周期（比如激活、更新、注销），并查看它们的日志。
2）缓存管理：开发者可以在“缓存存储”部分查看和清除缓存的内容，了解哪些资源已经被缓存以便在离线时使用。
3）模拟离线状态：在 Application 面板 中，尤其是在服务工作者部分，开发者可以模拟网络断开、离线状态等情境，检查应用的离线功能是否正常。
6.Performance部分
Performance 面板主要用于记录网页加载过程中的各种性能指标，如页面的渲染时间、JavaScript 执行时间、帧率、内存使用等，帮助开发者找出性能瓶颈。这个面板会显示一个详细的时间线视图，包括页面加载、用户交互、浏览器渲染、JavaScript 执行等各个环节的活动。
如图，自上至下分别为区域1：控制面板，区域2：概览面板，区域3：线程面板，区域4：统计面板。
（1） 区域1：控制面板，你可以开始一次 录制（Record）来捕获一个特定的时间段内的性能数据。这个录制过程通常会持续几秒钟到几分钟，取决于你需要分析的内容。
点击“录制”按钮开始录制，进行你想要测试的操作（例如，页面加载、点击交互等），然后停止录制。
（2）区域2：概览面板，包含--FPS:每秒帧数，CPU：处理各个任务花费的时间，NET:各个请求花费时间。
1） FPS（每秒帧数）：帧率（FPS，Frames Per Second） 表示每秒钟渲染的帧数。在一个理想的网页或应用中，目标帧率通常是 60fps（即每秒60帧），以确保流畅的动画和交互体验。如果帧率低于 60fps，页面会感觉卡顿或不流畅。低于 30fps 时，用户通常会感到明显的卡顿。
在概览面板中，你可以看到一条显示帧率变化的曲线。频繁的掉帧（例如从 60fps 突然下降到 30fps 或更低）表明页面渲染性能有问题。
2）CPU（处理器占用）：CPU 使用情况 显示了浏览器在执行不同任务时消耗的处理器时间。每个任务（如 JavaScript 执行、布局计算等）都需要占用一定的 CPU 时间，过高的 CPU 使用可能会导致页面响应缓慢或卡顿。
这个部分会展示 CPU 使用的整体情况，帮助你理解页面在执行 JavaScript、布局、渲染等过程中耗费的时间。你可以查看每个任务的执行时间，找出性能瓶颈。
如果 CPU 占用过高（比如持续超过 50% 或 80%），可能说明存在性能优化空间，比如代码优化、减少不必要的计算等。
3) NET（网络请求时间）：NET 面板 显示了所有网络请求的加载时间。它帮助你分析资源（如图片、CSS 文件、JavaScript 文件、API 请求等）加载的时间和网络延迟。
每个请求都显示了它的开始时间、结束时间和总耗时。这可以帮助你找出加载时间过长的资源或请求，进而进行优化。
对于长时间加载的资源，开发者可以采取措施（例如异步加载、延迟加载、资源压缩等）来加速页面加载速度。
（3）区域3：线程面板，包含--Frames：帧线程，Main：主线程，负责执行Javascript，解析Html、Css，完成绘制；Raster：Raster线程，负责完成某个layer或者某些块（tile）的绘制。
1) Frames（帧线程）:帧线程 负责将页面内容逐帧绘制到屏幕上。每一帧的渲染都涉及布局、样式计算、绘制等过程，目标是确保页面能够流畅展示。
帧线程通常会按照 60fps 的速度来工作，每秒显示 60 帧。如果帧线程的任务积压，或者每一帧渲染时间过长，就可能导致卡顿或延迟。
2) Main（主线程）:主线程是浏览器中非常关键的线程，负责执行所有 JavaScript 代码，解析 HTML 和 CSS，以及处理所有与用户交互相关的事件。主线程的性能直接影响页面的响应性。
主线程在执行任务时，如果长时间被阻塞，会导致页面无法及时响应用户操作。例如，长时间运行的 JavaScript 脚本会阻塞用户的点击、滚动等操作。
性能问题往往与主线程的负载有关。如果 JavaScript 执行时间过长，主线程无法及时响应用户输入，就会导致页面的卡顿或冻结。
3) Raster（栅格线程）:Raster 线程 负责执行图形渲染中的具体绘制任务。这个线程会将页面上的内容转换成屏幕像素，通常涉及层（layer）或块（tile）级的绘制操作。
对于复杂的网页，渲染的内容会被分解为多个图层或区域，Raster 线程会在 GPU 上进行具体的绘制工作。这个过程通常是与 CPU 的计算密切相关，但栅格线程则专注于将计算结果转化为实际的图像。
栅格线程的效率直接影响页面的渲染速度，特别是在涉及大量图像或动画的页面中，Raster 线程的性能至关重要。
（4）区域4：统计面板，提供了更详细的性能数据，并帮助开发者通过量化的指标分析性能瓶颈。通常包括以下几部分：
1）Frames（帧）：这个部分详细展示了每一帧的渲染时间，以及每帧的计算、绘制等过程的耗时。通过这个面板，开发者可以直观地看到每一帧渲染的各个环节消耗的时间，以及哪些环节可能导致页面的卡顿。在时间轴上，帧时间线通常以不同的颜色或高度显示，长时间的 红色 标记可能表示某一帧耗时过长，开发者需要进行优化。
2）Main Thread（主线程）：显示主线程的详细活动，包括脚本执行、布局计算、事件处理等。你可以查看主线程上的每个任务以及它们的执行时间，特别是 JavaScript 代码的执行时间。如果某个脚本占用了主线程较长时间，可能导致页面响应变慢，开发者可以在这里找到优化方向。
3）Rendering（渲染）：渲染部分通常显示有关页面绘制、回流和重绘的详细数据。它有助于开发者分析页面布局和样式计算的效率，以及绘制是否顺畅。在渲染过程中过多的回流（Reflow） 或 重绘（Repaint）可能会降低页面的性能，统计面板可以帮助开发者发现这些问题，并采取相应措施减少不必要的渲染操作。
4）Network（网络）：网络统计面板展示了所有资源的加载详情，开发者可以查看每个请求的响应时间、延迟等信息。如果某个资源（如大图片、外部 API 请求）加载缓慢，可以进一步优化资源加载策略。
5）Memory（内存）：内存统计面板展示了页面的内存使用情况，包括 JavaScript 对象和 DOM 节点的内存占用。内存泄漏、频繁的内存分配和回收等问题会影响性能，统计面板可以帮助开发者查找和修复内存使用上的问题。
大家感兴趣可以点击下面的链接来通过一些操作改变页面的卡顿程度等，查看FPS指标，寻找性能瓶颈，优化代码。更好地理解该部分内容。
https://googlechrome.github.io/devtools-samples/jank/
7.Lighthouse部分
Lighthouse 是一个非常强大的工具，可以帮助开发者全面评估和优化网页性能，确保网页符合现代 Web 开发标准，并且对所有用户友好。通过使用 Lighthouse，开发者能够获得清晰的报告和优化建议，从而提升网站的加载速度、可访问性、安全性、搜索引擎优化等方面的表现。
首先在开发者工具面板中，点击 Lighthouse 选项卡。选择你要评估的领域（性能、可访问性、SEO 等），然后点击 Generate Report（生成报告）。Lighthouse 会自动运行一系列的测试并生成详细的报告，报告中包含各项评分、问题和改进建议。
简单介绍一下一些核心指标：
首次内容绘制（FCP，First Contentful Paint）：网页的第一个可见内容（如文本或图片）显示出来的时间。通常，FCP 越快，用户体验越好。
最大内容绘制（LCP，Largest Contentful Paint）：页面中最大可视元素（如大图或标题）加载完成的时间。LCP 反映了用户对页面加载速度的感知。测量加载性能，为了提供更良好的用户体验，LCP应在页面首次加载后的2.5秒内发生。
累计布局偏移（CLS，Cumulative Layout Shift）：测量视觉稳定性，网页元素在加载过程中发生意外移动的程度，影响页面的稳定性。较低的 CLS 代表页面稳定性好，用户不容易感到元素突然跳动或移动，应保持在0.1及以下。
首次输入延迟（FID，First Input Delay）：FID 衡量的是用户首次与页面交互（例如点击按钮、点击链接或进行其他操作）到浏览器实际响应这一操作之间的时间差。简言之，FID 衡量的是网页在响应用户输入时的延迟时间。应为100毫秒及以下。
时长（TBT，Total Blocking Time）：从 FCP 到页面完成加载之间，页面被阻塞的时间。较低的 TBT 表示页面可以更快地响应用户操作。