chrome 打开f12会刷新页面_chrome里面的功能,你清楚吗?

对于开发者来说chrome和火狐可以集成一些开发的小插件,并且里面的一些功能对开发调试很有用,所以受到开发者所喜爱,现在介绍一部分功能如下:

1.按F12调出:

09812d335afece6efd510b5e6ff83e19.png

2.chrome开发工具中,开发调试中运用最多的四个页面:元素(Elements),控制台(Console),源代码(Sources),网络(Network)等:

  • 元素(Elements):用于查看或修改Html元素,css样式,监听事件,断点等;
  • 控制台(Console):可执行js代码,查看js对象,查看调试日志及异常信息;
  • 源代码(Source):可查看html,css,js源代码,重要的是可进行js断点调试;
  • 网络(Network):可查看Head等与网络请求相关的信息。重点讲解下Network。
0b5cadbbc8940843c91280a5b6928810.png

3.网络(Network)详细介绍如下:

8c5724f5b341ef6bc07978d280c8ef2d.png
  • 记录按钮:处于打开状态时记录记录网络连接的信息记录;
  • 清除按钮:清除当前的网络连接信息记录;
  • 捕获截屏:记录页面加载时一些时间点的页面渲染情况;
ac64d25ef78b32e8585eaae047b2a8df.png
  • 过滤器:能够自定义查询条件,找到想要的资源;
218567000f912d11a46ef42d593b540f.png
  • 显示详细信息:
0b88e905f5a4831bfbfcd7039dd98f91.png
a72adc9436c7ea22c5314b80ecef4120.png
  • Preserve log:是否保留日志,如果勾选后,再次加载此页面,原来的请求信息会保留下来,不会被清除;
  • Disable cache:是否进行缓存,打开开发者工具的情况下,刷新页面后会,页面资源不会记入缓存;
  • Offline:设置模拟限速,设置限速各种网络环境下不同用户的访问本页面的情况;

4.Network请求信息具体说明:

4294b7e1585947b8c53bb931cb125aaf.png

分四个标签:

  • Headers:此列出资源的请示url,Http方法,响应状态码,请求头和响应头以及请求参数等;
  • Previes:用于资源的预览,可查看请求返回的结果数据;
f3b6ac5bdb151027be56ed1f0d5d127a.png
  • Response:展示还未进行格式处理的结果数据;
74d90148429f027da2193d8f785afd01.png
  • Timing:资源请求的花费时间;

对请求右键里面功能说明:

f3a8782553f665fc7bb5c30926260c78.png
  • Copy link address:复制请求url到剪切板
  • Copy response:复制http响应信息到剪切板;
  • Copy request headers:复制http请求头信息到剪切板;
  • Copy response headers:复制http响应头信息到剪切板;
  • Copy as cURL:复制url请求作为一个curl命令到剪切板;
  • Copy all as HAR:将网络请求信息以HAR格式复制到剪切板;
  • Open in new tab:在新tab打开资源连接;
  • Clear Browser Cache:清理游览器缓存与功能Disable cache类似;
  • Clear Browser Cookies:清除游览器cookies信息;
参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

HRGO

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值