谷歌浏览器的网页调试插件是开发者工具，它提供了许多有用的功能，可以帮助你更好地理解和调试网页。以下是使用谷歌浏览器网页调试插件的教程：
1. 打开谷歌浏览器，点击右上角的菜单按钮（三个垂直点），然后选择“更多工具”>“开发者工具”。
2. 在开发者工具中，你可以看到两个主要的部分：左侧的代码视图和右侧的控制台。
3. 在左侧的代码视图中，你可以查看和编辑网页的源代码。点击“审查元素”按钮，然后选择你想要查看或编辑的元素。
4. 在右侧的控制台，你可以查看和修改网页的响应状态、网络请求、性能数据等。点击“控制台”按钮，然后输入你想要查看或修改的数据。
5. 如果你想要在网页上显示调试信息，可以点击“设置断点”按钮，然后在你想要停止的地方点击。这将暂停脚本的执行，并显示一个红色的圆圈。
6. 当你需要调试某个特定的代码片段时，可以在代码视图中右键点击该片段，然后选择“插入断点”或“取消断点”。
7. 当你需要查看网页的加载时间、渲染时间等性能数据时，可以在控制台中输入`console.time()`和`console.timeEnd()`命令。例如，要查看页面加载时间，可以输入`console.time('load')`，然后刷新页面。
8. 当你需要查看网页的DOM结构时，可以在控制台中输入`document.querySelector('your-selector')`来获取指定元素的引用。
9. 当你需要查看网页的网络请求时，可以在控制台中输入`fetch(url)`来获取指定URL的网络请求。
10. 当你需要查看网页的CSS样式时，可以在控制台中输入`window.getComputedStyle(element)`来获取指定元素的计算样式。
以上就是使用谷歌浏览器网页调试插件的基本教程。希望对你有所帮助！