网页源码在线查看

按 Ctrl+U 的人越来越少，但需要看源码的源码场景一点没少。上周帮朋友排查一个表单提交后样式错乱的线查问题，我第一反应就是网页打开浏览器开发者工具，切到 Elements 面板，源码盯着那几行 <div class="form-row"> 看了半分钟——发现多了个内联的线查 style="display:block"。问题十秒解决。网页这种“直接看底牌”的源码爽感，是线查任何框架调试器都给不了的。

浏览器自带源码查看功能，网页算是源码最基础的入口。Chrome 里右键“查看网页源代码”，线查弹出的网页标签页里是服务器返回的原始 HTML，未经 JavaScript 修改。源码这跟开发者工具里的线查 Elements 面板有本质区别：前者是“生的”，后者是“熟的”。我见过不少人在这两个视图之间来回切换，搞不清为什么看到的 DOM 结构不一样。其实记住一点就行：右键看到的源码是初始状态，动态脚本执行后页面早变了。想抓动态内容，得用 Elements 面板右键“Copy outerHTML”。

在线工具是另一条路。像 CodeBeautify 这类站点，你输入 URL，它替你去请求页面，然后把 HTML 格式化好返回给你。好处是能直接看到带缩进的代码，不像浏览器原生视图那样挤成一团。坏处也明显——它拿到的只是服务器响应，JavaScript 渲染后的内容一概没有。所以单页应用、懒加载图片、异步填充的评论区，用这类工具基本抓瞎。

我自己的习惯分场景。静态博客、企业官网、老式服务端渲染的页面，直接浏览器右键，省事。碰到 React 或 Vue 写的站点，老老实实开 DevTools，在 Elements 里一层层展开。偶尔需要把整段 DOM 结构存下来对比，会顺手装个 Chrome 插件，比如 “View Rendered Source”，它把浏览器最终渲染的源码完整导出，连 Shadow DOM 里的东西都能扒出来。这插件我用了三年，更新不算勤，但关键时刻没掉过链子。

还有一类需求是“看别人的源码学布局”。以前逛 Awwwards 获奖站点，看到动效顺滑，总想扒下来研究。现在更直接的做法是打开 DevTools 的 Sources 面板，在 Page 标签下找到对应的 CSS 和 JS 文件，直接看压缩前的版本——当然，大部分生产环境代码是 minify 过的，变量名全是 a、b、c。但 CSS 的类名往往保留着语义，.hero-section、.nav-sticky 这种，配合 Elements 面板的实时样式，还原个七八成不难。

手机端查看源码稍微麻烦点。Android 上 Chrome 远程调试可以连电脑，iOS 的 Safari 也能通过 Mac 开发者菜单连上。但有时候手边没电脑，我就用 view-source: 前缀。在移动浏览器地址栏输入 view-source:https://example.com，部分浏览器会直接显示纯文本源码。这个技巧知道的人不多，实测 Firefox for Android 支持得最好，Chrome 移动版反而经常跳回普通页面。

最后提一句安全边界。在线查看源码本身不违法，但拿别人源码直接商用，或者绕过付费墙抓取内容，那是另一回事。技术是中性的，用的人得有点分寸。我一般只把源码查看当作学习工具和排错手段，看到精妙的实现会记下来，但不会整段复制粘贴。毕竟，看懂逻辑比抄走代码有价值得多。