chrome开发者工具

基于版本: 94.0.x.x

network-网络面板

controls-控制外观和功能

此模块为控制外观和功能，如停止抓包、清除记录、屏幕截图、显示全部记录、禁用缓存、离线、模拟网络环境等。

• 停止/开启抓包, 清楚记录
  
• 屏幕截图
  开启屏幕截图后会看到图片根据时间轴依次显示出来，图片上方显示具体时间
  • 单击图片只显示此图片之前发生的所有请求
  • 双击图片放大
    
• 显示全部记录
  重新加载或跳转到其他页面后，保留之前的网络活动记录
  
• 禁用缓存
  

filters-过滤

过滤请求, 按住ctrl可以多选

• Hide data URLs

Data URL技术是图片数据以base64字符串格式嵌入到了页面中，和HTML融为一体, 请求中以data: 开头

• filter输入框
  输入字符串，模糊匹配请求，同时也可以支持关键词, 如下:
  • domain 过滤域名
    
  • status-code 过滤状态码
  • has-response-header 过滤指定响应头
  • is
    is:running 可以显示WebSocket资源
  • larger-than 过滤大于指定大小的请求
  • method 过滤请求方式 get/post/options
  • mime-type 过滤MIME类型资源 application/json等
  • scheme 过滤http或https的请求
  • set-cookie-domain 显示有 Set-Cookie头指定值匹配的domain
  • set-cookie-name 显示Set-Cookie头名称与指定值匹配资源
  • set-cookie-value 显示Set-Cookie头值与指定值匹配资源

overviews-资源检索时间线

查看资源检索的时间线，可调整起始和结束时间

Requests Table-请求列表

- 调整请求显示的字段
- 操作具体的请求
![在这里插入图片描述](https://img-blog.csdnimg.cn/a43b4d764405499b8c0c8aad7464a08b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5oiR5pivT0s=,size_20,color_FFFFFF,t_70,g_se,x_16)

• Summary
  显示: 1.请求的总数 2.传输的数据量 3.加载的时间

Elements

元素面板，可以看到渲染后的最终结果，可以操作DOM和CSS。同时左边按钮可以模拟手机网页浏览器

• 查看元素伪类 css 样式
  

• 临时增删元素class
  

• 直接对页面进行编辑
  在控制台输入 document.body.contentEditable=“true”

• 查看 placeholder 样式
  

• 测试页面性能和 SEO
  

• 查看元素绑定事件
  鼠标悬停handler可查看具体代码
  

• 全局搜索
  搜索该网页下所有引入的文件, 按esc弹出如下界面:
  

• Performance 检查运行时性能
  点击左上角的 Record 按钮开始记录，然后你模拟正常用户使用网页。测试完毕后，点击 Stop

  1. FPS 对应的是帧率，红色代表帧率低，可能会降低用户体验；绿色代表帧率正常，绿色条越高，FPS 越高
  2. CPU 部分上有黄色、紫色等色块，它们的释义请看图的左下角。谁的占比高，说明 CPU 主要的时间花在哪里
  3. HEAP 就是堆内存占用
     

• Rendering 实时检测网页变化

  1. Paint flashing，实时高亮重绘区域（绿色）。
  2. Layout Shift Regions，实时高亮重排（重新布局）区域（蓝色）。
  3. Layer borders，将合成层用边框标出来（橙色、橄榄色、青色）。
  4. Frame Rendering Stats，显示 GPU 的信息
     

Console

控制台面板，可以作为shell在页面上与JaveScript交互

Sources

源代码面板，可以设置断点来调试JaveScript

Application

应用面板，使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表

Security

安全面板，用于调试混合内容、证书等问题