如何查看网页后台代码

按一下F12，何查网页瞬间被撕开。看网左边是页后渲染后的页面，右边密密麻麻的台代代码堆里，躺着这个网页的何查骨架和内脏。别慌，看网那不是页后给你看的，是台代给浏览器看的。你真正要找的何查“后台代码”，其实藏在一个叫“查看源代码”的看网地方。

右键点页面空白处，页后菜单里有个“查看页面源代码”。台代点开它，何查新标签页会吐出一整屏纯文本，看网那是页后服务器发给浏览器的原始HTML。你看到的每个字、每张图、每个按钮，都对应着这里的一串标签。比如你正在读的这段文字，在源代码里是被<p>包裹的——<p>就是“段落”的意思，结尾的</p>是关掉这个段落。就这么简单，没有魔法。

但真正的“后台代码”根本不在这。HTML只是前台装修，是演员的台词。真正的后台，是那个处理你登录、下单、发评论的程序，它运行在别人的服务器上，你永远看不到。你能看到的只有前台代码——HTML负责结构，CSS负责打扮，JavaScript负责耍小聪明。三者混在一起，构成了你眼前这个花花世界。

拿个真实例子说。我常逛的一个独立博客，页面底部有个“站长统计”的图标。右键查看源代码，搜“统计”两个字，立刻定位到一行<script>标签，里面引用了某个第三方统计服务的地址。这就是那个博客在偷偷记录访问者的证据——不是恶意，是站长想知道每天有多少人来看他写的文章。你看，源代码会暴露很多表面看不见的小动作。

手机上怎么看？iPhone的Safari没这功能，得装个捷径或者用第三方浏览器。安卓的Chrome倒是直接，地址栏输入view-source:，后面接网址，比如view-source:https://example.com，回车就出来了。不过手机屏幕小，看代码很痛苦，建议还是电脑上操作。

还有一种更高级的玩法：开发者工具里的“Sources”面板。F12打开后切到那个标签，你会看到网页加载的所有文件——HTML、CSS、JavaScript，还有图片和字体。点开任何一个JS文件，里面可能是压缩成一行的乱码，也可能是格式清晰的源码。有些网站故意把代码混淆，变量名全改成a、b、c，那是在防你抄它。但多数时候，你只是好奇，看看人家怎么写轮播图的。

别指望看几眼代码就能学会建站。我刚开始折腾时，对着别人网站的源码研究了三个小时，最后只学会了怎么改自己博客的背景色。但那种“原来如此”的瞬间很值——当你看到某个炫酷的导航栏效果，背后不过是十几行CSS加一个监听滚动的JS函数，你会觉得互联网没那么神秘了。

最后提醒一句：看代码归看代码，别拿去干坏事。偷别人网站的图片、扒人家的页面结构做克隆站，这些事不光彩，也容易被追究。你只是好奇，那就大大方方地看，看完关掉，该干嘛干嘛。