进阶部分

进阶部分

Network面板的功能是什么,Network面板的工具栏部分和面板栏部分的详细介绍

2018-09-21侠课岛    初级拔高       

前端/前端/前端开发调试 37     0     5377

在前一章中,我们主要围绕 Chrome 开发者工具的 Element、Console、Sources 面板,介绍了前端基础调试的方法。然而前端的水可不止这点深度,这一章我们将深入研究下去,介绍前端网络、存储、性能等的调试方法。

3.1 网络好帮手:Network 面板介绍

开发者工具的 Network 面板主要记录了浏览器与服务器之间资源请求的过程。当我们访问一个网站时,本质是通过 URL 去请求对应的资源。现代的网站中包含了大量的请求,如文件、图片、视频、音频等。任何一个请求的失败都会大大地影响我们的浏览体验。

因此熟练用好 Network 面板对我们做前端的小伙伴来说,也是必不可少的技能之一。下面我们以 B站 作为例子,介绍一下 Network 面板中各个菜单的用法。我们打开开发者工具切换到 Network 面板,然后输入 B站的地址。在页面加载的过程中我们就能看到 Network 的变化了。

工具栏部分

Network 面板可以分为上下两部分来看。我们先来看上面一部分。这一部分主要为工具栏,可以对 Network 进行设定。其中有两个比较重要的选项我们详细介绍一下。

Preserve log 勾选上之后,Network 就会保存每一次的请求。那么这有什么用呢?相信有小伙伴已经想到了,可以让我们查看登录、表单提交等会完全刷新页面的请求。

因为在默认状态下,当我们进行登录操作时,页面往往会进行跳转,此时面板中的内容也会随之刷新,这种情况下我们是无法查看登录操作时的信息的(如发送的数据、请求地址等)。勾上之后,请求的信息就会被保留下来,那么在我们登录完成后就能回过头去查看了。可以看一下下面的例子,我们成功看到了 login 请求的相关信息。

Offline Online 是用于控制网络状态的。“我们公司网速太好了,不知道怎么测试低网速的情况” 这样的烦恼完全是可以解决的。Offline 为离线模式;在 Online 中,我们可以看到网络环境的选项,默认有快 3G 、慢 3G、离线选项,最后一项是自定义,就会进入我们第一章介绍的网络环境设置页面。

如果你在项目中使用到了懒加载、预加载等处理方式时,可以通过这个工具来模拟网络环境进行测试。

面板栏部分

下面我们来介绍面板部分。面板部分虽然地方占得大,但是内容要相对简单一些。所以各位小伙伴不用担心。

我们文字不如实践,我们先跟着下面的例子来走一遍。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

37

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?