1. 打开开发者工具
- 在任意一个网页上，点击浏览器右上角的三个点（或按 F12 键）。
2. 选择要调试的页面
- 在弹出的菜单中，选择“检查”（Inspect）选项。
3. 查看元素
- 在开发者工具中，你可以看到当前页面的所有元素。你可以点击任何元素来查看其属性、样式和事件。
4. 查看源代码
- 点击顶部的“Sources”按钮，可以查看整个页面的源代码。
5. 设置断点
- 当你遇到需要调试的地方时，可以在代码行号上点击，然后选择“断点”（Breakpoint）。这样，当代码执行到该行时，浏览器会暂停并允许你查看变量的值。
6. 单步执行
- 在“控制台”（Console）中，你可以单步执行代码。点击“Step Over”（逐行跳过）、“Step Into”（逐行进入）或“Step Out”（逐行跳出）等按钮，以查看不同执行路径的效果。
7. 查看性能分析
- 点击“Performance”选项卡，可以查看页面的性能分析，包括加载时间、渲染时间、内存使用情况等。
8. 查看网络请求
- 点击“Network”选项卡，可以查看页面的网络请求和响应。这有助于了解页面是如何与服务器通信的。
9. 查看CSS样式
- 点击“Styles”选项卡，可以查看页面的 CSS 样式。这有助于调试样式问题，如颜色、字体、布局等。
10. 查看JavaScript代码
- 点击“Sources”选项卡，可以查看 JavaScript 代码。这有助于调试 JavaScript 代码，如变量、函数、条件语句等。
11. 保存和导出
- 在“Sources”选项卡中，点击“Save All”按钮，可以将整个页面的源代码保存为 HTML 文件。
- 点击“Export”按钮，可以将当前页面的源代码导出为 JSON 文件。
12. 关闭开发者工具
- 点击浏览器右上角的三个点（或按 F12 键），然后选择“开发者工具”（Developer Tools）选项，关闭开发者工具窗口。
