网页源码：查看 HTML 源代码与开发者工具的区别

网页源码是服务器返回给浏览器的 HTML 文本，包括页面结构、样式和脚本引用。查看源码可以了解网页结构、排查 SEO 标签、学习前端写法。

查看方法

• 快捷键：Windows Ctrl+U，macOS Cmd+Option+U
• 地址栏输入 view-source: 加网址，例如 view-source:https://example.com
• 右键—“查看网页源代码”
• 手机浏览器大多不支持，可在电脑上查看

源代码与开发者工具

• “查看源代码”显示服务器最初返回的 HTML
• 开发者工具（F12）的 Elements 面板显示经 JavaScript 修改后的实时 DOM
• 单页应用（React、Vue 等）的源码中可能只有一个空的容器，内容在 DOM 中
• Network 面板可以查看每个资源的请求和响应

常看哪些内容

• <title> 和 <meta name="description">：页面标题与描述
• <link rel="canonical">：规范网址
• <meta name="robots">：是否允许索引
• 结构化数据 <script type="application/ld+json">
• 引用的 CSS、JS 文件

注意

网页源码受著作权保护，可以学习参考，但不要整站复制他人代码和内容。

常见问题

【Ctrl+U 看到的和 F12 看到的为什么不同？】前者是原始 HTML，后者是脚本执行后的实时页面结构。

【能看到网站的后台代码吗？】不能，只能看到发送到浏览器的前端代码。

【手机怎么查看网页源码？】部分浏览器支持 view-source:，更方便的是用电脑查看。

涉及个人信息和账号数据时，请注意保护隐私。

标签： 实用工具