查看网页代码的5种实用方法，小白也能秒懂

刷网页时突然看到一个特别酷的按钮动画，或者想看看某张图片的原始地址，又或者调试自己写的简单HTML页面——这时候，打开网页源代码是最直接的办法。

一、最常用：快捷键一键呼出

不管用 Chrome、Edge 还是 Firefox，按 Ctrl + U（Windows/Linux）或 Cmd + U（Mac）就能直接跳转到当前网页的源代码页面。这个页面是只读的，但能快速浏览整体结构，适合初学者快速扫一眼。

二、更灵活：开发者工具（推荐）

按 F12 或 Ctrl + Shift + I（Mac 是 Cmd + Option + I），就能打开「开发者工具」。默认会定位到「Elements」标签页，这里展示的是渲染后的实时 HTML 结构——和原始源码略有不同，但它支持高亮元素、实时修改、右键「Edit as HTML」，还能点小箭头图标精准选中页面上的任意模块。

比如你在首页看到一个搜索框，鼠标移到它上面，对应代码行会自动高亮；点一下，右边立刻显示它的 class、样式、盒模型，甚至可以临时删掉 display: none 看效果。

三、右键菜单法（别被“检查”两个字吓住）

在网页任意空白处右键 → 选择「检查」或「检查元素」，效果等同于按 F12 并自动聚焦到鼠标所在位置的代码。如果右键菜单里没这选项，可能是网站禁用了右键（少数营销页会这么干），那就直接用快捷键更稳妥。

四、地址栏小技巧：view-source 协议

在浏览器地址栏最前面输入：

view-source:https://www.example.com

然后回车，就能以纯文本形式打开源码。这个方法不依赖开发者工具，也不受页面 JS 渲染干扰，看到的就是服务器发来的原始 HTML。适合想确认某个 meta 标签是否写对了，或者检查 SEO 相关的 title、description 是否生效。

五、手机端也能看（安卓/iOS 通用）

手机浏览器本身不带开发者工具，但有个取巧办法：复制网页链接，粘贴到电脑端 Chrome 打开，再用 F12 查看。如果非要在手机上操作，可以用 Kiwi Browser（安卓）或 Safari 配合「Web Inspector」（需开启开发者模式并连接 Mac），不过对普通用户来说，前四种方法已完全够用。

顺带提一句：有些网站会把关键逻辑藏在 JavaScript 里，光看 HTML 可能找不到按钮背后的提交地址。这时切换到「Sources」或「Network」标签页，刷新页面，点「JS」文件或「XHR」请求，往往能找到真实接口。