1. 打开开发者工具：
- 在 google chrome 浏览器中，点击地址栏右侧的三个点图标（或按 `f12` 键），打开开发者工具。
2. 控制台：
- 在控制台选项卡中，你可以查看到当前页面的所有 console.log 输出，这对于调试非常有帮助。
3. 断点调试：
- 在你想要调试的代码行上点击，然后选择“设置断点”来打断执行。这样当你运行到该行时，程序会暂停并显示当前的变量值。
4. 单步执行：
- 在控制台选项卡中，选择“单步执行”按钮（一个绿色的箭头图标）。这将使程序逐行执行，你可以在控制台中看到每一步的执行结果。
5. 查看元素：
- 在“元素”选项卡中，你可以通过类型、id、class 或其他属性来查找页面上的特定元素。例如，输入“div”，然后选择“全部匹配”来找到所有 div 元素。
6. 查看网络请求：
- 在“网络”选项卡中，你可以查看当前页面的所有网络请求。这有助于了解页面加载过程中发生了什么。
7. 性能分析：
- 在“性能”选项卡中，你可以查看页面的性能指标，如首次绘制时间、重排次数等。这对于优化页面性能非常有用。
8. css 选择器：
- 在“元素”选项卡中，你可以使用 css 选择器来查找页面上的特定元素。例如，输入“body * { color: red; }”来查找所有 body 元素的颜色都为红色的元素。
9. javascript 控制台：
- 在“javascript”选项卡中，你可以查看当前页面的 javascript 控制台输出。这对于调试 javascript 代码非常有用。
10. console.log 输出：
- 在“控制台”选项卡中，你可以使用 console.log 函数来输出信息。例如，输入 `console.log("Hello, world!")`，然后在控制台中查看输出结果。
11. 快捷键：
- 熟悉常用的快捷键，如 `ctrl + shift + p` 用于打开命令面板，`ctrl + shift + r` 用于刷新页面等。
12. 自定义快捷键：
- 你还可以自定义开发者工具的快捷键，以便于快速访问常用的功能。
通过以上技巧和实战操作，你可以更有效地使用谷歌浏览器的开发者工具进行网页调试和开发工作。
