怎么查看网页的源代码 浏览器F12查看HTML代码基础【教学】

如果您希望了解网页的结构与内容构成，最直接的方式是查看其原始HTML代码。以下是几种在主流浏览器中快速打开并浏览网页源代码的基础方法：

一、使用F12开发者工具查看实时HTML结构

F12键可直接唤出浏览器内置的开发者工具，其中“元素”（Elements）面板显示的是经过浏览器解析并可能被JavaScript动态修改后的当前DOM树，适合观察实际渲染效果。

1、打开任意网页，确保该页面已完全加载。

2、按下键盘上的 F12 键（Windows/Linux）或 Option + Command + I（macOS）。

立即学习“前端免费学习笔记（深入）”；

3、在顶部标签栏中点击 “元素” 选项卡。

4、此时左侧区域即显示当前页面的嵌套HTML结构，支持鼠标悬停高亮对应页面区域，右键可复制节点或编辑属性。

二、通过右键菜单选择“查看网页源代码”

该方式调用的是服务器返回的原始HTML文件，未受客户端脚本影响，反映的是初始HTTP响应体内容，适用于分析静态结构或SEO基础信息。

1、在目标网页任意空白处单击鼠标右键。

2、从弹出菜单中选择 “查看网页源代码”（Chrome、Edge）或 “查看源代码”（Firefox）。

3、浏览器将新开一个标签页，以纯文本形式展示完整的HTML源码，支持Ctrl+F（Windows/Linux）或Command+F（macOS）搜索关键词。

三、在地址栏输入view-source协议前缀

这是一种无需交互操作即可强制触发源码视图的快捷协议方式，适用于无法右键或F12失效的受限环境（如部分Kiosk模式）。

1、确保当前标签页处于目标网页。

2、将地址栏原有URL全选删除，输入 view-source: 前缀。

3、在该前缀后粘贴完整网页URL（例如：view-source:https://example.com）。

4、按回车键执行，新页面将以只读文本格式呈现原始HTML源代码。

四、使用浏览器扩展增强源码阅读体验

原生查看器仅提供基础文本显示，安装轻量级扩展可添加语法高亮、折叠节点、实时搜索及格式化功能，提升可读性与分析效率。

1、访问Chrome网上应用店或Firefox附加组件官网，搜索关键词 “HTML Viewer” 或 “Pretty Print HTML”。

2、选择评分高于4.5且安装量超10万的扩展（如 “Web Developer” 或 “HTML Preview”）。

3、点击“添加至Chrome”或“添加到Firefox”，确认权限授权。

4、刷新当前网页后，点击工具栏新增图标，即可启用带高亮与缩进的结构化源码视图。