1. 打开开发者工具：在Chrome浏览器的右上角，点击三个垂直点（或按F12键），然后选择“开发者工具”。
2. 设置断点：在开发者工具中，点击左侧的“断点”按钮，然后点击你想要停止代码执行的位置。这样，当代码执行到这个位置时，程序会暂停并显示一个红色的圆圈。
3. 查看控制台：在开发者工具中，点击左侧的“控制台”按钮，然后输入你想要查看的命令。例如，你可以输入`console.log('Hello, World!')`来查看控制台输出。
4. 查看元素：在开发者工具中，点击左侧的“Elements”按钮，然后输入你想要查看的元素的CSS选择器。例如，你可以输入`myElement`来查看名为`myElement`的元素。
5. 调试代码：在开发者工具中，点击左侧的“Sources”按钮，然后点击你想要调试的代码行。这样，你就可以逐行查看和修改代码了。
6. 查看性能分析：在开发者工具中，点击左侧的“Performance”按钮，然后点击你想要查看的性能分析。这样，你就可以查看页面加载时间、渲染时间等性能指标了。
7. 查看网络请求：在开发者工具中，点击左侧的“Network”按钮，然后点击你想要查看的网络请求。这样，你就可以查看页面的HTTP/HTTPS请求、DNS请求等网络活动了。
8. 查看资源文件：在开发者工具中，点击左侧的“Resources”按钮，然后点击你想要查看的资源文件。这样，你就可以查看HTML、CSS、JavaScript等资源文件的内容了。
9. 查看错误信息：在开发者工具中，点击左侧的“Console”按钮，然后点击你想要查看的错误信息。这样，你就可以查看浏览器抛出的错误信息了。
10. 保存和关闭开发者工具：在开发者工具窗口的右下角，点击“Save All Changes”按钮，然后点击“Close All Windows”按钮来保存并关闭所有打开的开发者工具窗口。