想看一个网站的看网源代码，最直接的源代办法就是在浏览器里按 Ctrl+U（Windows）或 Cmd+Option+U（Mac）。页面会立刻跳转到一个纯文本视图，看网满屏的源代尖括号和英文单词，那就是看网这个网页的原始骨架。我第一次按这个快捷键时，源代心里想的看网是“原来网页长这样”，但很快就发现，源代这个视图里的看网代码往往经过了压缩和混淆，一行能塞下几千个字符，源代变量名全是看网 a、b、源代c，看网读起来像天书。源代

真正好用的看网工具是浏览器的开发者工具。按 F12 或者右键点“检查”，屏幕下方或右侧会弹出一个面板。这里面有个“Elements”或“元素”标签页，展示的是浏览器解析并渲染后的 DOM 树。它和 Ctrl+U 看到的源码不一样——JavaScript 动态插入的内容、CSS 样式修改后的结果，这里都能看到。比如你打开一个电商网站，右键检查价格区域，能看到 <span class="price">¥199</span>，但按 Ctrl+U 搜“199”可能什么都找不到，因为价格是 JS 从接口拉取后填进去的。

我习惯用 Chrome 的开发者工具。点开“Sources”面板，左侧是文件树，HTML、CSS、JS 分门别类列着。双击一个 JS 文件，能在右侧打断点、单步调试。有次我想知道某个按钮点击后发了什么请求，就在 Network 面板里勾选“XHR”，点一下按钮，请求的 URL、参数、响应头全出来了。这比读源码更直接——源码可能被压缩得面目全非，但网络请求骗不了人。

手机上看源码稍微麻烦点。安卓 Chrome 没有直接查看源码的菜单，得在地址栏输入 view-source: 加网址，比如 view-source:https://example.com。iOS 的 Safari 需要在设置里开启“Web 检查器”，然后用 Mac 连接 iPhone 调试。我试过一次，连上后 Mac 的 Safari 开发菜单里会出现 iPhone 的页面，点进去就能看元素和网络请求。过程有点绕，但比装一堆第三方 App 干净。

有人问：看源码能学到什么？我的观察是，新手看 HTML 结构，能明白 div 和 span 的区别、表单怎么组织；看 CSS 能理解 flex 布局的实际写法、媒体查询的断点在哪。但别指望靠看源码学会写代码——你看到的是结果，不是思考过程。一个漂亮的动画效果，源码里可能就一行 transform: translateX(100px)，但为什么选 100px、缓动函数为什么用 ease-out，这些决策背景看不到。

还有个坑：很多网站会检测你是否打开了开发者工具。我遇到过打开 F12 后页面直接跳转到“请关闭调试工具”的提示页，或者无限 debugger 循环。这种反调试手段不算高明，但确实烦人。绕过的方法有，比如在 Chrome 里按 Ctrl+Shift+P 输入“disable javascript”，或者用 Firefox 的“禁用断点”功能。不过大部分正常网站没这么干，你随便看。

最后说个实际场景。我想扒一个网页的配色方案，按 Ctrl+U 搜 background-color，结果全是压缩过的十六进制值，分不清哪个对应哪个元素。换开发者工具，点“Elements”里任意一个 div，右侧“Styles”面板直接列出所有生效的 CSS 规则，颜色值旁边还有个小色块，鼠标悬停就能预览。这比读源码快十倍。所以我的结论是：Ctrl+U 适合快速扫一眼全局，开发者工具才是日常干活的家伙。