Why do developers like to use Chrome, and how is it better than other browsers?

Developers are powerful

Page is simple

The plugin is rich

It runs smoothly and uses webKit kernel

Good support for new HTML5 features

Mobile debugging

Introduction to Chrome developer tools

1 How do I open the Developer Tool?

Windows: F12

Macos: Command +option+ I

Click the menu option to open developer mode if the shortcut keys conflict

Developer mode is open. What are these tabs for?

Function:

1&3 Review elements: view page file structure and elements, style changes dynamically.

2. Mobile terminal debugging: simulate screen resolution of various mobile phones

4 Console: Outputs log running code

5 Resource View: Static resource directory structure

6 Network request: Monitors all information, headers and data of network requests

7 Performance analysis: Analyze page frames, CPU, network usage and other performance

8 JS memory snapshot

9 Data store related

10 security

11 Performance Analysis

Detailed function description

1&3 Review Elements

Main uses:

Modifying dom Nodes

Modify the style

Find code locations based on features

2 Mobile debugging: 📱

Main uses:

Adapt page display according to different phone size

Using the window. The navigator. UserAgent android/ios do custom development

It’s just that the browser size is different, and other features still apply

4 Console Console

The main purpose

The output of js logs includes warning, information, and error information

let data = { a:1,

children:{

a:2,

children:{}

}

}

/* CONSOLE tip 1 */

// comma concatenation

Console. log(‘ Printed data is: ‘,data)

/* CONSOLE tip 2 */

// Color output

console.log(“%c”+JSON.stringify(data)+’\n’+”%c”+JSON.stringify(data)+’\n’+”%c”+JSON.stringify(data),”color: blue;” ,”color:orange”,”color:green”);

/* CONSOLE tip 3 */

//console.assert

Console. assert(false,’ This value is false’)

Console. assert(true,’ This value is true, no output ‘)

/* CONSOLE tip 4 */

// Measure time

console.time(“Array initialize”);

var a = new Array();

// for(var i=0; i<10000; i++) a[i] = “element” + i;

for(var i=0; i<1000; i++){

for(var j=0; j<1000; j++){

}

}

console.timeEnd(“Array initialize”);

/* CONSOLE tip 5 */

// Use getEventListeners to check the binding times of page elements

//getEventListeners(document.querySelector(‘#container’))

let el = document.querySelector(‘#container’);

el.addEventListener(‘click’,function(){

let b = 2;

})

/* CONSOLE tip 6 */

//console.error

Console. error(‘ Error message: ‘,’ data parsing error ‘)

/* CONSOLE tip 7 */

//console.warn

Console. warn(‘ Warning message :’,” syntax may not be compatible “)

In addition to outputting logs, the console TAB can also execute JS codes, such as manipulating DOM, alert, and viewing variables

5 Resources View Source

Common uses:

View static resources at the current address

Breakpoint debug code

Event breakpoints, XHR requests breakpoints. Quickly locate code locations

Step over next function call and step into next function call

⬆ ️ ⬆ ️

Jump code block, only declared, not called into the function inside

6 Network request Network

Click on one of the specific requests to display the following screen

  • Name Resource Name. Click the resource Name to view details about the resource, including Headers, Preview, Response, Cookies, and Timing.

  • Status INDICATES the HTTP Status code.

  • Type MIME Type of the requested resource.

  • Initiator indicates the object or process from which the request originated (the source of the request).

  • Size Size of files downloaded from the server and requested resources. This column is displayed if the resource is fetched from cache.

  • Time Time of a Request or download. Total Time from the Time when a Request is initiated to the Time when a Response is received.

  • Timeline displays the visual waterfall flow (time status axis) of all network requests. Click the Timeline to view the details of the request, and click the column header to sort the request according to the specified field

Here we can see the specific content of the network request, response time, return value, request status and other information, easy to troubleshoot problems.

7 Performance Analysis Performance

8 JS Memory snapshot Memory

9 Data store related

Applicaation:

In the Manifest pane is the manifest.json file required by PWA, which tells the browser how to “install” the app on the user’s desktop and what information to display once it is installed. It mainly displays its information and does not have operational nature, such as the following:

{

“name”: “testApp”,

“short_name”: “tApp”,

“display”: “fullscreen”,

“background_color”: “#000”,

“start_url”: “/”,

“description”: “A test web app for manifest”,

“icons”: [

{

“src”: “xxxx”,

“type”: “image/png”,

“sizes”: “192×192”

}

]

}

Service Workers is a script running in the background process of the browser independent of the current page. As it runs in the context of worker, it cannot access DOM, but can do some simple auxiliary logic processing and offline cache.

storage

This panel is mainly used to display an overview of the information stored in the current browser. Clear various caches (you can select the content to be cleared by yourself). The panel is as follows:

Storage Local Storage

localsStorage sessionStorage

IndexDB is a browser-provided database that stores key-value pairs locally, built on a transactional database model (operations take place in the context of the transaction object being created), and its apis are mostly asynchronous.

Cache Storage can be considered a list of resources cached by the SW (at least for now). I have not yet written or found a suitable example for other scenarios). If compatible, same as Service Workers

Background Services are divided into Background Fetch and Background Sync. Background Fetch is used to generate Fetch resource tasks that are suspended in the Background, and Background Sync is used to generate synchronization tasks that are suspended in the Background. Compatibility… Except for Chrome 49+ and Edge 76+ and Opera 36+.

10 safety and Security

Use Overview in Security to immediately find out if the current page is secure.

Click View Certificate to view the HTTPS certificate

The Security panel identifies two types of insecure web pages. Main Origin is flagged as unsafe if the requested page is served over HTTP.

If the requested page is retrieved over HTTPS, but the page then uses HTTP to retrieve content from another source, the page is still marked as unsafe. This page

Faces are called mixed content pages. Mixed content pages are only partially protected because HTTP content can be accessed by sniffers and is vulnerable to man-in-the-middle attacks.

11 Performance Analysis Lighthouse

Generate page performance reports and give recommendations for code level optimization

Sidebar 1: How does Chrome modify code styles and JS behavior without source code

Common practice: view elements, modify compressed code, repeatedly upload to the server, refresh the page for confirmation.

Better: Use the Chrome plugin, user javascritp and CSS, and then insert it into index.html.

For example:

Open the User javascritp and CSS plug-in and enter the following

Open baidu to find the page has been modified

The changes take effect online, and this script insertion allows us to solve some practical situations where the source code doesn’t work.