首先，打开 Google Chrome 浏览器，访问你想要调试的网页。然后，通过点击浏览器右上角的菜单按钮，选择“更多工具”选项，再点击“开发者工具”，即可打开开发者工具窗口。或者，你也可以使用快捷键 Ctrl+Shift+I（Windows/Linux）或 Command+Option+I（Mac）直接打开开发者工具。
开发者工具窗口打开后，你会看到多个面板，其中“Elements”面板是用于查看和编辑网页的 HTML 和 CSS 代码的主要区域。在“Elements”面板中，你可以看到当前网页的 HTML 结构，以树状图的形式展示。你可以通过点击相应的元素来选中它，然后在右侧的区域查看和修改它的 HTML 代码、CSS 样式以及属性等。
例如，如果你想查看某个特定元素的 HTML 代码，只需在页面上右键点击该元素，然后选择“检查”选项，这样就会直接在“Elements”面板中定位到该元素，并显示其相关的 HTML 代码。你可以对代码进行修改，比如更改标签名、添加或删除属性等，修改后的网页会立即反映出这些变化，方便你实时查看效果。
此外，在“Elements”面板中，你还可以使用一些有用的工具来辅助调试。比如，“箭头光标”工具可以让你像在图像编辑器中一样，直接在页面上点击选择元素；“放大镜”工具则可以放大页面的某个区域，便于查看细节；“颜色取样器”工具可以获取页面上任何颜色的颜色值等。
除了“Elements”面板，开发者工具中的其他面板也可以在调试 HTML 时提供帮助。例如，“Console”面板可以用来输出调试信息、查看错误消息等；“Sources”面板可以查看网页的源代码文件，包括 HTML、CSS 和 JavaScript 文件等。
当你完成对 HTML 代码的调试后，所做的修改仅在你当前的浏览器会话中生效，并不会真正改变网页的源代码。如果你希望保存修改后的代码，需要手动将修改后的代码复制并粘贴到你所使用的开发环境中，然后重新部署网页。
总之，Google Chrome 的开发者工具为调试 HTML 提供了便捷而强大的功能。通过熟悉和使用这些工具，你能够更高效地排查网页中的问题，优化网页的性能和用户体验。无论是专业的前端开发人员还是普通的网页爱好者，都可以从中受益，提升自己的网页开发和调试技能，更好地应对各种网页开发和调试任务，制作出更加优质、美观且功能强大的网页。
