Google浏览器的网页调试与开发操作教程如下：
1. 打开Google浏览器，点击右上角的菜单按钮（三个垂直点），然后选择“设置”选项。
2. 在设置页面中，点击左侧的“开发者工具”（DevTools）选项。
3. 在开发者工具中，点击顶部的“Console”选项卡，然后在右侧的空白区域点击鼠标右键，选择“新建控制台”。
4. 在新的控制台中，输入以下代码来测试网页的功能：
javascript
// 获取元素
var element = document.getElementById("myElement");
console.log(element);
// 修改元素属性
var element = document.getElementById("myElement");
element.style.color = "red";
console.log(element);

5. 在控制台中，你可以看到网页元素的实时变化和输出结果。
6. 如果你需要调试JavaScript代码，可以在控制台中输入`console.log()`函数，将变量或表达式打印到控制台。例如：
javascript
var a = 1;
console.log(a); // 输出：1

7. 如果你想查看网页的源代码，可以在控制台中输入`document.body.innerHTML`，然后按回车键。这将显示网页的HTML代码。
8. 如果你想查看网页的CSS样式，可以在控制台中输入`document.body.style`，然后按回车键。这将显示网页的CSS样式。
9. 如果你想查看网页的JavaScript代码，可以在控制台中输入`document.body.innerHTML`，然后按回车键。这将显示网页的JavaScript代码。
10. 当你完成调试后，可以关闭开发者工具。在浏览器右上角的菜单按钮中，找到并点击“开发者工具”，然后点击左上角的关闭按钮。