如何查看网站源码

浏览器地址栏里输入一串网址，何查页面加载出来，看网你看到的站源只是结果。真正藏在背后的何查，是看网那几百行甚至几千行的HTML、CSS和JavaScript。站源想看这些代码，何查不需要什么特殊权限，看网浏览器早就给你留好了后门。站源

在页面空白处点右键，何查菜单里选“查看页面源代码”，看网一个新标签页就打开了。站源里面密密麻麻的何查标签、属性、看网文本，站源这就是这个网页的骨架。我第一次这么干的时候，以为会看到什么惊天秘密，结果满屏的<div>和<span>，看得人眼睛发直。但别急着关掉，这堆看似枯燥的东西里，藏着不少有意思的信息。

比如，你打开一个电商网站，直接看源码，能找到它的商品数据是从哪个接口拉取的。搜索ajax或者api字样，往往能发现一些带.json结尾的地址。把这些地址直接粘到浏览器地址栏里访问，运气好的话，能拿到比页面上更干净的结构化数据。这事儿在爬虫圈里叫“看接口”，比用工具抓包省事多了。

再比如，有些网页的标题、描述、关键词都写在<head>标签里的<meta>属性中。做SEO的人天天跟这个打交道，但你普通用户看了也能明白——原来这个网站想让你搜索什么词的时候找到它。有些粗心的开发者甚至会把数据库连接信息、后台登录地址直接注释在源码里，这不夸张，我见过不止一次。

手机上看源码稍微麻烦点，因为没右键。但有个土办法：在网址前面加上view-source:前缀，回车，照样能看到。比如你想看example.com的源码，就在地址栏输入view-source:example.com。这招在电脑上同样管用，比右键还快。

嫌原生源码排版太乱？按F12打开开发者工具，切到“Elements”标签页，那儿的代码是格式化好的，还能实时高亮。你鼠标在代码上移动，页面上对应的元素就会被框选出来。这功能我天天用，改样式、调布局、看动态加载的内容，全在这儿完成。有人说这不算“查看源码”，算“调试”，但本质都一样——把网页扒开看内脏。

看源码这事儿，门槛低到几乎没有。不需要会编程，不需要装软件，一个浏览器全搞定。但打开之后能看出多少门道，就看你愿不愿意一行行往下读了。有人看了十年源码还是只会找<a>标签里的链接，有人看了一个月就能仿出整个页面。差别不在智商，在耐心。

最后说个我的习惯。看到设计漂亮的页面，我第一反应不是截图，而是打开源码看它的CSS结构。那些用grid布局还是flex布局，间距用的是px还是rem，颜色直接写死在样式里还是用了CSS变量——这些小细节比视觉效果本身更能说明问题。写代码的人当时怎么想的，全在代码里写着呢。

下次再遇到一个让你好奇的网页，别光顾着看内容。按一下Ctrl+U，看看它底下埋着什么。