安全面板首次现身 DevTools

hanguokai

安全面板首次现身 DevTools

英文原文：Security Panel debuts in Chrome DevTools ，Blog 地址

作者：Paul Bakaus，Google Open Web 推广工程师。翻译：韩国恺。

Chrome 安全团队一直在努力实现一个不使用 HTTP 的未来，让你和用户有理由确信用户与网站之间发送的任何数据都是非 HTTP 的。为了大家更容易地走上 HTTPS 的康庄大道，我们现在让安全面板成为了 DevTools 里的头等公民。

新的安全面板在 Chrome 48 中引入，它让开发者更容易看到证书和混合内容的问题。你可以直接在 DevTools 的顶部找到它，或者点击浏览器 URL 地址栏上的锁图标，然后点击其中的“详细”链接。

现有 “连接信息” 的问题

我们针对页面安全问题的当前解决方式是点击 URL 旁边的锁图标，然后查看其中的 “连接” 信息。

不幸的是，连接信息有一些问题：

• 对大多数用户而言太复杂
• … 但对大部分开发者又太基本
• 并且又没解释清楚是什么让锁图标“降级”了
  

概述视图：解释锁图标并揭露混合内容

锁图标表示页面的安全状态，所以知道它何时出现以及为何出现是极其重要的。新的安全面板中的概述视图解释了对于一个安全页面中的最重要的部分：

• 标示(证书)
• 连接（协议，加密方式）
• 子资源
  

现在你就一目了然为什么你的网站获得或没有获得那个安全的绿色标志。

不知道打哪冒出来的混合内容？别担心。我们直接在概述视图中说明了，点击它就会跳转到网络面板的一个过滤视图，这样你就能快速地找出违规的请求：

来源视图：连接类型和证书细节

如果需要了解特定的 TLS 的连接信息，可以查看来源视图。刷新页面，你会在左侧导航栏上看到所有资源的各个来源。

在这里你能找到所有与证书和连接类型相关的信息。另外，它还能让你通过网络面板更进一步地检视某个来源的所有资源。