1. 使用开发者工具：首先，你需要在Chrome浏览器中打开开发者工具。你可以通过点击菜单栏的“More Tools” > “Developer Tools”来打开它。
2. 设置断点：当你在代码中设置了断点，你可以在开发者工具中查看和调试你的代码。你可以通过点击“Sources”面板中的“Breakpoints”来添加断点。
3. 查看控制台：在开发者工具中，你可以查看控制台，这里列出了所有在当前页面上运行的JavaScript语句。你可以通过点击“Console”面板来查看控制台。
4. 查看元素：在开发者工具中，你可以查看当前页面上的所有元素。你可以通过点击“Elements”面板来查看元素。
5. 查看网络请求：在开发者工具中，你可以查看当前页面的网络请求。你可以通过点击“Network”面板来查看网络请求。
6. 查看性能分析：在开发者工具中，你可以查看当前页面的性能分析。你可以通过点击“Performance”面板来查看性能分析。
7. 查看CSS样式：在开发者工具中，你可以查看当前页面的CSS样式。你可以通过点击“Styles”面板来查看CSS样式。
8. 查看HTML结构：在开发者工具中，你可以查看当前页面的HTML结构。你可以通过点击“Sources”面板中的“HTML”来查看HTML结构。
9. 查看JavaScript代码：在开发者工具中，你可以查看当前页面的JavaScript代码。你可以通过点击“Sources”面板中的“JavaScript”来查看JavaScript代码。
10. 查看DOM树：在开发者工具中，你可以查看当前页面的DOM树。你可以通过点击“Sources”面板中的“DOM”来查看DOM树。