---
url: https://sugarat.top/technology/study/chrome-debug3.md
---

# Chrome 调试技巧-Network

在调试网络请求时,离不开Network面板的使用

## Filter

用于过滤请求

![图片](https://img.cdn.sugarat.top/mdImg/MTYxNzgwNDk3NzgyNg==617804977826)

通过 `-` 查看所有筛选条件

![图片](https://img.cdn.sugarat.top/mdImg/MTYxNzgwNTA3MDc3Ng==617805070776)

## Preserve log

![图片](https://img.cdn.sugarat.top/mdImg/MTYxNzgwNTEyMjI5MA==617805122290)

会一直保留之前的日志，无论是刷新还是页面的跳转

## 多类型筛选

Ctrl + 鼠标左键选择要添加的类目

![图片](https://img.cdn.sugarat.top/mdImg/MTYxNzgwNTI1NDkxMQ==617805254911)

## 查看资源未压缩前大小

![图片](https://img.cdn.sugarat.top/mdImg/MTYxNzgwNTM0OTI5Mg==617805349292)

## Initiator 查看调用堆栈信息

![图片](https://img.cdn.sugarat.top/mdImg/MTYxNzgwNTUwNzY0Nw==617805507647)

## 自定义请求表中展示的项

![图片](https://img.cdn.sugarat.top/mdImg/MTYyMTIxODY5Mzc4Mw==621218693783)

## 重新发送请求

![图片](https://img.cdn.sugarat.top/mdImg/MTYyMTIxODc3NTE2MQ==621218775161)