按下 F12，网站网页的代码“皮肤”就被扒掉了。右边弹出的网站那块面板，就是代码浏览器给你的透视镜。大多数人一辈子没碰过它，网站但只要你碰过一次，代码看网页的网站眼光就再也回不去了。

我最早注意到这个功能，代码是网站因为一个做前端的朋友。他打开某电商网站，代码右键“检查”，网站指着密密麻麻的代码 <div> 说：“你看，这一整页的网站按钮、图片、代码文字，网站全是这些盒子拼出来的。” 当时我觉得像在看建筑图纸——原来那些精致的页面，底层不过是一堆嵌套的矩形。

HTML 是骨架，CSS 是衣服，JS 是神经

你看到的任何一个网页，拆开就三样东西。HTML 负责“这里有什么”——标题、段落、图片、链接，用尖括号包起来的标签一层层搭出结构。CSS 管“长什么样”——颜色、大小、间距、位置，写在 <style> 里或者单独的 .css 文件里。JavaScript 管“会动什么”——点击弹窗、下拉菜单、数据加载，都是它在背后跑。

在开发者工具里，Elements 面板展示的就是 HTML 和 CSS 的混合体。你把鼠标移到某一行 <div class="price"> 上，页面上对应的价格数字就会高亮。点开右边的 Styles 栏，能看到这个价格用了什么字体、多大字号、什么颜色。改一下数值，页面实时就变。这种即时反馈，比看十篇教程都管用。

从“看”到“看懂”需要跨过一道坎

刚开始你只会看到一堆标签，<div> 套 <div>，像俄罗斯套娃。慢慢地，你开始认出模式：<header> 通常是顶部导航，<nav> 是菜单，<main> 是主体内容，<footer> 是页脚。这些语义化标签是 HTML5 带来的进步，让代码有了可读性。

但现实往往更乱。我见过一个网站，整个页面只有三个 <div>，所有内容靠 CSS 定位硬摆上去。也见过用 React 或 Vue 生成的页面，源码里几乎看不到内容，全是 <div id="root"></div>——因为内容都是 JavaScript 运行时才塞进去的。这时候你得看 Elements 面板里渲染后的 DOM，而不是右键“查看网页源代码”。

这个区别很关键。右键“查看源代码”看到的是服务器发来的原始 HTML，可能是空的。F12 里的 Elements 看到的是浏览器执行完 JS 之后的最终结构。搞混了，你会以为网站什么都没写。

改代码比读代码更有意思

我经常拿开发者工具做“破坏性实验”。把某新闻网站的付费墙 <div class="paywall"> 直接删掉，正文就露出来了。把按钮的 disabled 属性去掉，灰色的提交按钮就变蓝了。这些操作只影响你本地浏览器，刷新就恢复，但足够让你理解页面是怎么被控制的。

有个做设计的朋友更绝。他看到喜欢的排版，直接打开 F12，把对方的 CSS 复制下来，粘贴到自己的项目里，再慢慢调。他说这比任何设计教程都直接——“人家怎么写的，你就怎么看，看多了自然就会了。”

别被“代码”两个字吓住

看网站代码不需要你会写。就像看菜谱不需要你是厨师。你只需要知道 <p> 是段落，<img> 是图片，color: red 是红色。剩下的靠猜和试。改一个数字，看页面怎么变，这就是最原始的学习方式。

浏览器把一切都摊开给你看了。F12 那个按钮，就是互联网的“显示隐藏文件”。你点不点，它都在那里。