preface

Put together a detailed introduction to the Chrome console panel

Element

Find any element in the HTML source code of a web page, manually modify the attributes and styles of any element and get feedback in the browser in real time.

Press Ctrl+Shift+J to open the console panel. Select the target DOM to view or modify CSS properties and check bound events.

We bind the button to a click event, then open the console and select the corresponding DOM node. You can see the events bound to the Button in the Event Listeners column below. Click on the Sources panel to see where the code is located.

.<body>
  <button id="btn">button</button>
</body>
<script>
  let btn = document.getElementById("btn");
  btn.onclick = function () {
    alert('Button is clicked');
  }
</script>
Copy the code

Console

The Console records the log information during the development process of the developer and can be used as the command line Shell to interact with JS.

instruction describe
console.log() General method for printing content
console.error() Prints an error message
console.warn() Print a warning message
console.info() Prints information description information
console.time() Starts a timer length with an input parameter as a specific name
console.timeEnd() Terminates a specific timer and prints its time from start to finish in hao seconds.

This list only lists some common basic interfaces. For details, please visit the official website: MDN

.<script>
  console.log('log')
  console.error('error')
  console.warn('warn')
  console.info('info')
	
  console.time('timer');
  setTimeout(() = > {
    console.timeEnd('timer');
  }, 1000);
</script>
Copy the code

Press Ctrl+Shift+J to open the console panel.

We can see that the contents in parentheses have been printed out. Click the Link at the back to jump to the source code output statement in the Sources panel.

Network

Each Request resource information (including Request header, Request parameters, response header, response data, Request status, resource type, size, time, etc.) is obtained by analyzing HTTP Request after launching webpage Request Request.

Sources

The Sources panel is almost one of Chrome’s most important functions, and debugger breakpoint debugging is the best way to solve problems.

First, add debugger to the code, open F12 development tool, switch to Sources panel and click button as shown in the picture:

let btn = document.getElementById("btn");
btn.onclick = function () {
  debugger
  alert('Button is clicked')}Copy the code

Application

Record all resource information loaded by the website, including stored data (Local Storage, Session Storage, IndexedDB, Web SQL, Cookies), cached data, fonts, images, scripts, style sheets, etc.

Local Storage

The read-only localStorage property allows you to access a Document source (Origin) object Storage; The stored data is saved in the browser session. LocalStorage is similar to sessionStorage, but the difference lies in that: Data stored in localStorage can be retained for a long time. When the page session ends — that is, when the page is closed, the data stored in sessionStorage is erased.

new

localStorage.setItem('id'.'999');
Copy the code

read

let id = localStorage.getItem('id');
console.log(id);/ / 999
Copy the code

remove

// Remove the specified item
localStorage.removeItem('id');
// Remove all
localStorage.clear();
Copy the code

Session Storage

The sessionStorage property allows you to access a sessionStorage object corresponding to the current source. It is similar to localStorage except that data stored in localStorage does not have an expiration date, while data stored in sessionStorage is cleared when the page session ends. The API is the same as that of Local Storage.

new

sessionStorage.setItem('id'.'999');
Copy the code

read

let id = sessionStorage.getItem('id');
console.log(id);/ / 999
Copy the code

remove

// Remove the specified item
sessionStorage.removeItem('id');
// Remove all
sessionStorage.clear();
Copy the code

Cookies

The client sends a request to the server. The server sends an HttpResponse response to the client that contains the set-cookie header. The client saves the Cookie and then sends the request to the server. HttpRequest requests contain a Cookie header — the server returns the response data

Read and set cookies

document.cookie = 'id=999' console.log(document.cookie); // "id=999"Copy the code

Performance

If you need more information than Timeline has to offer, try Profiles, such as recording JS CPU execution time details, displaying MEMORY consumption of JS objects and associated DOM nodes, and recording memory allocation details.

Memory

You can view the memory occupied by JavaScrit of the current web page.

Memory details

Security

You can use the Security panel in Chrome DevTools to debug Security risks, whether the current page is secure, and information about HTTPS certificates.

Understand Security Issues (Security Panel)

Lighthouse

Used to analyze web applications and web pages, collect modern performance metrics and provide advice on developer best practices.

Lighthouse Details