1. 使用开发者工具：在Chrome浏览器中，点击右上角的三个点图标，然后选择“更多工具”>“开发者工具”。
2. 设置断点：在开发者工具中，点击左侧的“Console”选项卡，然后在右侧的代码窗口中，点击你想要断点的行号。这样，当你运行这段代码时，控制台会显示该行的执行结果。
3. 查看变量值：在开发者工具中，点击左侧的“Sources”选项卡，然后在右侧的代码窗口中，点击你想要查看的变量名。这样，你可以看到该变量的值。
4. 查看网络请求：在开发者工具中，点击左侧的“Network”选项卡，然后在右侧的网络面板中，你可以查看到当前页面的所有网络请求。
5. 查看元素属性：在开发者工具中，点击左侧的“Elements”选项卡，然后在右侧的元素面板中，你可以查看到当前页面的所有元素及其属性。
6. 修改CSS样式：在开发者工具中，点击左侧的“Styles”选项卡，然后在右侧的样式面板中，你可以修改当前页面的CSS样式。
7. 调试JavaScript代码：在开发者工具中，点击左侧的“Sources”选项卡，然后在右侧的代码窗口中，你可以查看和修改当前的JavaScript代码。
8. 查看HTML结构：在开发者工具中，点击左侧的“Inspector”选项卡，然后在右侧的HTML面板中，你可以查看到当前页面的HTML结构。
9. 查看性能分析：在开发者工具中，点击左侧的“Performance”选项卡，然后在右侧的性能面板中，你可以查看到当前页面的性能分析数据。
10. 查看内存使用情况：在开发者工具中，点击左侧的“Memory”选项卡，然后在右侧的内存面板中，你可以查看到当前页面的内存使用情况。