Chrome 操作指南——入门篇（十一）network

前言

chrome 的 network 面板算是我们用的最频繁的面板之一了，我们项目中请求的资源都会这个面板里面展示，还会提供给我们很多信息。而功能一旦繁杂的话，不熟悉的话，效率肯定会大大折扣。今天我给大家介绍几个实用的小技巧，希望对各位在接下来的工作中起到作用。

hide overview 和 capture screenshots

如果你看 network 面板只是为了看一下请求的接口列表，状态等基本信息，对资源请求的时间线以及相应时间段的页面加载情况并不关心的话。

你可以点击上图箭头所指的按钮，关闭相应红框内的信息。

filter

如果你只想产看 xhr 请求，或者 img 资源的话，可以点击 filter 输入框旁边的按钮进行筛选。

当然，你可能筛选的可能要更细致一点。你可以在输入框输入字符串或者正则表达式进行筛选。

在输入框中输入-符号，会出现提示，你可以对method，status-code等内容进行筛选。

Replay XHR

当你想重新以 XHR 形式请求一个接口的时候，你可能会刷新页面。其实完全不用，你只需右键选择replay xhr既可。

XHR/fetch breakpoint

当你想对某个接口进行拦截的时候，你可以添加一个XHR/fetch breakpoint，输入相应接口的 url 内容，对接口进行拦截。

注：当只添加 add breakpoint 的时候，没有输入内容的话，是对所有请求就行拦截。