打开谷歌浏览器，在页面右上角找到三个竖点图标并点击，选择“更多工具”里的“开发者工具”，或者直接用快捷键Ctrl+Shift+I（Windows、Linux）/Command+Option+I（Mac）调出开发者工具。
进入开发者工具界面后，上方有一排功能选项卡，如“Elements”（元素）、“Console”（控制台）、“Sources”（源代码）等，这里主要用到“Elements”。在“Elements”选项卡下，能看到当前网页的HTML结构，可点击元素查看其样式、属性等，方便定位网页元素进行调试。
若要修改元素样式，选中对应元素后，在右侧“Styles”（样式）面板中，能直接编辑CSS属性值，比如修改颜色、字体大小等，修改后网页会实时呈现效果。
对于脚本调试，切换到“Console”（控制台）选项卡，在这里输入JavaScript代码片段，按回车就能执行，可用于测试函数、查看变量值等，辅助排查脚本逻辑问题。
调试响应式网页时，点击右上角的模拟设备按钮，能切换不同设备屏幕尺寸，查看网页在不同设备下的布局和显示效果，确保网页适配各类终端。
完成调试后，再次点击右上角的关闭按钮，即可退出开发者模式，继续正常浏览网页。