如何查看网站源代码

```html

你打开一个网页，何查看到漂亮的看网排版、会动的站源按钮、自动播放的代码视频。这些东西背后是何查几百行甚至上万行代码。想看看它们长什么样？看网不需要黑客技术，浏览器自带工具就能做到。站源

最直接的代码方法：在页面任意空白处点右键，菜单里有一项“查看网页源代码”（不同浏览器措辞略有差异，何查Chrome叫“查看网页源代码”，看网Edge叫“查看源”，站源Firefox叫“查看页面源代码”）。代码点下去，何查一个新标签页弹出来，看网满屏花花绿绿的站源代码。这就是服务器发给浏览器的原始HTML文件。注意，这里看到的只有HTML，不含CSS和JavaScript的实时执行结果。你看到的可能是压缩成一行的代码，读起来像天书。别慌，这很正常——很多网站为了省流量会去掉换行和空格。

快捷键更快。Windows上按 Ctrl + U，Mac上按 Option + Command + U。我习惯用这个，比右键菜单少点两下。但有个坑：某些网站会禁用右键菜单，或者用JavaScript屏蔽了查看源代码的快捷键。遇到这种情况，别急着骂人。在地址栏手动输入 view-source: 加上网址，比如 view-source:https://example.com，回车。这招几乎百试百灵，因为它是浏览器原生协议，网站脚本管不着。

不过，上面这些方法看到的都是“死”代码——服务器最初发过来的那份。如果你想知道某个按钮点击后发生了什么、某个图片懒加载时改了哪个属性，得用开发者工具。按 F12 或者 Ctrl + Shift + I（Mac是 Option + Command + I）。面板弹出来，选“Elements”标签（中文版叫“元素”）。这里显示的是浏览器解析后的实时DOM树。你可以点左上角那个小箭头图标，再去点页面上的任意元素，代码会自动定位到对应行。我经常用这招偷看别人网站怎么实现某个动画效果——比如一个渐变背景，在Elements里看到 background: linear-gradient(...)，直接抄走。

还有个细节：源代码和Elements面板里的内容经常不一样。举个例子，你右键查看源代码，搜索某个关键词，找不到。但在Elements里能搜到。为什么？因为JavaScript动态修改了DOM。比如一个评论区，初始HTML里可能只有空容器，用户滚动后JS才把评论塞进去。所以查静态代码用 Ctrl+U，查动态行为用F12。

移动端怎么办？手机浏览器一般没有右键菜单。Chrome安卓版可以在地址栏输入 view-source: 前缀，但操作麻烦。更实用的办法：用数据线连电脑，电脑Chrome打开 chrome://inspect，远程调试手机页面。或者装个Kiwi Browser，它支持桌面版扩展，直接装个“View Source”插件。我试过在手机上用Via浏览器，长按链接有时能弹出查看源代码选项，但兼容性看运气。

最后说个真实案例。有次我想下载某网站的背景音乐，右键查看源代码，搜索 .mp3，什么都没找到。打开F12的Network面板，刷新页面，按Media筛选，音频文件赫然在列。原来它是通过JS的fetch加载的，地址藏在脚本里。所以，查看源代码只是第一步，真正要挖东西，得结合Network和Sources面板。别指望一个右键走天下。

工具就在那里，用不用取决于你。下次看到有意思的网页效果，别光截图，按一下 Ctrl+U，说不定能学到点新东西。