Web页面「查看页面源代码」vs「开发者工具 – 检查」有什么区别？

前言🔖

这两个功能看似都能看代码，但本质、用途、看到的内容完全不同，是前端开发最基础的两个核心工具，但是看到的Html代码完全不一样呢。

以微信小程序公众平台举个例子

🔹鼠标右键->查看页面源代码

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- <meta name="referrer" content="origin-when-crossorigin"> -->
    <meta charset="utf-8">
    <meta name="HandheldFriendly" content="true">
    <script type="text/javascript">
        //上报测速 --初始点
        window._points = [+new Date()];
        function loadError(type) {
            var key = type === 'js' ? 2 : 1;
            (new Image()).src = location.protocol + "//mp.weixin.qq.com/mp/jsmonitor?idkey=65723_" + key + "_1&r=" + Math.random();
        }
    </script>
    <link href="https://res.wx.qq.com/wxopenres/htmledition/images/favicon324c17f2.ico" rel="Shortcut Icon">
    <link rel="apple-touch-icon" sizes="120x120"
        href="<!--faviconUrl-->">
    <link rel="apple-touch-icon" sizes="120x120"
        href="<!--faviconUrl-->">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- badjs fix key inline-->
    <title>小程序</title>
    <!--#0002#-->
    <!--%0002%-->
<link href="https://res.wx.qq.com/mmbizwxampnodelogicsvr_node/dist/0.common.0af18ff00a942450a548.css" rel="stylesheet"><link href="https://res.wx.qq.com/mmbizwxampnodelogicsvr_node/dist/43.common.0af18ff00a942450a548.css" rel="stylesheet"></head>

<body>
    <script>
        window.__INITIAL_STATE__ = {
            userInfo: 
            wujieConfig: "<!--wujieConfig-->",
        }
    </script>
    <div id="app"></div>
    <!--thirdScripts-->
    <script src="https://captcha.gtimg.com/TCaptcha.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/mmbizwxampnodelogicsvr_node/dist/styles.6161aa8e537d673a1d74.js"></script><script type="text/javascript" src="https://res.wx.qq.com/mmbizwxampnodelogicsvr_node/dist/app.24efce2d94b9923f2b2d.js"></script><script type="text/javascript" src="https://res.wx.qq.com/mmbizwxampnodelogicsvr_node/dist/manifest.53e341e723c45e75b7c2.js"></script><script type="text/javascript" src="https://res.wx.qq.com/mmbizwxampnodelogicsvr_node/dist/vendor.cc1cebdb96a571a7b598.js"></script></body>

</html>

可以发现看到的代码很少，只有 head 和 body 这几个基础标签。

你的代码里有 <div id="app"></div>：这是典型的 Vue.js 单页应用（SPA）的入口。
真正的内容去哪了？真正的版本管理表格、按钮、文字，其实并没有直接写在这个 HTML 文件里。
原理：浏览器加载这个 HTML 后，会通过 <script> 标签加载后面的 app.24efce2d...js 文件。这段 JS 代码会在浏览器运行时，动态把页面内容生成到 <div id="app"> 里面。
现象：右键 “查看源代码” 只能看到打包前的 HTML 骨架，看不到动态渲染的内容。

🔹鼠标右键->检查（开发者工具）

可以看到检查 (Inspect)能看到html页面很多的内容

功能	本质	看到的内容
右键 → 查看页面源代码 (View Page Source)	服务器返回的「原始 HTML 文件」	浏览器第一次请求服务器时，拿到的最原始、未经过任何修改的 HTML 代码
右键 → 检查 (Inspect) / F12 → Elements 面板	浏览器渲染后的「实时 DOM 树」	浏览器加载、执行 JS、修改 DOM 后，最终渲染在页面上的完整 HTML 结构

逐点深度对比🔖

🔹1.内容来源不同

✅ 查看页面源代码

来源：直接从服务器下载的原始 HTML 文件，100% 和服务器返回的一致，没有任何修改
你刚才看到的内容：只有<!DOCTYPE html>、<head>、<div id="app"></div>、几个<script>标签，完全没有页面上的「版本管理」「线上版本」这些 DOM 元素
特点：静态、不变，无论页面怎么点击、JS 怎么运行，再次打开都是服务器最初返回的样子

✅ 检查（Elements 面板）

来源：浏览器实时渲染的 DOM 树，是 JS 执行、DOM 修改、样式渲染后的最终结果
你会看到的内容：完整的页面结构，包括<div class="version-management">、表格、按钮、输入框等所有你在页面上看到的元素，甚至能看到 JS 动态生成的每一行 DOM
特点：动态、实时，页面每一次点击、数据更新，Elements 面板都会同步变化

🔹2. 执行时机不同

✅ 查看页面源代码

执行时机：浏览器第一次请求页面时，服务器返回 HTML 后，就固定了
后续操作不影响：哪怕页面用 Vue/React 渲染了 100 个组件、修改了 100 次 DOM，源代码永远是最初的那一份

✅ 检查（Elements 面板）

执行时机：页面加载完成后，持续实时更新
全程同步页面：页面加载、JS 执行、DOM 修改、样式变化，Elements 面板会实时同步，你甚至能直接在面板里修改 DOM、改样式，页面会立刻生效

🔹3. 用途完全不同

✅ 查看页面源代码的适用场景

排查服务器端渲染问题：比如确认服务器是否正确返回了 HTML、有没有注入错误
查看初始状态的 meta 标签、SEO 信息：比如title、description、og标签，这些是服务器直出的
查看初始加载的 JS/CSS 文件：确认页面引入了哪些资源、有没有加载错误
你刚才的微信后台：只能用它看页面的「骨架」，看不到实际内容

✅ 检查（Elements 面板）的适用场景（99% 的前端调试都用它）

查看完整的页面结构：找到页面上某个按钮 / 表格对应的 DOM 元素
调试样式：直接修改 CSS，实时看到页面样式变化，不用改代码刷新
调试 JS：配合 Console 面板，查看 JS 执行后的 DOM 变化、断点调试
排查动态渲染问题：比如 Vue/React 渲染异常、数据没渲染出来，直接看 Elements 里的 DOM 结构
你刚才的微信后台：只有用它才能看到「版本管理」页面的完整 DOM、样式和组件

🔹4. 结合你刚才的页面举个最直观的例子

你刚才的微信后台页面，是典型的Vue 单页应用 (SPA)：

查看页面源代码：只能看到<div id="app"></div>这个空容器，因为服务器只返回了这个骨架，真正的内容是 JS 动态渲染的
检查 (Elements 面板)：点开<div id="app">，能看到里面完整的页面结构，包括「版本管理」标题、表格、按钮、所有你在页面上看到的元素，甚至能看到 JS 动态生成的每一行 DOM

补充：其他关键区别🔖

🔹1. 能否修改页面

查看页面源代码：只能看，不能改，修改了也不会影响页面，因为它只是一个静态文件的查看器
检查 (Elements 面板)：可以直接修改 DOM、CSS，修改后页面会立刻生效（刷新后会恢复，因为是临时修改）

🔹2. 能否看到 JS 执行后的内容

查看页面源代码：完全看不到，JS 执行后的 DOM 修改不会体现在源代码里
检查 (Elements 面板)：实时同步，JS 每一次修改 DOM，都会立刻在 Elements 里显示

🔹3. 快捷键（Chrome 浏览器）

查看页面源代码：Ctrl + U（Windows）/ Cmd + U（Mac）
检查（打开开发者工具）：F12 或 Ctrl + Shift + I（Windows）/ Cmd + Opt + I（Mac）

补充：为什么现代前端页面（微信后台、Vue/React 项目）用「查看源代码」看不到内容？

因为现代前端都是客户端渲染 (CSR)：

服务器只返回一个空的 HTML 骨架（就是你看到的源代码）
浏览器加载 JS 后，由 JS 在客户端动态生成 DOM、渲染页面
所以「查看源代码」只能看到骨架，看不到实际内容，必须用「检查」看最终渲染的 DOM

如果架构是服务端渲染 (SSR)：

服务器直接把完整的 HTML（包含所有表格、表单元素）返回给浏览器
浏览器直接渲染，不需要 JS 生成 DOM
所以「查看源代码」就能看到完整的页面内容

92IT

Just love IT.

Web页面「查看页面源代码」vs「开发者工具 – 检查」有什么区别？