```html

你每天在浏览器里看到的看网网页，其实是站源一堆文本文件在演戏。文字、代码图片、看网按钮、站源弹窗，代码全是看网代码渲染出来的效果。想扒开这层皮，站源看底下到底写了什么，代码方法多得很。看网最直接的站源一招：在页面任意位置右键，菜单里找“查看网页源代码”或者“检查”。代码前者会弹出一个新标签页，看网满屏密密麻麻的站源标签和脚本，那是代码服务器发给浏览器的原始文件。后者更狠，直接打开开发者工具，左边是实时DOM树，右边是样式和脚本，改个颜色、删个元素，页面立刻变样——但刷新就恢复原状，因为你改的是内存里的副本，没动服务器上的文件。

快捷键也顺手。Windows下按Ctrl+U，Mac按Cmd+Option+U，多数浏览器都能呼出源代码视图。不过Chrome和Edge现在更倾向于让你用F12或右键检查。我习惯用Firefox看源码，因为它对HTML的缩进和语法高亮做得舒服，长文档滚起来不累。有次帮朋友查一个表单为什么不提交，右键检查发现按钮的type属性被写成了button而不是submit，改一下就好了。这种问题光看渲染后的页面根本看不出来。

源代码里藏的东西比你想的多。注释里可能有开发者的吐槽，比如<!-- 这里别动，老板要求 -->。CSS文件路径、JS库版本、甚至API密钥都可能裸露在外。我见过一个电商网站，源码里直接写着测试环境的数据库地址，虽然没密码，但也够吓人的。还有一次，某个政府网站源码里夹着一段被注释掉的旧版首页，点开一看，三年前的通知还挂在那儿。这些细节，不翻源码永远发现不了。

开发者工具里的“Sources”面板更专业。它能按域名分组列出所有加载的资源，HTML、CSS、JS、图片各归各。你可以给JS打断点，单步执行，看变量怎么变。有回我调试一个轮播图不动的问题，在Sources里找到对应的JS文件，发现setInterval的延时被写成了0，难怪卡死。这种排查，靠看渲染结果猜是猜不出来的。

移动端网页的源码怎么看？手机浏览器大多没右键菜单。安卓上可以用Kiwi Browser装Chrome扩展，或者用Via浏览器长按菜单里的“查看源码”。iOS麻烦点，Safari配个Mac来远程调试，或者用view-source:前缀手动输入网址。我试过在iPhone上用Shortcuts写个脚本，把当前URL前面加上view-source:再打开，勉强能用。体验肯定不如桌面，但应急够了。

看源码不等于看懂源码。满屏的div嵌套和压缩过的JS，新手容易晕。建议从简单的静态页面开始，比如个人博客。先看<head>里引了哪些CSS和JS，再看<body>的结构。遇到class名像a1b2c3这种乱码的，那是构建工具压缩过的，别硬啃，去Sources里找对应的源映射文件。很多网站会提供.map文件，能还原出可读的原始代码。

最后说个冷门的：view-source:协议。在地址栏直接输入view-source:https://example.com，浏览器会以纯文本形式展示服务器返回的HTML。这跟右键查看的区别在于，它不执行任何JS，也不加载额外资源，就是原封不动的网络响应。有时候右键看到的源码已经被JS动态修改过了，用view-source:才能看到最初的模样。我对比过某新闻网站，右键看到的评论数是“10”，view-source:里却是“0”，因为数字是后来JS填进去的。

工具就在那儿，用不用看需求。想抄个布局、查个bug、或者单纯好奇，右键检查永远是最快的那把钥匙。别被那些尖括号吓住，看多了就习惯了。

```