Web Front-end debugging tool-magic Console and debugging tool console

Web Front-end debugging tool-magic Console and debugging tool console

 

Preface

 

First: I do not know how many people found that Baidu's recruitment information on the Baidu homepage on the "Console" of the browser development tool:

 

 

 

 

Today, we will introduce the Console panel in the Web Front-end debugging tool. It should be said that as long as it is a browser, there will be some developer tools, this is the Console shown on the image above. I will give a basic explanation on Google's browser.

 

Console adventure

Today, we want to focus on the "Console" in the developer tool. Before introducing the Console, we will first introduce several other panels:

Element: it is mainly used to debug html Tag code and css style code in a webpage.

Network: view the http Communication Status of a webpage, including Method, Type, and Timeline (Time Response of Network requests ).

Source: View JS files and debug JS Code

Timeline: View js execution time, page element rendering time, etc.

Profiles: used to view the performance of web pages, such as CPU and memory consumption

Resources: Used to view various loaded resource files, such as js, css, and images.

Audits: You can analyze the current web page and quickly analyze which resources are used and which resources are not used. Then, you can give suggestions.

Console: You can view error information, print debugging information, debug js Code, and view it as a Javascript API.

 

Code debugging

 

We can use the console to debug the js Code:

 

 

Execute the code to Line 2. If you want to print "result", I can debug it on the Console and enter the code: "alert (" result = "+ result ); "Press enter to display the result;

 

 

 

You can also enter the code "console. log (" result = "+ result);" to print the result directly, for example:

 

 

The printing and debugging functions of the console are described above. The following describes its api functions:

 

Api functions

The core object of the Console is the console. If you want to view the methods and properties of the Console, you can directly enter "console" in the console and run the command. dir (console) ", you can also view the methods and properties of the console object;

 

 

 

 

Let's take a look at the method of a commonly used date function. We used "console. dir ()" to check the date function method:

 

···

 

Summary

 

The console of the browser is a very powerful panel. Although I only found the tip of the iceberg, I was deeply impressed by the tip of the iceberg! This is just to open a window for everyone. As for the beauty outside the window, you need to explore it on your own.