Solving site security issues using Chrome DevTools Security Panel

After updating my version of Google Chrome recently, I’ve noticed a number of minor changes within DevTools. Most notably the Security panel.

If you didn’t already know, Google now considers valid HTTPS as a ranking signal, and has placed a bigger emphasis on your site loading its content and resources securely.

Introduced within DevTools in Chrome 48, the Security panel not only allows you to view information about a site’s security, it can also be used to diagnose issues with your own site, amongst a number of other nifty little features.

Chrome DevTools security panel
The DevTools security panel allows you to diagnose any issues you have that are stopping your site from being secure.

Solving Non-Secure Origin Issues

The most useful section within the Security Panel for me is the fact that it easily allows you to view what resources are being loaded onto the page via a Non-Secure Origin.

Allowing you to view the request in the Network Panel with a single click is a very handy feature, easily allowing you to see exactly which resource is causing the problem.

Non-Secure Origins
Quickly filter and view Non-Secure Origins to fix mixed-content issues.

Security Panel is just one of the many new features introduced in Chrome 48.

Further Reading