查看网站源代码

右键点击网页空白处，网站菜单里有一项“查看页面源代码”。源代快捷键是网站Ctrl+U。就这么简单一步，源代浏览器会弹出一个新标签页，网站里面密密麻麻全是源代英文和符号。很多人到这一步就关了——看不懂，网站跟我没关系。源代

但你天天在浏览器里看到的网站一切，字体、源代颜色、网站图片位置、源代按钮圆角，网站全是源代这些代码渲染出来的。它不是网站后台数据库，不是服务器配置，就是浏览器收到的原始文本。网站服务器把这份文本发给你的电脑，浏览器读完它，才画出你眼前的页面。

我第一次认真看源码，是因为一个网页上的文字怎么都复制不了。选中、右键、复制，出来的全是乱码。打开源码一看，那段文字根本不在HTML里，是JavaScript后面拼上去的。浏览器里看到的和源码里写的，有时候不是一回事。

源码长什么样？开头通常是<!DOCTYPE html>，告诉浏览器“我是HTML5”。往下是<head>区，放标题、编码声明、CSS文件链接、统计脚本。你在标签页上看到的标题，就藏在<title>标签里。再往下是<body>，页面真正的内容都在这儿。

拿一个新闻网站举例。你在页面上读到“某地今日暴雨”，源码里可能是<h1>某地今日暴雨</h1>。图片对应<img src="...">，链接对应<a href="...">。结构清晰，像搭积木。但现在的网站很少这么干净。你打开一个电商首页的源码，几千行里夹杂着大量<div>嵌套，class名像a8s7d6f这种随机字符串——那是构建工具自动生成的，人根本没法读。

有个挺有意思的用法：查价格。有些网站搞“大数据杀熟”，不同账号看到不同价。你打开源码搜索“price”或“价格”，有时候能翻出页面没显示出来的原始数据。我试过一次，页面上标价199，源码里有个JSON字段写着“originalPrice: 159”。当然，不是每个网站都这么马虎。

另一个场景是找视频地址。网页播放器里的视频，右键没有“另存为”。打开源码，搜索.mp4或.m3u8，大概率能直接找到文件链接。我帮朋友下过一个讲座视频，源码里藏着一串带token的地址，复制到下载工具里就能用。不过现在很多平台加密了，源码里只剩一堆混淆过的JS，得靠开发者工具抓网络请求才行。

说到开发者工具，F12打开的那个面板比纯源码视图好用得多。左边是实时DOM树，你鼠标悬停哪一行，页面上对应元素就高亮。右边能改CSS、看网络请求、断点调试JS。源码视图是静态快照，开发者工具是活体解剖。想认真研究一个网站怎么搭的，F12比Ctrl+U更值得花时间。

有人觉得看源码是程序员的事。其实不是。你写公众号要排版，看别人怎么用<section>和<style>控制间距，直接抄结构就行。你做SEO，看竞品标题怎么写、描述怎么填、H1标签用没用对，源码里一目了然。甚至你只是想保存一个网页的干净文字，源码里把标签一删，剩下的就是纯文本。

当然，看源码也有边界。扒别人代码改改就上线，那是侵权。绕过付费墙拿内容，那是违规。但只是看，只是学，只是确认一下浏览器到底收到了什么——这件事没有任何门槛，也不需要任何人批准。Ctrl+U就在那儿，按不按，随你。