Application面板简介

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

这个面板跟前前面几道硬菜(Network面板Timeline面板Profiles面板)比起来简单多了,这里就稍微作一下介绍:

  • Local Storage 如果你在开发过程中使用了local storage来存储键值对(KVPs),那么你就可以通过Local Storage窗格来检查、新增、修改、删除这个键值对。

  • Application Cache 你可以使用Application Cache窗格去查看通过Application Cache API创建的资源。

  • Frames 将页面上的资源按frame类别进行组织显示。

Frames窗格

在上图中可以查看到顶级的top是一个主文档,在top下面是主文档的Fonts、Images、Scripts、Stylesheets等资源。最后一个就是主文件自身。

在资源上右击后在弹出菜单选择Reveal in Network Panel,就会跳转到Network面板并定位到该资源的位置。

你也可以在Sources面板里面按frame类别来查看资源信息。

Security面板简介

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

HTTPS(Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版。即HTTP下加入SSL层,HTTPS的安全基础是SSL,因此加密的详细内容就需要SSL。 它是一个URI scheme(抽象标识符体系),句法类同http:体系。用于安全的HTTP数据传输。https:URL表明它使用了HTTP,但HTTPS存在不同于HTTP的默认端口及一个加密/身份验证层(在HTTP与TCP之间)。 > HTTPS和HTTP的区别主要为以下四点: > ① https协议需要到CA申请证书,一般免费证书很少,需要交费。 > ② http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。 > ③ http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。 > ④ http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

如果网页是安全的,则会显示这样一条消息:This page is secure (valid HTTPS).。

通过点击View certificate可以查看main origin的服务器证书信息。 点击左侧可以查看指定源的连接和证书详情。

如果网页是不安全的,则会显示:This page is not secure.。

该面板可以区分两种类型的不安全的页面:

  • 如果被请求的页面通过HTTP提供服务,那么这个主源就会被标记为不安全。

  • 如果被请求的页面是通过HTTPS获取的,但这个页面接着通过HTTP继续从其他来源检索内容,那么这个页面仍然被标记为不安全。这就是所谓的混合内容页面,混合内容页面只是部分受到保护,因为HTTP内容(非加密的内容)可以被嗅探者入侵,容易受到中间人攻击。

点击左侧则提供一个跳转到Network面板视图的链接信息。

中间人攻击(Man-in-the-Middle Attack,”MITM攻击”)是一种“间接”的入侵攻击,这种攻击模式是通过各种技术手段将受入侵者控制的一台计算机虚拟放置在网络连接中的两台通信计算机之间,这台计算机就称为“中间人”。

Audits面板简介

对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等。

选中Network Utilization、Web Page Performance,点击Run按钮,将会对当前页面进行网络利用率和页面的性能优化作出诊断,并给出相应的优化建议。

作者:伯乐在线专栏作者 - CharlieChu

原文地址:https://mp.weixin.qq.com/s/xVp3BkVyncWS6qOGn0XFOw

Chrome开发者工具详解 (5):Application、Security、Audits面板的更多相关文章

  1. Chrome开发者工具详解(5)-Application、Security、Audits面板

    Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...

  2. 【转】Chrome开发者工具详解

    https://www.jianshu.com/p/7c8552f08e7a Chrome开发者工具详解(1)-Elements.Console.Sources面 Chrome开发者工具详解(2)-N ...

  3. Chrome开发者工具详解(2)-Network面板

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

  4. Chrome开发者工具详解(1)-Elements、Console、Sources面板

    Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...

  5. Chrome开发者工具详解(4)-Profiles面板

    Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...

  6. Chrome开发者工具详解(3)-Timeline面板

    Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...

  7. Chrome开发者工具详解(1)

    Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...

  8. Chrome开发者工具详解(2)

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...

  9. Chrome开发者工具详解(1):Elements、Console、Sources面板

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...

  10. Chrome开发者工具详解(五)之Network面板

    Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...

随机推荐

  1. CentOS管理

    1.使用yum安装和卸载软件 主要功能是更方便的添加/删除/更新RPM包. 它能自动解决包的倚赖性问题. 它能便于管理大量系统的更新问题 一.yum list|more               列 ...

  2. IE6,IE7下滚动条没有生效解决方法

    需要加个相对定位 position:relative;

  3. Mac_配置adb环境变量

    1.打开终端Terminal. 2.进入HOME目录:命令行输入 echo(这之间有一个空格) $HOME 3.创建.bash_profile文件:命令行输入 touch(这之间有一个空格).bash ...

  4. DTO学习系列之AutoMapper(二)

    本篇目录: Flattening-复杂到简单 Projection-简单到复杂 Configuration Validation-配置验证 Lists and Array-集合和数组 Nested m ...

  5. BestCoder Round #81 (div.2)1001

    Machine Accepts: 580 Submissions: 1890 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65 ...

  6. Python爬虫学习:一、相关概念与基础知识

    爬虫: 网络爬虫是一个自动提取网页的程序,它为搜索引擎从万维网上下载网页,是搜索引擎的重要组成.传统爬虫从一个或若干初始网页的URL开始,获得初始网页上的URL,在抓取网页的过程中,不断从当前页面上抽 ...

  7. Django的model中日期字段设置默认值的问题

    之前写过这样一个model: class MonthlyFeeMember(models.Model): worker = models.ForeignKey(Student, verbose_nam ...

  8. js 日常问题记录

    1.解决ie6下css背景图不缓存 try{ document.execCommand('BackgroundImageCache',false,true); }catch(e){} 2.为ajax设 ...

  9. js判断输入的是单字节还是双字节

    计算机上每一个字符.数字.汉字.字母等,都对应着unicode编码,unicode编码小于255的为单字节,大于255.小于65535的为双子节或三字节 查看一个字符对应的unicode编码 var ...

  10. EF 一对一,一对多,多对多 Flunt API 配置

       一对一 就拿后台用户权限相关的实体来说明吧,用户表,用户详细表,是一对一的关系: /// <summary> /// 用户信息类 /// </summary> publi ...