浏览器地址栏旁边那个锁形图标，看网右键点一下，页后选择“检查”，台代或者直接按F12。看网就这么简单，页后网页后台代码的台代入口，跟打开自家房门一样，看网钥匙就挂在门框上。页后

我第一次按下F12的台代时候，屏幕右边弹出一个密密麻麻的看网窗口，全是页后英文和符号，跟天书似的台代。那一瞬间我差点关掉它——但等等，看网你看左上角那个箭头图标，页后点一下，台代再把鼠标移到网页任意一张图片上，代码区里就会自动高亮一行，像是它被你的鼠标“戳”中了。这就是HTML，网页的骨架。每个网站，不管它看起来多花哨，本质上都是这么一堆标签搭起来的积木。

你看那行高亮的代码，可能写着<img src="logo.png" alt="公司标志">。src后面跟的就是图片的地址，alt后面是图片加载失败时显示的文字。这些东西，网站所有者不想让你看见，但它们就大大方方躺在那里。改个alt内容，把“公司标志”改成“垃圾公司”，按回车，网页上那个图片的悬停提示就变了——当然，只是你本地看到的变了，刷新一下又恢复原样。这种“改了等于没改”的错觉，恰恰是理解前后端区别的第一步：你改的只是浏览器里的临时副本，真正的代码存在服务器上。

再往右边看，有个叫Console的标签。点开它，里面可能有一些红色的报错信息，或者黄色的警告。那是网页运行时的“病历本”。有一次我帮朋友查他的个人网站为什么图片加载不出来，打开Console一看，一行红字：Failed to load resource: 404。翻译过来就是：某个资源找不到了。顺着报错点进去，发现他引用的图片路径少了个斜杠。这种问题，不懂代码的人只能干瞪眼，但只要你敢按F12，答案就在那儿等着你。

别被那些密密麻麻的CSS样式吓到。你不需要全懂，就像开车不需要会造发动机。你只需要知道，左边那个“Elements”面板是看结构的，右边那一大堆color: #fff;、font-size: 14px;是管外观的。想改字体颜色？找到对应的样式行，点一下数值，直接改成red，页面立马变红。这种即时反馈的快感，比玩任何游戏都上瘾——虽然刷新一下就打回原形。

真正有意思的是Network面板。按F12后切到那里，再刷新一下网页，你会看到几十个请求排队一样往上蹦。每个请求都是网页向服务器要东西的记录：图片、脚本、样式表，甚至你鼠标悬停时偷偷加载的统计代码。有一次我查一个电商网站，发现他们每秒钟往第三方追踪服务器发一条数据，连我鼠标滑过哪个商品都记录在案。这些后台代码不会说话，但Network面板把它们的行踪暴露得干干净净。

看多了你就会发现，网页后台代码没什么神秘的。它就像一个开放厨房，你透过F12这扇窗户，能看到厨师怎么切菜、放什么调料、甚至偶尔把锅铲掉地上捡起来继续炒。有些厨师喜欢把代码写得整整齐齐，注释里还带笑脸；有些则乱得像刚打完仗的战场，一长串压缩过的代码挤在一行里，根本没法读。这跟人的性格一样，藏不住。

所以下次遇到什么网页问题，别急着关掉重开。按一下F12，去后台看看那些代码在说什么。它们不会咬你，顶多让你看不懂——但看不懂也没关系，乱翻一通，碰巧改对一个数值，网页就按你的心意变了那么一秒钟。那一秒钟里，你是这个网页的临时上帝。

(责任编辑：热点)