Chrome开发者工具详解 (5):Application、Security、Audits面板
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面板的更多相关文章
- Chrome开发者工具详解(5)-Application、Security、Audits面板
Chrome开发者工具详解(5)-Application.Security.Audits面板 这篇文章是Chrome开发者工具详解这一系列的最后一篇,介绍DevTools最后的三个面板功能-Appli ...
- 【转】Chrome开发者工具详解
https://www.jianshu.com/p/7c8552f08e7a Chrome开发者工具详解(1)-Elements.Console.Sources面 Chrome开发者工具详解(2)-N ...
- Chrome开发者工具详解(2)-Network面板
Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...
- Chrome开发者工具详解(1)-Elements、Console、Sources面板
Chrome开发者工具详解(1)-Elements.Console.Sources面板 Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Netwo ...
- Chrome开发者工具详解(4)-Profiles面板
Chrome开发者工具详解(4)-Profiles面板 如果上篇中的Timeline面板所提供的信息不能满足你的要求,你可以使用Profiles面板,利用这个面板你可以追踪网页程序的内存泄漏问题,进一 ...
- Chrome开发者工具详解(3)-Timeline面板
Chrome开发者工具详解(3)-Timeline面板 注: 这一篇主要讲解面板Timeline,参考了Google的相关文档,主要用于公司内部技术分享.. Timeline面板 Timeline面板 ...
- Chrome开发者工具详解(1)
Chrome开发者工具面板 面板上包含了Elements.Console.Sources.Network.Timeline.Profiles.Application.Security.Audits这些 ...
- Chrome开发者工具详解(2)
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板.Timeline面板.Profiles面板.Application面板.Sec ...
- Chrome开发者工具详解(1):Elements、Console、Sources面板
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...
- Chrome开发者工具详解(五)之Network面板
Chrome开发者工具面板 面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Se ...
随机推荐
- C# 将窗口移动到指定位置
private void button1_Click(object sender, EventArgs e) { Frm f = new Frm(); f.StartPosition = FormSt ...
- Android与JS混编(js调用android相机)
参考android相机调用,http://blog.csdn.net/yanzi1225627/article/details/33028041/,谢谢 相机怎么调用就不做赘述了,下面是js调用 ...
- 《第一行代码》学习笔记16-碎片Fragment(1)
1.碎片( Fragment):一种可以嵌入在活动当中的UI片段,能让程序更加合理和充分地利用大屏幕的空间,在平板上的应用广泛. 2.碎片同样包括布局,有自己的生命周期,甚至可理解成一个迷你型的活动. ...
- android 隔几秒再执行
今天做项目,需要前面的方法执行完等待2秒在关闭当前页面.之前使用的是Thread.sleep(2000)发现根本没有作用.经过多次尝试,发现需要使用以下方法才能实现: new Thread(){ pu ...
- select radio readonly
首先 select radio 设置 disable的会无法提交数据. 这让我很头疼 而且 readonly 无效 后来发现.我把自己绕进去了..一般涉及 只读都是 不让用户修改 .而后台只更新 可 ...
- CSS的权重(转)
CSS写的渐渐多了,他的权重问题就不得不昂首面对,之前一直得过且过的将就用着,直到最近遇到了几个大坑,一直割刺着我对前端的热情,得了得了,蒙不过去了,就发点时间记下来吧,当然还是一片转载的文章,有时候 ...
- nginx 504 Gateway Time-out错误解决办法
我们经常会发现大量的nginx服务器访问时会提示nginx 504 Gateway Time-out错误了,下面我来总结了一些解决办法,有需要了解的同学可进入参考. 一般看来, 这种情况可能是由于ng ...
- Common Subsequence--poj1458(最长公共子序列)
Common Subsequence Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 43211 Accepted: 17 ...
- asp编程中获取上下两个月第一天和最后一天的代码
经常在asp编程遇到要获取上个月第一天和最后一天的日期,获取下个月第一天和最后一天的日期.这里总结了一下,将这些asp代码全部列出来了,以便以后遇到的时候使用. 上个月第一天:<%=dat ...
- UIAppearance使用详解-备
iOS5及其以后提供了一个比较强大的工具UIAppearance,我们通过UIAppearance设置一些UI的全局效果,这样就可以很方便的实现UI的自定义效果又能最简单的实现统一界面风格,它提供如下 ...