打开谷歌浏览器，在页面右上角找到三个竖点图标并点击，选择“更多工具”里的“开发者工具”选项。此时，屏幕下方会出现一个面板，这就是开发者工具的操作界面。
在开发者工具界面中，找到“元素”这个标签页并点击进入。在这里，你能看到当前网页的 HTML 结构，类似一个树状图。通过鼠标点击页面上的不同元素，对应的 HTML 代码就会在开发者工具里高亮显示，方便你快速定位到想要调试的部分。
接下来，切换到“样式”标签页。这个页面会展示出当前所选元素的 CSS 样式信息。你可以看到各种属性和值，比如颜色、字体大小、边距等。如果你想修改某个样式，直接在对应的属性值上进行编辑即可。编辑完成后，页面上的相应元素会立即呈现出修改后的效果，你可以直观地看到变化。
若想添加新的 CSS 样式规则，可以在“样式”标签页的右下角找到“新建样式规则”按钮并点击。在弹出的对话框中，输入选择器名称，然后定义你想要的样式属性和值。例如，你可以设定某个特定类的元素背景颜色为红色，或者改变某一标签的文字对齐方式等。
调试过程中，如果需要查看元素在不同屏幕尺寸下的表现，可以点击开发者工具左上角的设备图标，切换到不同的设备模拟模式，如手机、平板等，以便更好地优化响应式设计。
另外，还可以使用“控制台”标签页来输出一些调试信息或执行 JavaScript 代码，辅助 CSS 样式的调试工作。例如，你可以在控制台中输入一些与样式相关的 JavaScript 语句，来动态改变元素的样式或获取样式信息，进一步深入了解 CSS 样式在页面中的运行情况。