怎么查看网页的html代码

按F12，网页网页的网页HTML代码就摆在你眼前了。这大概是网页浏览器里最直接的功能，但很多人用了几年电脑都不知道。网页

我头一回接触这玩意儿是网页十年前。当时想抄一个网站的网页排版，右键点了半天没找到“查看源代码”以外的网页选项——那时候 Chrome 还没现在这么顺手。现在你随便打开一个页面，网页右键菜单里至少有两个入口：查看网页源代码和检查。网页前者弹出一个新标签页，网页密密麻麻全是网页纯文本；后者直接在当前页面右侧或底部展开一个面板，左边是网页代码，右边是网页样式，鼠标划过哪行代码，网页页面上对应的网页元素就亮起来。这体验，比当年用 Dreamweaver 拖控件直观多了。

具体怎么操作？分场景说。

桌面浏览器最省事。Windows 系统按 Ctrl + U，Mac 按 Command + Option + U，直接跳转到源码页。或者右键 → “查看网页源代码”，效果一样。但你要是想边看代码边看页面效果，那就用 F12 或 Ctrl + Shift + I（Mac 是 Command + Option + I）打开开发者工具。这个面板里，Elements 标签页显示的是经过浏览器解析、修正后的 DOM 结构，跟原始源码可能不一样——比如浏览器会自动补全 <html>、<body> 标签，JavaScript 动态插入的内容也会出现在这里。而 Ctrl + U 看到的是服务器返回的原始 HTML，没经过任何加工。

有个细节值得留意：你在 Elements 面板里双击某行代码，可以直接改文字、改属性。改完页面立刻变样，但刷新就没了。这功能拿来临时测试样式挺方便，我经常用它改按钮颜色看效果，比来回切编辑器快。

手机浏览器稍微麻烦点。iOS 的 Safari 默认没有开发者工具，得先去“设置 → Safari → 高级”里打开“网页检查器”，然后用数据线连电脑，在电脑的 Safari 里才能看。Android 的 Chrome 倒是内置了，地址栏输入 chrome://inspect 可以远程调试，但普通用户很少这么干。更简单的办法是装个 View Source 类的 App，或者直接把网址前面加 view-source:——不过移动端支持这个协议的不多。

说到 view-source:，这其实是最原始的查看方式。在地址栏输入 view-source:https://example.com，浏览器就会把源码当纯文本显示。Chrome、Firefox 都支持，Edge 也行。缺点是它不解析、不渲染，就是干巴巴的文本，找东西全靠 Ctrl + F。

有人会问：看源码有什么用？举个例子。我前阵子想扒一个网页的字体文件，右键检查元素，在 Network 面板里筛选 Font，刷新页面，字体文件就列出来了。再比如，有些网站把邮箱地址藏在 JavaScript 里防爬虫，但源码里搜 @ 符号往往能直接找到。还有时候，页面显示“加载失败”，打开源码一看，接口地址写错了——这种问题，看源码比看控制台报错还快。

不过得提醒一句：你看到的源码不一定是服务器上那套。很多现代网站用 React、Vue 这类框架，源码里只有一个空的 <div id="app"></div>，所有内容都是 JS 跑出来的。这时候看原始源码没用，得看 Elements 面板里动态生成的结构。另外，有些网站会故意混淆代码，变量名全是 a、b、c，看着头疼，但逻辑还在，耐心点能理出来。

最后说个反直觉的事：不是所有网页都能看源码。有些站点用 frame 嵌套，你看到的只是外层框架；有些用 document.write 动态输出，源码里一片空白；还有的干脆检测开发者工具，你一按 F12 它就跳转或弹窗。遇到这种，换个浏览器或者禁用 JavaScript 再试，往往能绕过。

代码就在那里，看不看，怎么用，全看你自己。