Chrome Developer Tool Details (5): Application, Security, audits panel

Application Panel Introduction

This panel is primarily a record of all resource information loaded by the site, including data stored (Local Storage, Session Storage, IndexedDB, Web SQL, Cookies), cached data, fonts, pictures, scripts, stylesheets, etc.

This panel is much simpler than a few hard dishes (the network Panel, the Timeline panel, the Profiles panel) in front of you, and here's a little introduction:

• Local Storage If you use local Storage to store key-value pairs (KVPS) during the development process, you can check, add, modify, and delete this key-value pair through the local Storage pane.

• Application cache You can use the application cache pane to view the resources created through the application cache API.

• Frames organizes the resources on the page to be displayed by the frame category.

Frames Pane

You can view top-level top as a main document, and under top are resources such as fonts, Images, Scripts, stylesheets, and so on for the main document. The last one is the main file itself.

When you right-click on a resource and select the Reveal in Network panel from the pop-up menu, it jumps to the network pane and navigates to the location of the resource.

You can also view resource information by the frame category in the sources panel.

Introduction to the Security panel

This panel allows you to debug issues such as security and authentication of the current Web page and ensure that you have implemented HTTPS correctly on your site.

HTTPS (Hyper Text Transfer Protocol over secure Socket Layer) is a security-targeted HTTP channel and is simply a secure version of HTTP. That is, the SSL layer is added under HTTP, the security base of HTTPS is SSL, so the detailed content of encryption needs SSL. It is a URI scheme (abstract identifier system) with syntax similar to http: System. For secure HTTP data transfer. Https:url indicates that it uses HTTP, but HTTPS has a different default port than HTTP and an encryption/authentication layer (between HTTP and TCP). > HTTPS and HTTP are the main differences between the following four points: >①https protocol requires a certificate to the CA, the general free certificate is very small and requires a fee. >②http is a Hypertext Transfer Protocol, the information is plaintext transmission, HTTPS is a secure SSL encryption transport protocol. >③http and HTTPS use a completely different connection, the same port, the former is 80, the latter is 443. The >④http connection is simple and stateless; The HTTPS protocol is a network protocol built by the SSL+HTTP protocol for encrypted transmission and authentication, which is more secure than the HTTP protocol.

If the Web page is secure, a message is displayed: This page is secure (valid HTTPS).

You can view the server certificate information for main origin by clicking View Certificate. Click on the left to view the connection and certificate details for the specified source.

If the webpage is unsafe, it will be displayed: This page is not secure.

The panel can differentiate between two types of unsafe pages:

• If the requested page is serviced via HTTP, the primary source is flagged as unsafe.

• If the requested page was acquired over HTTPS, but the page continues to retrieve content from other sources via HTTP, the page is still marked as unsafe. This is the so-called mixed content page, where mixed content pages are only partially protected because HTTP content (unencrypted content) can be hacked by sniffers and susceptible to man-in-the-middle attacks.

Click on the left to provide a link to the network panel view.

A man-in-the-middle attack (Man-in-the-middle Attack, "MITM attack") is an "indirect" intrusion pattern that, by various technical means, places a computer under the control of an intruder between two communication computers in a network connection, which is called " Middleman. "

Audits Panel Introduction

The current web page network utilization, Web page performance of the diagnosis, and give some optimization recommendations. For example, list all the unused CSS files.

Select Network utilization, Web page performance, and click the Run button to diagnose the current page for Web utilization and page performance optimization, and to give recommendations for optimization.

Bole Online column Author-charliechu

Original address: Https://mp.weixin.qq.com/s/xVp3BkVyncWS6qOGn0XFOw

Chrome Developer Tool Details (5): Application, Security, audits panel