网页按f12进入源代码

按一下F12，网页浏览器右侧或底部弹出一个面板，进入密密麻麻的源代代码像被剖开的机器内脏。这就是网页网页的源代码——不是你在浏览器里“查看源代码”看到的那份静态HTML，而是进入实时动态的DOM结构。大多数人看到这堆东西的源代第一反应是关掉它，但如果你愿意多停留十秒，网页会发现这其实是进入互联网最诚实的部分：它把每一张图片的地址、每一段文字的源代颜色、每一个按钮的网页点击逻辑，全摊开在你面前。进入

我曾经在给一个朋友修网站时，源代发现他店铺页面的网页“立即购买”按钮总在手机端错位。他折腾了一下午CSS，进入改了几十行代码都没用。源代我按F12，在Elements面板里点住那个按钮，右侧的样式栏立刻显示它的宽度是固定的320像素——问题出在一行不起眼的媒体查询上。改完保存，刷新，按钮归位了。他愣了几秒，说原来代码不是写出来的，是“看”出来的。

F12最有意思的地方不在于让你改代码，而在于让你“偷看”别人的思路。随便打开一个知名网站，按F12切到Network面板，刷新页面，你会看到几十个请求像弹幕一样滚动。哪个请求先发，哪个后发，哪些资源被缓存了，哪些接口返回了什么样的JSON数据——这比任何技术文档都直观。有一次我看某个新闻网站的首页，发现它居然用了四个不同的字体文件，每个都超过200KB，难怪加载慢。这种判断不需要什么高级工具，一个F12就够了。

当然，你不需要会写代码才能用F12。Console面板里偶尔会跳出红色的报错信息，大多数时候是某个图片404了或者某个脚本变量没定义。这些报错不一定影响你浏览，但它们会告诉你：这个网站不是完美的，它背后有个程序员正在某个角落抓耳挠腮。我甚至见过有人在Console里用一行JavaScript算出自己信用卡账单的分期利率，比银行客服给的数字还准。

别怕弄坏什么。F12里改的代码只存在于你的浏览器内存中，刷新页面就恢复原样。你可以放心大胆地把某个标题改成“我是猪”，截图发给朋友，再刷新——一切如初。这种“零成本破坏”的快感，是F12独有的。我认识一个设计师，每次看到不满意的网页布局，就按F12把间距调成负数，截图存下来当反面教材。他说这比写设计评审报告管用多了。

说到底，按F12进入源代码，不是进入什么高深莫测的黑客世界，而是进入一个网页的“后台”。这里没有滤镜，没有排版，只有最原始的逻辑和数值。你看得越久，越会发现那些看似精美的页面，底下全是一堆笨拙的妥协和修补——某个浏览器兼容性的hack，某段为了赶工而写死的尺寸。这反而让人安心：互联网不是神的造物，是和你我一样的人，一行一行敲出来的。