详情介绍
1. 启用开发者模式：
- 打开谷歌浏览器并访问你想要调试的网站。
- 点击浏览器右上角的三个点图标，选择“更多工具”。
- 在弹出的菜单中，找到并点击“开发者工具”（或“inspector”）。
- 在开发者工具窗口中，你会看到几个选项卡，包括“控制台”、“元素”、“网络”等。
- 点击“控制台”标签页，然后点击“开启开发者模式”按钮。
2. 设置断点：
- 在开发者工具的控制台中，点击“断点”按钮（通常表示为一个红色的圆圈），以设置断点。
- 当你的代码执行到这个位置时，它会暂停执行，并在控制台中显示相关信息。
3. 查看源代码：
- 在开发者工具的控制台中，你可以查看当前页面的源代码。
- 这可以帮助你理解网页是如何构建的，以及如何修改代码来达到预期的效果。
4. 单步执行代码：
- 在开发者工具的控制台中，点击“step over”按钮（通常表示为一个绿色的箭头），以单步执行代码。
- 这将使代码逐行执行，而不会打断整个脚本的执行。
5. 查看变量和对象：
- 在开发者工具的控制台中，可以查看当前页面上的所有变量和对象。
- 这对于调试复杂的代码逻辑非常有用，特别是当涉及到变量赋值、条件判断等操作时。
6. 调试函数：
- 在开发者工具的控制台中，可以调用任何你想要调试的函数。
- 输入函数名和参数，然后按回车键运行函数。
- 控制台会显示函数的输出结果，以及任何抛出的错误。
7. 查看网络请求：
- 在开发者工具的网络标签页中，可以查看当前页面的所有网络请求。
- 这可以帮助你了解网页是如何与服务器交互的，以及如何处理不同的HTTP状态码和响应头。
8. 禁用自动刷新：
- 在某些情况下，你可能不希望开发者工具自动刷新页面。
- 在开发者工具的控制台中，点击“停止开发”按钮（通常表示为一个灰色的灯泡图标），以禁用自动刷新。
9. 保存和导出：
- 在开发者工具的控制台中，你可以保存当前的代码片段或整个文件。
- 你还可以将代码导出为HTML文件，以便在其他浏览器或设备上查看和调试。
10. 使用快捷键：
- 熟悉并利用开发者工具中的快捷键，可以提高你的工作效率。
- 例如，按下`ctrl+shift+b`可以在开发者工具中快速打开控制台。
通过以上技巧，你可以更有效地使用谷歌浏览器的开发者模式进行网页调试和开发。
