内容摘要：按下 F12，你就能看到这个网页的“底牌”。 浏览器里任何一个页面，右键菜单里都藏着一行字——“查看网页源代码”。点下去，一个新标签页弹出来，密密麻麻的尖括号和英文单词铺满屏幕。第一次见的人多半会愣住

按下 F12，个网你就能看到这个网页的页的源代“底牌”。

浏览器里任何一个页面，个网右键菜单里都藏着一行字——“查看网页源代码”。页的源代点下去，个网一个新标签页弹出来，页的源代密密麻麻的个网尖括号和英文单词铺满屏幕。第一次见的页的源代人多半会愣住：这什么玩意儿？

其实这就是网页的原始文本。浏览器拿到它，个网解析、页的源代渲染，个网才变成你看到的页的源代图片、按钮、个网排版。页的源代换句话说，个网源代码是“原材料”，你看到的页面是“成品”。

三种打开方式，各有各的用处

最直接的办法是右键。在页面空白处点右键，选“查看网页源代码”（不同浏览器措辞略有差异，Chrome 叫“查看网页源代码”，Firefox 叫“查看页面源代码”）。快捷键也行，Ctrl+U 在 Windows 上通用，Mac 上是 Command+Option+U。这招打开的是服务器发过来的原始 HTML 文件，没经过 JavaScript 加工。

但很多时候，你右键看到的和实际渲染出来的对不上。比如一个商品价格，源代码里写的是 <span id="price"></span>，空的。价格是 JavaScript 后来填进去的。这时候得用开发者工具。按 F12，或者 Ctrl+Shift+I，打开的是“检查元素”面板。这里看到的是浏览器实时解析后的 DOM 树，JavaScript 改过的内容全在里面。

第三种是看特定元素的代码。右键某个按钮或图片，选“检查”，开发者工具直接定位到那行 HTML。想扒某个模块的结构，这招最快。

源代码里到底有什么

HTML 是骨架。 <div>、<p>、<a> 这些标签搭出页面的层级关系。CSS 管长相，要么写在 <style> 标签里，要么外链一个 .css 文件。JavaScript 管行为，写在 <script> 标签里或者单独 .js 文件。

我经常拿它干一件事：找视频的真实地址。有些网站把视频藏在 <video> 标签的 src 属性里，右键源代码一搜就出来了。还有些图片用了懒加载，源代码里是占位图，开发者工具里才能看到真实 URL。

另一个常见场景是抄作业——不是抄代码，是看别人怎么写的。比如看到一个网站导航栏的下拉动画很顺滑，F12 找到对应的 <ul> 和 <li>，再看 Styles 面板里的 CSS 过渡属性，基本就明白思路了。

几个容易踩的坑

源代码里的链接可能是相对路径。 href="/about" 不代表当前目录下有 about 文件夹，它指向的是网站根目录下的 /about。别直接复制到本地打开，会 404。

还有，别指望源代码里能找到所有东西。后端模板引擎渲染过的页面，源代码里是最终 HTML；纯前端框架（React、Vue）做的页面，源代码里可能只有一个 <div id="root"></div>，内容全靠 JavaScript 挂载。这时候右键看源代码基本没用，必须上开发者工具。

移动端网页更麻烦。手机浏览器大多没有右键菜单，得用 Chrome 的远程调试，或者干脆在桌面浏览器里模拟移动设备。F12 里有个手机图标，点一下就能切换视口，再刷新页面，源代码和桌面版可能完全不同。

最后说个细节：有些网站会禁用右键。页面里塞一段 JavaScript，监听 contextmenu 事件然后 preventDefault()。但这拦不住 Ctrl+U，也拦不住 F12。浏览器菜单栏里照样能打开开发者工具。真要靠禁用右键来保护代码，基本是心理安慰。

查看源代码这件事，门槛低到几乎没有，但会用的人能从中挖出不少东西。改个 CSS 让页面变个样，找个隐藏的下载链接，或者单纯满足好奇心——都行。下次看到有意思的网页，不妨按一下 F12。