1. 打开开发者工具：
- 点击浏览器右上角的三个点图标，这会展开一个菜单。
- 在下拉菜单中选择“检查”（Checking）。
- 或者，你可以直接按F12键来打开开发者工具。
2. 打开页面：
- 在开发者工具中，点击左侧的“Console”选项卡。
- 在“Console”选项卡中，点击“New Window”按钮，这将在新标签页中打开当前页面。
3. 查看控制台日志：
- 在“Console”选项卡中，你会看到一个控制台窗口。
- 控制台窗口显示了当前页面的所有JavaScript代码以及任何错误信息。
4. 使用断点：
- 要设置断点，你需要在代码中添加`console.log()`语句。
- 例如，如果你想在`console.log('Hello, world!')`语句处设置断点，你可以在该语句前添加`console.log('Breakpoint')`。
- 当程序执行到这个语句时，控制台窗口将暂停并显示一条消息，表明已到达断点。
5. 单步执行：
- 要单步执行代码，你可以使用箭头键或上下箭头键来移动光标到不同的行。
- 当你到达一行代码时，按下Enter键，程序将执行这一行代码，然后继续执行下一行。
6. 查看变量值：
- 在“Console”选项卡中，你可以查看变量的值。
- 要查看变量的值，只需在变量名前添加`console.log()`语句。
7. 查看网络请求：
- 在“Network”选项卡中，你可以查看当前页面的网络请求。
- 点击“Network”选项卡，你将看到所有网络请求的列表，包括请求的类型、URL、状态码等。
8. 查看元素：
- 在“Elements”选项卡中，你可以查看当前页面的所有元素。
- 点击“Elements”选项卡，你将看到所有元素的列表，包括元素的类型、属性、文本内容等。
9. 查看样式：
- 在“Styles”选项卡中，你可以查看当前页面的所有CSS样式。
- 点击“Styles”选项卡，你将看到所有样式的列表，包括类名、ID、属性等。
10. 查看性能：
- 在“Performance”选项卡中，你可以查看当前页面的性能指标。
- 点击“Performance”选项卡，你将看到所有性能指标的列表，包括加载时间、渲染时间、内存使用等。
11. 保存和导出数据：
- 在“Console”选项卡中，你可以保存当前的控制台日志。
- 你还可以导出控制台日志为JSON文件。
12. 关闭开发者工具：
- 当你完成调试后，可以关闭开发者工具。
- 点击右上角的三个点图标，在下拉菜单中选择“退出”。
