Chrome开发者工具入门：会看Network面板，前端问题自己查

很多新手做网站，不知道怎么看网站的请求和接口问题，今天说一下Chrome开发者工具Network面板的用法，会用这个，前端和接口问题都能自己查。

打开Network面板

在网站页面按F12，切到Network标签，刷新页面，就能看到所有加载的请求：HTML、CSS、JS、图片、接口，每个请求的大小、加载时间、状态码都列出来了。

看什么

首先看状态码，红色的是加载失败的，404是文件不存在，500是服务器错误，403是权限不够，点进去就能看具体是哪个文件出问题。

然后看加载时间，如果某个请求花了好几秒，说明网站慢就慢在这，是图片太大还是接口慢，一眼就能看到。

查接口问题

如果你网站上有交互功能不正常，比如点按钮没反应，点一下Network面板，再点按钮，看有没有发出请求，请求的状态码是多少，返回的数据是什么，接口错了立刻就能看到，不用瞎猜。

常用小功能

勾选Disable cache，调试的时候浏览器不缓存，改完代码刷新就是最新的，不用每次Ctrl+F5。还有筛选按钮，可以只看XHR接口请求，过滤掉图片和CSS，界面更干净。

这个工具不用全学会，会看状态码、看失败请求，就能解决80%的前端和接口问题，新手必须练会。