这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天

一、本堂课重点内容：

1. Elements
2. Console
3. Source
4. Performance
5. Network

二、Bug和Debug

Bug是指程序中的错误或问题。它可能是程序设计上的问题，也可能是编码错误导致的。Bug可能导致程序不能正常运行或产生错误结果。

Debug是指查找和修复Bug的过程。这可能包括使用断点、跟踪和其他工具来定位错误，并找到修复问题的方法。Debugging可能需要耗费大量时间和精力，但是它是编写高质量程序的重要组成部分。

三、Chrome DevTools

1. Elements: Elements是Chrome DevTools中的一个工具，用于检查网页的HTML和CSS结构。它允许用户查看网页的DOM结构，并且可以直接修改HTML和CSS代码来查看效果。使用这个工具可以快速定位和修复网页布局错误。
2. Console: Console是Chrome DevTools中的一个工具，用于检查网页的JavaScript运行状态。它允许用户在控制台中运行JavaScript代码，并且可以查看控制台输出的信息。使用这个工具可以快速定位和修复JavaScript代码错误。
3. Source: Source是Chrome DevTools中的一个工具，用于检查网页的源代码。它允许用户查看网页的HTML、CSS和JavaScript源代码，并且可以直接在浏览器中修改代码。使用这个工具可以快速定位和修复代码错误。
4. Performance: Performance是Chrome DevTools中的一个工具，用于检查网页的性能。它允许用户查看网页的加载速度、帧率和CPU使用情况等性能指标。使用这个工具可以快速定位和修复网页性能问题。
5. Network: Network是Chrome DevTools中的一个工具，用于检查网页的网络状态。它允许用户查看网页加载的资源，并且可以查看网络请求和响应的详细信息，如请求时间、响应时间、请求类型等。这个工具可以帮助你快速定位网络问题，如加载过慢的资源、请求错误等。

四、node调试

Node.js提供了一些内置的调试工具来帮助开发人员调试Node.js应用程序。主要有两种方法来调试Node.js应用程序：使用命令行工具和使用编辑器/IDE集成的调试器。

五、实践练习例子：

1: 使用Chrome DevTools调试JavaScript

• 首先打开Chrome浏览器，并转到要调试的网页
• 按F12键打开DevTools
• 在DevTools中选择Sources标签
• 在左边的文件树中找到对应的JavaScript文件
• 在JavaScript代码中点击左边的空白处，设置断点
• 刷新页面，断点将会被激活
• 在DevTools中选择Call Stack标签，可以看到当前代码的执行路径
• 使用Step Over、Step Into、Step Out等按钮控制代码的执行，观察变量的值

2: 使用Node.js自带的调试工具

• 首先在终端中运行命令 node inspect app.js 来启动调试模式
• 使用 n (next) 命令来单步执行代码
• 使用 repl 命令进入交互式调试模式，查看变量的值
• 使用 c (continue) 命令继续执行代码
• 退出调试模式，使用q（quit）命令

3:使用VSCode调试Node.js

• 打开VSCode,打开要调试的项目
• 在要设置断点的地方点击左边的空白处，设置断点
• 点击调试按钮，启动调试
• 在VSCode的调试面板中，使用 Step Over、 Step In、 Step Out 来控制代码的执行
• 观察变量的值