如何查看网站的源代码

按F12，何查你看到的看网东西比页面上多得多。上周帮朋友查一个电商网站的源代商品历史价格，页面早改版了，何查但源代码里还留着半年前的看网价格注释。这就是源代看源码的实用之处——它不光是程序员的事。

浏览器打开任意网页，何查右键菜单里有一项“查看网页源代码”（View Page Source）。看网点下去，源代一个新标签页弹出来，何查密密麻麻的看网HTML、CSS、源代JavaScript代码铺满屏幕。何查这是看网最直接的办法。Chrome、源代Edge、Firefox都有这个选项，位置略有不同但大同小异。快捷键是Ctrl+U，Windows和Linux通用，Mac上换成Command+Option+U。记住这个，比翻菜单快。

但右键看到的源码有个问题：它是服务器最初返回的那份。如果页面用JavaScript动态加载了内容——现在大部分网站都这样——你看到的就是个空壳。比如打开一个微博页面，右键看源码，正文区域可能只有一行<div id="app"></div>，什么内容都没有。这时候得用开发者工具。

F12打开的就是开发者工具。切到“Elements”面板（Firefox叫“检查器”），这里显示的是浏览器渲染后的DOM树。JavaScript改过的内容、Ajax拉回来的数据，全在里面。你可以展开每一层标签，鼠标悬停时页面上对应的区域会高亮。想找某个按钮的点击事件绑定了什么函数，选中那个元素，右侧“Event Listeners”面板列得清清楚楚。

有个细节值得说：开发者工具里的代码是实时状态，你甚至可以直接双击修改。改完按回车，页面立刻变化。这功能拿来测试CSS样式特别方便，调完再复制回自己的文件。不过刷新就没了，别指望它保存。

右键源码和开发者工具的区别，本质上是“服务器给的”和“浏览器理解的”。前者是原材料，后者是成品。查SEO问题看前者，分析页面结构看后者。我习惯两个都开着，对照着看。

手机上看源码稍微麻烦点。Chrome移动版没有直接入口。常用做法是桌面浏览器开启设备模拟（Ctrl+Shift+M），切到手机视图再按F12。或者用vConsole这类工具注入页面，不过那得改代码，普通用户不推荐。

看源码能干什么？举几个实际例子。有人靠它找隐藏的优惠券代码——某些电商会把未公开的折扣码写在注释里。有人分析竞品网站的图片路径规律，批量下载素材。还有人检查自己网站是否被注入了恶意脚本。我见过最绝的，一个设计师通过源码里的字体文件路径，找到了对方用的商业字体名称，省了几百块授权费。

当然，源代码不是万能的。后端逻辑、数据库查询、服务器配置，这些在源码里看不到。前端代码经过压缩混淆后也几乎不可读，变量名全是a、b、c。但即便如此，结构还在，网络请求还在。打开“Network”面板，每个请求的URL、参数、返回数据一目了然。很多API接口就是这么被发现的。

最后提醒一句：看源码合法，但别拿别人的代码直接商用。开源协议、版权声明通常写在文件头部注释里，花几秒扫一眼。MIT协议随便用，GPL协议要求衍生作品也开源， proprietary的就别碰了。这事儿跟看别人家窗户不违法、但翻进去拿东西违法是一个道理。

(责任编辑：热点)