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

Source: Internet
Author: User

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.

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.