怎么看网站的代码

打开一个网页，看网你看到的代码图片、文字、看网按钮，代码背后都是看网代码在撑着。想看这些代码，代码不用什么黑客技术，看网浏览器自带的代码功能就够。

最直接的看网办法：在页面上点右键，选“查看网页源代码”。代码快捷键是看网 Ctrl+U，Mac 上是代码 Command+Option+U。按下去之后，看网一个新标签页弹出来，代码密密麻麻全是看网英文和符号。这就是服务器发给浏览器的原始文件，浏览器再把它翻译成你看到的页面。我第一次看的时候有点懵——怎么跟刚才那个干净的页面完全两回事？广告、样式、脚本混在一起，像拆开一个包装盒看到里面的纸板、胶带和碎泡沫。

但右键看到的只是初始版本。很多页面加载完之后，JavaScript 还会往里面塞内容。比如你刷微博，往下滑，新帖子不断冒出来，这些在源代码里根本找不到。这时候得用“检查”功能。右键点页面任意位置，选“检查”，或者按 F12。浏览器会弹出一个面板，左边是实时更新的 DOM 树，右边是样式和布局信息。你鼠标悬停在某一行代码上，页面上对应的区域就会高亮。这个反馈很直观，像拿着一支笔在屏幕上圈圈点点。

我经常用这个办法看别人怎么实现某个效果。比如一个按钮的悬停动画，在 Elements 面板里找到那个按钮的 class，右边 Styles 栏里能看到它用了什么 CSS 过渡。有时候直接改几个数值，页面上立刻变样——把 border-radius 从 4px 改成 50%，方按钮瞬间变圆。改完刷新就恢复原状，不会影响别人，纯粹自己试玩。

看代码不只是为了抄。有次我帮朋友查一个表单为什么提交不了，打开检查面板，发现按钮的 type 属性被写成了 button 而不是 submit。这种小错误肉眼看不出来，代码里一目了然。还有一次，页面在手机上显示错位，我打开响应式模式，拖动宽度，看到某个容器的 min-width 设得太死，窄屏时直接撑破布局。改掉就好了。

HTML 本身不难读。标签成对出现，<div> 开头，</div> 结尾，中间包着内容。缩进好的代码像大纲一样清晰。CSS 负责长相，选择器加花括号，里面写属性和值。JavaScript 复杂一些，但如果你只想看某个交互怎么触发，可以在 Sources 面板里搜关键词，比如 “click” 或者 “submit”，找到对应的函数，打断点，一步步跟。 Chrome 的调试器做得很好，变量值实时显示，比读死代码快得多。

有人觉得看代码是程序员的事。其实普通用户也能用。比如你想下载网页上的一张图，但右键被禁用了。打开检查面板，在 Elements 里找到 <img> 标签，复制 src 后面的链接，新标签打开就能保存。又比如你想知道某个网站用了什么字体，在 Styles 里搜 font-family，一清二楚。

当然，看到的代码不一定是作者原本写的。构建工具会压缩、合并、混淆，变量名变成 a、b、c，换行全去掉。这种代码读起来很痛苦。但结构还在，关键逻辑还能猜。实在不行，用开发者工具里的“格式化”按钮，把压缩的代码重新排版，至少能看个大概。

我习惯在学一个新框架时，先找几个用它的网站，打开检查面板看生成的 HTML 结构。React 会留下 data-reactroot，Vue 有 data-v- 开头的属性。这些痕迹像脚印，告诉你页面是怎么搭起来的。看多了，自己写的时候心里也有数。

浏览器就是最好的代码阅读器。不用装额外软件，不用配置环境，右键、F12，两个动作。你不需要看懂每一行，挑你关心的部分看就行。样式、结构、网络请求、性能，每个面板各管一摊。花一个下午点点看看，比读十篇教程都管用。

很赞哦!（1）