1. 打开开发者工具：点击浏览器右上角的三个点图标，然后选择“检查”或“开发者工具”。
2. 设置断点：在代码中添加`console.log()`语句，然后在开发者工具中设置断点，当程序执行到该语句时暂停。
3. 查看控制台输出：在开发者工具中，可以通过“控制台”（Console）选项卡查看当前页面的控制台输出。
4. 查看元素属性：在开发者工具中，可以通过“Elements”（元素）选项卡查看当前页面的所有元素及其属性。
5. 查看网络请求：在开发者工具中，可以通过“Network”（网络）选项卡查看当前页面的网络请求情况，包括请求类型、请求头、响应头等。
6. 查看CSS样式：在开发者工具中，可以通过“Styles”（样式）选项卡查看当前页面的CSS样式。
7. 查看JavaScript代码：在开发者工具中，可以通过“Sources”（源代码）选项卡查看当前页面的JavaScript代码。
8. 查看HTML结构：在开发者工具中，可以通过“Elements”（元素）选项卡查看当前页面的HTML结构。
9. 查看DOM树：在开发者工具中，可以通过“Elements”（元素）选项卡查看当前页面的DOM树。
10. 查看性能分析：在开发者工具中，可以通过“Performance”（性能）选项卡查看当前页面的性能分析数据，包括加载时间、渲染时间等。
11. 查看错误信息：在开发者工具中，可以通过“Console”（控制台）选项卡查看当前页面的错误信息。
12. 查看调试信息：在开发者工具中，可以通过“Sources”（源代码）选项卡查看当前页面的调试信息。
13. 查看内存使用情况：在开发者工具中，可以通过“Memory”（内存）选项卡查看当前页面的内存使用情况。
14. 查看GPU渲染：在开发者工具中，可以通过“Rendering”（渲染）选项卡查看当前页面的GPU渲染情况。
15. 查看动画帧数：在开发者工具中，可以通过“Animation”（动画）选项卡查看当前页面的动画帧数。
