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。
