Google浏览器 开发者工具使用详情

时间:2024-10-07 14:24:03

浏览器最多6个线程
同时发送209个请求信息
在这里插入图片描述

Elements:查看网页源代码可以修改css样式
在这里插入图片描述

Console:记录开发的日志信息和报错信息方便开发者及时能发现错误地方在哪里,一般用() 来打印调试信息,知道变量输出了什么,是不是我们想要的东西
在这里插入图片描述

Sources:调试代码,在js代码块中写上debugger即可调试代码可以知道变量的变化,Watch在这里设置想要监控的变量,随着单步调试的进行,这些被监控的变量的值也会随之更新。

在这里插入图片描述

Network:网络请求信息,分析http请求后的到的各个请求信息(状态、资源类型、大小、所用时间)
点击文件后弹出一个里面包括了headers、preview、response、cookies、timing
在这里插入图片描述

  • headers:包括了URL、http方法、响应状态码、请求头、响应头,及他们各自的值,请求参数等
  • preview:预览面板,可以查看响应信息
  • pesponse:响应信息,响应json格式等
  • timing:响应时间
    在这里插入图片描述

cookie:维持服务端会话状态

Memory:查看js文件所占用电脑的内存大小
在这里插入图片描述

Application:记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等

  • Manifest
  • Service Workers:服务设置
  • Clear Storage:清除缓存信息
    在这里插入图片描述

Storage存储

  • Local Storage 本地存储
  • Session Storage 有效时间存储
  • IndexedDB 本地存储键值对的数据库
  • Web SQL
  • Cookies 面板查看新增、修改、删除httpcookies

Frames 该面板显示该同站所有内容资源

Security 通过该面板你可以去调试当前网页的安全和认证等问题并确保您已经在你的网站上正确地实现HTTPS。

相关文章