如何在Google Chrome浏览器中查看HTML源代码

无论您是正在调试网站源代码的网站设计师,还是只是对网站代码的外观感到好奇,都可以在Google Chrome浏览器中查看HTML源代码。有两种查看HTML源代码的方法:“查看源代码”和“使用开发人员工具检查”。

使用查看页面源查看源

启动Chrome并跳至您要查看HTML源代码的网页。右键点击页面,然后点击“查看页面源代码”,或按Ctrl + U,在新标签页中查看页面的源代码。

随即打开一个新选项卡,并完全扩展和无格式显示该网页的所有HTML。

如果要在HTML源代码中查找特定元素或部分,则使用View Source既繁琐又麻烦,尤其是在页面使用大量JavaScript和CSS的情况下。

使用开发人员工具检查源

此方法使用Chrome中的“开发人员工具”窗格,是查看源代码的一种更为简洁的方法。由于采用了额外的格式设置以及可以折叠您不希望看到的元素的功能,因此HTML在此处更易于阅读。

打开Chrome并转到您要检查的页面;然后按Ctrl + Shift + i。停靠的窗格将在您正在查看的网页旁打开。

单击元素旁边的灰色小箭头,以将其进一步扩展。

如果您不想默认查看整个页面的代码,而是查看HTML中的特定元素,请右键单击页面上的该空间,然后单击“检查”。

这次打开窗格时,它将直接转到包含您单击的元素的代码部分。

如果要更改停靠位置,可以将其移至底部,向左,向右,甚至取消停靠在单独的窗口中。单击菜单图标(三个点),然后分别选择将其停靠在一个单独的窗口中,停靠在左侧,停靠在底部或停靠在右侧。

这里的所有都是它的。查看完代码后,关闭“查看源代码”选项卡或单击“开发人员工具”窗格中的“ X”以返回到您的网页。


$config[zx-auto] not found$config[zx-overlay] not found