想看一个网站的网站源代码，最直接的源代办法就是在浏览器里按 Ctrl+U。Windows 上这么按，网站Mac 上换成 Command+Option+U。源代页面会立刻跳转到一个纯文本视图，网站满屏尖括号和标签，源代那就是网站这个网页的 HTML 骨架。我头一回干这事是源代初中，想看看学校官网的网站公告栏为什么老是错位，结果打开一看，源代密密麻麻的网站 <div> 和 <table> 混在一起，当场就关掉了。源代
但 Ctrl+U 看到的网站东西有个问题——它是服务器最初吐出来的那版 HTML。现在很多网站用 JavaScript 动态往页面里塞内容，源代你右键查看源代码，网站可能只看到一堆 <script> 标签和一个空荡荡的 <body>。这时候得换个法子：按 F12 打开开发者工具，切到 Elements 面板。这里显示的是浏览器实时解析后的 DOM 树，JavaScript 改过的、Ajax 拉回来的，全都在里面。想看某个按钮的样式？右键它，选“检查”，开发者工具会直接定位到对应的那行代码，比翻源码快得多。
有人分不清“查看源代码”和“审查元素”的区别。简单说，前者是看厨师端上桌前的原始菜单，后者是看菜上桌后实际长什么样。两个都有用。想扒别人写的 CSS 动画，去 Sources 面板找 .css 文件；想分析接口请求，切到 Network 面板刷新页面，所有 XHR 请求一目了然。我上次帮朋友查一个图片轮播为什么卡顿，就是在 Network 里发现它每次切换都重新下载同一张 2MB 的大图，缓存头压根没设。
手机浏览器也能看源码，只是麻烦点。Chrome 移动版地址栏输入 view-source: 加网址，比如 view-source:example.com，能出来原始 HTML。但大多数手机浏览器没开发者工具，想调试还是得连电脑。Android 用 Chrome 远程调试，iPhone 用 Safari 的 Web Inspector，步骤稍多，偶尔用一次还行。
看源码这件事，门槛低但天花板高。新手看个热闹，老手能从中读出技术栈——data-reactroot 说明用了 React，ng- 前缀是 Angular，wp-content 路径暴露了 WordPress。有次我打开一个电商页面，源码里 <meta name="generator"> 直接写着“Shopify”，连猜都不用猜。这些信息对做竞品分析或者学别人的实现思路挺有帮助。
得提醒一句，看源码和抄源码是两码事。HTML、CSS、JavaScript 在浏览器里本来就是公开的，看没问题。但把别人的整站模板扒下来商用，或者直接复制核心逻辑，那涉及版权和许可协议。MIT、GPL、Apache 各有各的规矩，动手前最好扫一眼项目根目录有没有 LICENSE 文件。
最后说个实际场景。你看到一个网站滚动时导航栏变色，想知道怎么做的。F12 打开，选中导航栏元素，在 Styles 面板里找 background-color 的变化，旁边会标注触发条件，比如 .scrolled 类。再去 Sources 里搜 scroll 事件监听，几行代码就露出来了。整个过程比看教程视频快，而且学到的直接是真实项目里的写法。
浏览器就是最好的老师傅，源代码就摊在那儿，随时可以翻。