用浏览器看懂一个网页

前面几篇讲的都是概念，这篇动手。工具不用装，浏览器自带：按 F12，或者右键选「检查」。别怕点坏 —— 这里改的东西只在你自己这一屏生效，刷新一下就恢复原样。

打开后先认三个面板。

Elements（元素）：页面的结构，就是 L01 里说的那份 HTML 清单被搭起来的样子。鼠标点中某一行，页面上对应的部分会高亮。

Network（网络）：这一页发出的所有请求，L01 讲的那几十条就在这儿。能看到每条花了多久、多大。

Console（控制台）：页面运行时的提示和报错，红色的通常就是出问题了。

三个小练习，十分钟能做完：

一、改一行字。 在 Elements 里找到一段标题文字，双击改成别的，看页面立刻变了。再按 F5，恢复原样。这个练习是为了让你相信：前端就是跑在自己浏览器里的那层，看得见、摸得着。

二、找出最大的那张图。 切到 Network，刷新，点一下「Size」那一列按大小排序，排在最上面的往往就是拖慢首屏的那张图。点开它，看体积和加载时间。如果一张图两三兆，那网站慢基本不用猜原因了 —— 客户线 T02 里说的"图片没压缩"，看到的就是这个。

三、看有没有报错。 切到 Console，刷新。如果出现红色条目，说明有脚本或资源没加载成功。表单点了没反应、某个按钮不工作，很多时候线索就在这里。

做完这三步，你已经能独立回答几个很实际的问题：这页为什么慢？是不是某张图太大？是不是有东西加载失败了？表单提交不出去，是压根没发请求，还是发出去被挡回来了（在 Network 里看那一条有没有出现、返回什么）。

不用看懂每一行代码。这把工具最值钱的地方，恰恰是不懂代码的人也能用来确认事实，而不是凭感觉说"网站好像有点卡"。