chrome开发者工具
记录网络请求
默认情况下，只要DevTools在开启状态，DevTools会记录所有的网络请求，当然，记录都是在Network面板展示的。
clipboard.png
停止记录网络请求
- 点击
Stop recording network log红色图标，当它变为灰色时，表示DevTools不在记录请求 - 在
Network面板下，Command+E(Mac)或者Ctrl+E(Windows,Linux)
clipboard.png
清除网络请求
clipboard.png
跨页面加载时，保留网络请求记录
当页面重载或者页面跳转时，默认情况下，Network面板下的网络请求记录表也是刷新的。如果想保留之前页面的网络请求数据，可以勾选Preserve log。
常用的一个应用场景：登录/注册时会调用登录/注册API，开发者想查看这个接口返回的情况，但是登录/注册成功后一般会跳转到新的页面，导致了Network面板的请求记录被刷新从而看不到登录/注册接口返回的情况。此时勾选上Preserve log，无论跳转到那个页面，都能在Network网络请求记录表中查看到之前接口返回的情况。
clipboard.png
页面加载时捕获屏幕截图
捕获屏幕截图可以分析在页面加载的过程中，用户在不同的时间段内看到的网页是什么样子的。
点击Capture screenshots图标开启捕获功能，当图标变为蓝色表示已开启，重载页面即可看到不同时间的屏幕截图。
clipboard.png
捕获屏幕截图之后，可以进行以下操作：
-
鼠标悬浮在一张图片上时，该图片四周会出现一个黄色的边框，同时，在
Overview和Waterfall窗口里面也分别有一条黄色的竖线，这条黄色的竖线表示这张图片的捕获时间 -
点击某一张图片，可以过滤掉在这张图片捕获之后发生的所有请求
-
双击图片，可以放大该图片
clipboard.png
改变页面加载时的条件
禁用浏览器缓存
在http请求的过程中，有些资源在页面初次加载之后会被缓存到浏览器中，也就是那些状态码为304的资源。为了尽可能准确地模拟用户第一次加载我们网页时的情景，需要禁用浏览器缓存，这样，每一个请求都是从服务端传送过来的，较为准确地反应出网页初次加载的实际情况。
clipboard.png
模拟网速条件
在Network Throttling下拉框中可以选择不同的网络条件进行模拟，如2G、3G、4G、WiFi等。
clipboard.png
除了选中已有的网络选项，也可以自定义网速相关条件：打开Network Throttling菜单，选择Custom > Add。
另一种模拟情况较为特殊，就是无网络。利用service workers，PWA(Progressive Web Apps)在无网络的情况下依然可以使用。模拟这种无网络环境，直接勾选Offline即可。
clipboard.png
提示：有时候开发者会看到Network左侧有个警告图标，这个图标就是提示开发者当前处于模拟网络条件下。
clipboard.png
覆盖用户代理
打开Network抽屉面板：在DevTools下，按Esc键即可调出DevTools的抽屉面板，可以选择、切换不同的Tab选项。
clipboard.png
Network抽屉面板打开以后，不勾选Select automatically复选框，然后选择一个用户代理或者自定义一个。
clipboard.png
