```html

你打开一个网页，看网觉得某个按钮位置不对，站代或者想扒下背景图，看网最直接的站代办法就是看它的代码。别被“查看源代码”这几个字吓住，看网它其实就是站代一堆文本，和你在记事本里写的看网东西本质一样。

右键，站代选“查看网页源代码”，看网浏览器会弹出一个新标签页。站代里面密密麻麻挤满了尖括号和英文单词。看网第一次看的站代人多半会头晕——这玩意儿跟天书似的。但你要是看网耐着性子滚动几屏，会发现规律：所有内容都被<html>包着，站代里面分<head>和<body>两大块。看网<head>里是给浏览器和搜索引擎看的，比如标题、编码、引用的CSS文件；<body>才是你眼睛看到的东西。我刚开始学的时候，就靠改<body>里的文字来整蛊同学——把网页标题换成“XX是猪”，刷新一下果然变了。当然，只改本地看到的，服务器那边纹丝不动。

但右键看源码有个大问题：它显示的是服务器最初发过来的HTML，如果网站用JavaScript动态改了内容，你看到的可能不是最终渲染结果。比如很多单页应用，源码里就一个空<div>，啥都没有。这时候得用开发者工具。按F12，或者右键选“检查”，会打开一个面板。这才是真正干活的地方。

开发者工具里，Elements标签页显示的是当前DOM树，也就是浏览器实际解析后的结构。你鼠标移到某一行，页面上对应的区域就会高亮。反过来，点页面上的元素，代码也会自动跳到那一行。我查一个按钮的样式时，经常这么干：先点它，然后看右边Styles面板，里面列出了所有生效的CSS规则，还能看到哪些被划掉了——优先级不够。改个数字，页面立刻变，爽得很。不过刷新就没了，想永久改得去改源文件。

Network标签页也挺有用。刷新页面，它列出所有加载的资源：图片、JS、CSS、字体。哪个文件大、哪个加载慢，一目了然。有次我发现一个页面白屏好久，打开Network一看，一个1.5MB的JS文件卡了3秒。后来让后端压缩了一下，秒开。这东西比瞎猜强多了。

看代码不光是找茬，也是学习。看到某个网站动画做得顺滑，F12打开，找到对应的CSS，看它用了什么transition或animation。抄过来改改，就是自己的了。我早期很多CSS技巧都是这么偷来的。当然，直接复制别人整个文件不地道，但理解思路再自己写，没人管你。

还有个小技巧：在Console里可以直接用JavaScript操作页面。比如document.querySelector('h1').innerText = '哈哈'，标题就变了。这比改HTML快。有时候网站禁止右键，按F12照样能打开，或者用快捷键Ctrl+Shift+I。道高一尺魔高一丈，前端那点限制基本拦不住真想看的人。

最后说个坑。有些网站代码压缩得亲妈都不认识，变量名全是a、b、c，函数嵌套十几层。这种别硬读，找Source Map或者直接搜关键词。我一般搜“api”或者“fetch”，看看数据从哪来的。实在不行就放弃——不是所有代码都值得看。你又不是要维护它，能解决自己的问题就够了。

看代码这事，跟学外语差不多。刚开始查字典一个词一个词抠，看多了就扫一眼知道大概。别指望一次看懂全部，挑你关心的那部分看。按钮的样式、图片的地址、数据接口的URL——这些才是对你有用的。剩下的，管它呢。

```