1. 打开开发者工具：在谷歌浏览器的右上角，点击三个垂直点（或按F12键），然后选择“开发者工具”。
2. 启用断点：在开发者工具中，点击“断点”按钮，然后点击你想要设置断点的代码行。这样，当你的代码执行到这一行时，浏览器会暂停并显示一个红色的圆圈。
3. 查看控制台：在开发者工具中，点击“控制台”按钮，你可以看到当前页面的所有错误信息。这对于调试JavaScript代码非常有用。
4. 查看元素：在开发者工具中，点击“元素”按钮，你可以查看当前页面的所有元素。这对于调试CSS样式或者定位元素非常有用。
5. 查看网络：在开发者工具中，点击“网络”按钮，你可以查看当前页面的所有网络请求。这对于调试服务器端代码或者检查Ajax请求非常有用。
6. 查看性能：在开发者工具中，点击“性能”按钮，你可以查看当前页面的性能分析。这对于优化网页性能非常有用。
7. 查看安全：在开发者工具中，点击“安全”按钮，你可以查看当前页面的安全信息。这对于检测潜在的安全问题非常有用。
8. 查看资源：在开发者工具中，点击“资源”按钮，你可以查看当前页面的所有资源。这对于调试CSS样式或者定位资源非常有用。
9. 查看DOM：在开发者工具中，点击“DOM”按钮，你可以查看当前页面的所有DOM元素。这对于调试JavaScript代码或者查找元素非常有用。
10. 查看样式：在开发者工具中，点击“样式”按钮，你可以查看当前页面的所有样式。这对于调试CSS样式或者定位样式非常有用。
