1. 使用开发者工具：在Chrome浏览器中，点击右上角的三个点按钮，选择“更多工具”，然后找到并点击“开发者工具”。
2. 设置断点：在开发者工具中，点击“断点”按钮，然后在需要调试的代码行前添加断点。
3. 单步执行：在开发者工具中，点击“调试”按钮，然后点击“开始调试”。这样，每次执行到指定的代码行时，都会暂停并显示当前执行的位置。
4. 查看变量值：在开发者工具中，点击“控制台”按钮，然后输入变量名，即可查看该变量的值。
5. 查看堆栈跟踪：在开发者工具中，点击“堆栈跟踪”按钮，可以查看当前执行的函数调用栈。
6. 查看错误信息：在开发者工具中，点击“错误”按钮，可以查看当前的错误信息。
7. 查看性能分析：在开发者工具中，点击“性能”按钮，可以查看当前页面的性能分析结果。
8. 查看网络请求：在开发者工具中，点击“网络”按钮，可以查看当前页面的网络请求情况。
9. 查看CSS样式：在开发者工具中，点击“样式”按钮，可以查看当前页面的CSS样式。
10. 查看JavaScript代码：在开发者工具中，点击“源代码”按钮，可以查看当前页面的JavaScript代码。