chrome开发工具指南(三)
Security 面板
- 使用 Security Overview 可以立即查看当前页面是否安全。
- 检查各个源以查看连接和证书详情(安全源)或找出具体哪些请求未受保护(非安全源)。
Security Overview
要查看页面的整体安全性,请打开 DevTools,然后转至 Security 面板。
您首先会看到 Security Overview。Security Overview 会一目了然地告诉您页面是否安全。 安全页面会通过消息 This page is secure (valid HTTPS). 指示

点击 View certificate 查看主源的服务器证书。

非安全页面会通过消息 This page is not secure. 指示
Security 面板可以区分两种非安全页面。 如果请求的页面通过 HTTP 提供,则主源会被标记为不安全。

如果请求的页面通过 HTTPS 检索,但页面会继续使用 HTTP 检索其他源的内容,然后页面仍然会被标记为不安全。这称为混合内容页面。 混合内容页面仅受部分保护,因为 HTTP 内容可以被嗅探器获取到且易受到中间人攻击。

点击 View request in Network Panel 打开 Network 面板的过滤视图,然后查看具体是哪些请求通过 HTTP 提供。 这将显示来自所有源的所有未受保护的请求。

检查源
使用左侧面板可以检查各个安全或非安全源。
点击安全源查看该源的连接和证书详情。

如果您点击非安全源,Security 面板会提供 Network 面板过滤视图的链接。

点击链接可以查看具体是源的哪些请求通过 HTTP 提供。

chrome开发工具指南(三)的更多相关文章
- Chrome 开发工具指南
Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...
- chrome开发工具指南(一)
注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方 ...
- chrome开发工具指南(十二)
使用 Device Mode 模拟移动设备 使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站.了解如何使用 Device Mode 模拟多种设备及其 ...
- chrome开发工具指南(七)
检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过 ...
- chrome开发工具指南(六)
检查和编辑页面与样式 使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS. 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素. ...
- chrome开发工具指南(二)
Application 面板 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件. 使用 Service Worker 窗格执行与服务工作线程相关 ...
- chrome开发工具指南(十四)
模拟和测试其他浏览器 您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行.即使 Device Mode 可以模拟 iPhone 等多种其他设备,我们仍鼓励您查看其他浏览器模拟解 ...
- chrome开发工具指南(十三)
模拟传感器:地理定位与加速度计 由于大多数桌面设备都没有 GPS 芯片和加速度计,所以测试它们比较困难.Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降 ...
- chrome开发工具指南(十一)
检查资源 使用 Application 面板的 Frames 窗格可以按框架组织资源. 您也可以在 Sources 面板中停用 Group by folder 选项,按框架查看资源. 要按网域和文件夹 ...
随机推荐
- Android studio java.lang.UnsatisfiedLinkError
最近开始转android Studio 本来以为新的开发工具会大大的提高效率 .结果我错了.今天踩了一天的坑. 我的项目中用到了so的文件.通常情况下在 eclipse中我们在libs/armeabi ...
- python-继承类执行的流程
在读python数据机构与算法, 发现了下面这个例子, 之前没有碰到过, 记录下来 In [17]: class A: def f(self): self.g() def g(self): print ...
- 谈谈渲染,玩玩nginx——前后端分离,转发请求到Tomcat的尝试
一.谈谈"渲染" 相信好多人都挺听过"渲染"这个词,但不清楚它是什么意思?前端开发以为这是后端的活儿,后端开发以为是前端的事儿,推着推着就不了了之.其实渲染很简 ...
- 【前端,干货】react and redux教程学习实践(二)。
前言 这篇博文接 [前端]react and redux教程学习实践,浅显易懂的实践学习方法. ,上一篇简略的做了一个redux的初级demo,今天深入的学习了一些新的.有用的,可以在生产项目中使用的 ...
- Given n pairs of parentheses, write a function to generate all combinations of well-formed parentheses. For example, given n = 3, a solution set is: "((()))", "(()())", "(())()", "()(())", "()()()"
思路:采用递归的思想,当左括号数大于右括号数时可以加左或者右括号,否则只能加左括号,当左括号数达到n时,剩下全部.不过,每一个方法的调用都会产生一个栈帧,每执行一个方法就会出现压栈操作,所以采用递归的 ...
- git分支管理之Feature分支
软件开发中,总有无穷无尽的新的功能要不断添加进来. 添加一个新功能时,你肯定不希望因为一些实验性质的代码,把主分支搞乱了,所以,每添加一个新功能,最好新建一个feature分支,在上面开发,完成后,合 ...
- ASP.NET Core 源码学习之 Logging[4]:FileProvider
前面几章介绍了 ASP.NET Core Logging 系统的配置和使用,而对于 Provider ,微软也提供了 Console, Debug, EventSource, TraceSource ...
- 《Java从入门到放弃》入门篇:springMVC数据传递
springMVC中的数据传递方式与JSP和Struts2相比,更加的简单.具体有什么样的区别呢?我们通过下面这张图来对比就知道了. 随手画的,有些错别字,不用太在意..... 接下来,进入正题,sp ...
- [机器学习] Apriori算法
适用场合 Apriori算法包含两部分内容:1,发现频繁项集 2,挖掘关联规则. 通俗地解释一下,就是这个意思:1.发现哪些项目常常同时出现 2.挖掘这些常常出现的项目是否存在“如果A那么B”的关系. ...
- Jedis与Redisson选型对比
1 概述 1.1. 主要内容 本文的主要内容为对比Redis的两个框架:Jedis与Redisson,分析各自的优势与缺点,为无线云管理项目中Redis编程模型的选择提供参考. 2. ...