如何在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”返回到您的网页。