怎么查看网站源代码

浏览器里点右键，网站选“查看页面源代码”——这大概是源代多数人第一次接触源代码的方式。但如果你只停留在这一步，网站那看到的源代不过是一堆密密麻麻的标签，像天书一样。网站真正的源代技巧在于，你得知道这堆代码里藏着什么，网站以及如何高效地挖出它们。源代

拿我自己的网站经历说事。上个月帮朋友排查一个网页加载慢的源代问题，他截图给我看网络面板的网站瀑布图，一堆请求排着队。源代我让他直接按F12，网站切到“元素”标签，源代把那个卡顿图片的网站HTML结构翻出来，发现它没写宽度和高度属性，浏览器得等图片下载完才能确定布局，自然就慢了。这不算高深，但如果你连源代码入口在哪都不知道，压根儿无从下手。

三种最常用的打开方式，按效率排个序：第一，快捷键Ctrl+U（Mac上按Option+Command+U），直接在新标签页里看纯文本源代码；第二，F12或者右键“检查”，打开开发者工具，这是动态调试的主战场；第三，在地址栏前加“view-source:”前缀，比如输入view-source:https://example.com，能快速抓取特定页面的原始代码，省得先打开页面再右键。

但光会打开不够。你得学会区分“源代码”和“渲染后代码”。前者是服务器发给浏览器的原始文本，后者是JavaScript执行后修改过的真实DOM结构。举个典型场景：你在淘宝搜索商品，页面列表是JS动态渲染的，用Ctrl+U看源代码，只能看到一堆脚本标签，根本找不到商品数据。这时候得按F12，切到“元素”面板，那才是浏览器当前呈现的最终状态。

有个小技巧，很多人不知道：在“元素”面板里，你可以直接右键某个标签，选“复制”->“复制outerHTML”，就能把那一整块结构带样式类名拷下来。或者你只想看某个区域，用Ctrl+Shift+C（Mac是Option+Command+C）进入快速选择模式，鼠标点页面上任意位置，对应的代码块会自动高亮。这比一屏一屏滚动去找快得多。

再深入一点，如果你怀疑某个交互效果是JS控制的，在“事件监听器”子标签里能看到绑定了哪些函数。但别指望这里能直接看到函数源码，它只给个引用位置。真想看具体逻辑，得切到“源”标签，那里有所有加载的脚本文件，按Ctrl+Shift+F还能全文搜索关键词。

说句实在话，查看源代码这技能，门槛低到零，但深度可以无限延伸。很多人卡在“看了但看不懂”的瓶颈，那是因为没带着问题去查。下次再打开源代码前，先问自己一句：我想从这堆代码里找到什么？是图片地址？是某个请求参数？还是某个元素的样式来源？带着目的去翻，效率翻倍。

别怕那些看不懂的代码。你不需要成为程序员，但当你学会看源代码，就像突然能听懂网页在背后嘀咕什么。那种感觉，挺上瘾的。