Chrome操作指南——入门篇（十一）networkchrome的network面板算是我们用的最频繁的面板之一了，我们

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第十四天，点击查看活动详情

前言

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

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

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

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

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

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

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

Replay XHR.gif

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

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