F12是什么意思？网页加载慢按一下它，卡在哪一秒看得清清楚楚

我那个挂在云服务器上的小破站，后台发布文章偶尔转圈。前几天又转了十几秒，我没急着刷新碰运气，先按了一下F12——就这一下，卡在哪一秒看得明明白白：请求列表里一行红的，后台模板从一个公共CDN拉字体文件，卡了两秒半才超时。把那行屏蔽掉再刷新，页面唰地就出来了。这一篇就把这套按法掰开讲清楚，比命令行工具还友好，毕竟它是图形界面。

先说清楚，F12是个啥，会不会点坏

F12是浏览器自带的开发者工具，Chrome、Edge、Firefox全都有，按的就是键盘最上排的F12键。笔记本用户注意：不少机器F1到F12默认被音量、亮度占了，得按住Fn再敲F12，或者右键页面空白处选「检查」，再或者Ctrl+Shift+I，三个入口同一扇门。

点不坏。它只管看，顶多在本地临时改改样式，所有改动一刷新就打回原形，网站那头毫发无损。我第一次按的时候也犯怵，后来发现它跟遥控器的设置菜单一个性质：进去了不乱按确认，啥事没有。

进去以后一排英文tab，看花眼正常。日常排障只认一个：Network，中文界面叫「网络」。Elements是改样式的，Console是看报错的，Sources是翻代码的，这回全用不上。就点Network，然后它会提示你刷新一下页面。

抓一次加载：红色那行就是嫌疑人

按F5刷新，列表哗啦一下灌进来几十行——这一页打开时浏览器在后台干的活，全在这了。每一行是一个请求：一张图、一个脚本、一个接口、一份字体，谁先谁后排得清清楚楚。

两眼先扫什么？扫红色。红行要么状态码是4开头的，要么干脆标着failed，最扎眼。我那次就是一行红色的字体请求，Status列写着failed，Time列两秒五。一个页面几十个请求里挑红的，跟考卷上挑错题一样，比挨个猜快多了。

别嫌几十行多。现在一个页面背后跑几十个请求是常态，我那68KB的小站首页一轮下来也有四十来行，电商页面上百行都正常。浏览器对同一个域名同时只开六条管道，第六个往后的请求全得排队，这就是后面Timing里Queueing一段的由来。你要做的不是逐行看，是挑异常。

列表底部还有一条汇总，类似「47 requests · 1.2 MB · 3.5 s · finished」，一共发了多少个请求、拉了多少数据、花了多久，一眼扫过去心里就有底。同样一个页面，今天1.2MB明天4MB，多的那2.8MB就是新查的目标。面板上那俩勾也先混个脸熟：Disable cache（禁用缓存）和Preserve log（保留日志），后面单独说，都是值钱货。

五列账本，每列都在说一件事

列表默认几列，翻成大白话就是一张账本：

状态码那套4开头5开头各自什么意思，我之前专门写过一篇，对着表查就行：404和502到底是什么意思。

最右还有一列Waterfall瀑布图，默认就摆在那，我觉得最值钱。它不光显示每个请求花了多久，还显示它是几点几分几秒开始的——一条横杠，越长越慢，起点错开说明它在排队等前面的。一堆短横杠里戳出一根长的拖到最右边，整页就被它拖着走。鼠标搁在横杠上还会浮出小卡片，这个请求每一段各花多少，不用点进去就能看个大概。

还有个Protocol列默认藏着，右键表头把它勾出来，能看到每个请求走的是h2还是h3，之前写HTTP/3那篇拿它看过自家站用没用上QUIC：HTTP/3和QUIC是什么意思。

点开一个请求，Timing是它的流水账

列表里点任意一行，右边弹出详情面板，切到Timing（耗时）选项卡。一个请求从出生到落地被拆成好几段，一段一段摞给你看，跟超市小票似的。

为了搞清每段对应啥，我拿自己站跑了一轮。curl的-w参数能分段计时，跟Timing面板对得上。四轮实测下来：DNS解析0.015到0.077秒，TCP连接0.20到0.76秒，TLS握手0.35到0.41秒，等服务器吐首字节0.78到1.66秒，内容下载0.16到1.50秒。一个68KB的页面，整页打开1.5到4秒，每一秒都有去处。

对照着看Timing里那几段，锅分得清清楚楚：

这跟之前写ping那篇的三段定位一个思路，屋里的事、路上的事、对面的事分开算账：ping是什么意思。我那次的两秒五，Waiting占了绝大头——是我那站的后台在等CDN回源，跟我家网络半毛钱关系没有，光在家重启路由器能修好才怪。

三个最值钱的小开关

第一个，Disable cache。勾上再刷新，浏览器假装自己没缓存，所有文件重新下载。排查「改了网站怎么不变」全靠它——不然你刷新半天看到的全是旧缓存，跟强制刷新Ctrl+F5是一个道理：F5和Ctrl+F5不是一回事。查完记得把勾去掉，不然平时浏览白白多耗流量。

第二个，Preserve log。默认跳转到新页面时列表会清空，勾上以后跨页面保留记录。查「登录以后跳转白屏」这种跨页问题，没它你啥也抓不到。

第三个，Block request URL，右键列表里任意一行就有。把它屏蔽掉再刷新，页面好了就是它，没好再屏蔽下一个——一次只动一个变量，这是F12里最像做实验的功能。我那天的字体文件就是这么定罪的：屏蔽，秒开，实锤。测完记得在同一层菜单里取消屏蔽，不然这个屏蔽会一直记着，下次打开这网站字体还是缺的，你还以为是网站坏了。

手机上没F12怎么办。iOS的Safari得跟Mac联动，安卓Chrome能USB连电脑远程调试，都偏折腾。土办法是在电脑上按Ctrl+Shift+M切出手机模拟视图，先看个大概，八成的网页问题在电脑浏览器上能复现。

对号收尾：什么症状看哪列

顺序给一个：F12，点Network，刷新，先扫红行，再找最长那根瀑布，点开看Timing卡在哪段。一分钟能定位的事，别瞎猜半小时，也别一上来就重启路由器。

再啰嗦一句，F12这本账是「对面的网站」和「你家的网」合起来记的。它说Waiting长，你可以理直气壮去找站长；它说Download慢，先回头查自家宽带。账本不撒谎，就怕你不看。至于那些动辄几MB的大图拖慢整页的站，那是站长该按这个方法自查了：CDN是什么意思。