The context menu for network

Web Developer tools Chrome

The new Security PanelThe Chrome Security team has been hard at work (rewatch the video above for a great overview) to realize a future without HTTP, a future where you and your users can be reasonably sure that whatever data you’re sending to the web stays between you and the site you’re looking at. And to to make it even easier to jump ship and join the glorious HTTPS future, we’ve made Security a first-class citizen in DevTools.

The new Security panel introduced in Chrome 48 makes it a lot easier to see any issues you have with certificates and mixed content. You can head to it directly in DevTools or by clicking on the URL bar’s lock icon, then the “Details” link.

Addressing the problems with “Connection Info”

Overview tabOur current solution for those of you who want data about page security is a click onto the little lock icon next to the URL, then parsing the info available on the “Connection” tab.

Unfortunately, this tab had several problems:

  • It’s too complicated for most users
  • …but too basic for most developers
  • and makes it unclear what causes a lock icon “downgrade”

Overview: Explain lock icon and surface mixed content

The lock icon represents the security state of the page, so knowing when and why it appears is extremely important. The overview screen in the new security panel explains the important parts that contribute to a secure page:

  • Identity (certificate)
  • Connection (protocol, cipher suite)
  • Subresources

Mixed ContentYou’ll now know at a glance why your site does or does not get the little green badge of awesomeness.

Have mixed content appear out of nowhere? No worries. We show it directly on the overview, and a click brings you to a filtered view of the Network Panel, so you can quickly look at the offending requests:

If you need information about a specific TLS connection, the Origin view will help. Reload the page and you’ll see every individual origin for all resources appear in the left hand navigation.

From here, you can find out everything about the certificate used and the connection type. In addition, it gives you the handy ability to drill down further to inspect all resources coming from that origin via the Network Panel.

Give the new Security panel a try and and let us know what you think on Twitter or via bug/feature ticket!

Source: developers.google.com
RELATED VIDEO
Chrome Web Developer/Designer Tools - Google Extensions
Chrome Web Developer/Designer Tools - Google Extensions
Chrome Web Developer Tools Serial (chrome web developer
Chrome Web Developer Tools Serial (chrome web developer ...
Google Chrome Web Browser - Developer Tools
Google Chrome Web Browser - Developer Tools
RELATED FACTS
Share this Post

Related posts

Choosing BI Solution: Tibco Spotfire or Tableau?

Choosing BI Solution: Tibco Spotfire or Tableau?

JUNE 26, 2017

Recently Business Intelligence (BI) is gaining increasing importance among successful companies. Business Intelligence allows…

Read More
Mozilla Web Developer tools

Mozilla Web Developer tools

JUNE 26, 2017

Have a question about how to use the features in Developer Tools, or looking for more details about one of the specific tools?…

Read More