如何查看网页源代码全部内容

浏览器里按下F12，何查开发者工具打开，看网默认停在Elements面板——这是页源绝大多数人“看源代码”的方式。但严格说，代码你看到的全部不是源代码，是内容经过浏览器解析后的DOM树。真正的何查源代码，是看网服务器发过来的那串原始字符，一个字节都没改过的页源那种。

想看那个，代码方法很简单：在页面空白处点右键，全部选“查看网页源代码”，内容或者直接按Ctrl+U（Mac上是何查Option+Command+U）。新标签页会打开，看网里面是页源纯文本，带语法高亮。这个页面里的内容，就是服务器响应体的原样拷贝。CSS、JavaScript、HTML标签，全都摊开在你面前，一个都跑不掉。

但有个坑——很多网站是动态渲染的。比如你打开一个React或Vue写的单页应用，按Ctrl+U看到的可能只是一个空壳，里面就一行<div id="root"></div>加几个script标签。真正的页面内容，是JavaScript在浏览器里跑完之后才生成的。这时候你看源代码没用，得回到F12的Elements面板，那个才是渲染后的真实DOM。换句话说，静态页面看Ctrl+U，动态页面看F12，两种工具干的是不同的活。

还有人问，为什么我右键没有“查看源代码”选项？多半是网站屏蔽了右键菜单。这时候别慌，地址栏前面加view-source:前缀，回车。比如你想看example.com的源码，就在地址栏输入view-source:https://example.com，照样打开。这招在Chrome、Edge、Firefox都好使，算是个官方后门。

如果你需要把源代码存下来慢慢研究，别用鼠标全选复制——文件大了会卡死。直接在源代码页面按Ctrl+S另存为，或者用命令行工具curl抓取：curl https://example.com，输出重定向到文件里，干净利落。Windows用户没有curl的话，用PowerShell的Invoke-WebRequest也行，不过语法稍微绕一点。

还有一类特殊情况：iframe嵌套的页面。你看到的网页里嵌了另一个网页，外层右键看源码，只能看到iframe标签本身，内层内容得点进iframe元素里，再右键查看框架源代码。Chrome里可以按住Ctrl键，鼠标移入iframe区域时点击，就能进入内层页面，然后正常操作。这个细节很多人不知道，遇到嵌套页面时容易懵。

最后说个判断技巧。看源代码时，如果HTML里密密麻麻全是div和span，没有任何语义化标签（header、nav、article这些），大概率是框架生成的。如果源代码里直接能看到文章正文文字，说明是服务端渲染，SEO友好。这两种网站的抓取策略完全不同——前者你得找接口，后者直接解析HTML就行。搞爬虫的朋友应该深有体会。

说到底，查看源代码是基本功，但真正看懂它，需要知道前后端的边界在哪里。浏览器拿到的是已经处理过的资源，而源代码是服务器吐出来的第一口饭。两者之间的差距，就是JavaScript的执行过程——也是现代Web最核心的秘密所在。

本文地址：http://www.79wt.cn/news/1510a1299836.html