If you count the most common methods in the front end , that console.log Must be one of them . Whatever you write is native JS Or is JQuery、Vue wait , When debugging , Cannot leave console.log Method . however ,console There is more than just methods in an object log Method . Powerful console Object provides a number of methods for console debugging , Mastering these methods can greatly facilitate your debugging , Even make some cool console character drawings .

The basic output

console There is no doubt that the most basic method of object is log, This method outputs parameters directly on the console , If you enter more than one parameter , Then the output arguments on the console are separated by Spaces , As shown below :

console.log('Hello World');
console.log('Hello', 'World');

Open console , The results are shown in the following figure :

console.log Also contains something similar to Python Placeholder function , however , The individual thinks this function can be completely by ES6 The string template in , Those who are interested can learn about it , No more details here .

Classification of output

Tired of console.log Monotonous output ? Welcome to try console Object classification output function .console The object provides info、warn、error Methods output prompts separately 、 Warnings and error messages .

We enter the following code :


The results are shown in the following figure :

You can find ,warn and error Method outputs a warning and an error message, respectively . however , Why? log Methods and info The output of the method is the same ?

The reason lies in , I'm using Chrome browser , stay Chrome The browser ,log Methods and info The representation of the method is the same . however , On other browsers , such as FireFox,info The method is preceded by an information icon .

because info The effect of the method is not obvious , And the effect varies from browser to browser , So in general , We use log Methods to replace info Method .

Assert that the output

console Objects provide methods similar to assertions in unit tests :assert. This method takes two parameters , The first parameter is the assertion condition , The second parameter represents the assertion information .

Same as unit test assertions , When the assertion condition is true when ,assert There is no output ; Only if the assertion condition is false when ,assert Method outputs an assertion error message in the console .

We enter the following code :

console.assert(true, 'true')
console.assert(false, 'false')

The console is shown below :

You can find , The console outputs only that assertion with the condition false The sentence of .

Grouping output

When your console outputs a lot of information , The console can be extremely cluttered , You don't even know which code is outputting a particular piece of information . here ,console Object's group as well as groupEnd Methods can save you .

Will be part of console Statements into group And groupEnd Between , You can form this part console The statement is delimited as a set of information to output . among ,group Method to receive a character , As the group name ,groupEnd Method does not accept arguments to end the grouping .

Enter the following code :'1')

The result is shown in the figure :

Click on the group arrow , You can fold groups , Easy to organize console information , Avoid overwhelming the console with information .

Form the output

We can not only group console information into output , We can also output it as a table .

console Of table Method outputs an object as a table , When the input parameter is not an object , here ,table The method is equivalent to log Method .

Enter the following code :

const obj = {
a: {
id: 1,
value: 1
b: {
id: 2,
value: 2
}; console.log(obj) console.table(obj)

The console is shown in the figure :

The console not only outputs objects as tables , Objects are also printed out as base output to facilitate viewing information .

Would the output

In daily development , There is a common debugging requirement —— Counts the number of times a piece of code is executed . Generally speaking , We'll define a variable in this code , It increments itself every time it is executed , And pass console.log Method outputs the variable .

It can be seen that , The above method is slightly troublesome , Can you solve this problem with one line of code ? Certainly. !count Method , You deserve it .

for(let i = 0; i < 5; i++){

The results are shown in the following figure :

You can find ,count Method to distinguish the different count statements by the input string .

Timing output

When testing algorithm performance , Time complexity is often used to evaluate the performance of an algorithm , however , Where does the time complexity make the code execution time intuitive ?

Not before console When the object , We get the timestamps at the beginning and end of the algorithm , Takes the difference of the timestamp as the code execution time . Obviously , This method is too cumbersome .

Use console Object's time as well as timeEnd Method to calculate the code execution time .

let sum = 0;
for (let i = 0; i < 100000;i++) {
sum += i;

The results are shown in the following figure :


In addition to the above methods ,cnosole Methods there are many more powerful methods , such as :dir、debug、trace etc. , But some of them are Chrome The effect not beautiful , Some can be Chrome debugger Perfect replacement , therefore , No more details here . If you are interested , You can learn more about it .

console More articles on debugging techniques

  1. Recommend a few good console Debugging skills

    In our daily front-end development , The most frequently used is console.log Print out the information we need to debug in the browser's console , But most people may be the same as me before , Didn't realize that console except log Out of the way , There are still a lot of it ...

  2. The front desk console Debugging skills

    The front desk console Debugging skills One .console.log() Two .console.warn() 3、 ... and .console.dir() Four .console.table() 5、 ... and .console.assert() ...

  3. console Debugging skills

    1.console.log() We often use console.log To print out the value of a variable or an entity object , You can also pass in multiple variable parameters , It prints in the order it's passed in : 1. Pass in a variable const a = 1 ...

  4. JavaScript Debugging skills console.log() Detailed explanation

    JavaScript Debugging skills console.log() Detailed explanation about JavaScript Program debugging , Compared with alert(), Use console.log() It's a better way , The reason lies in :alert() The function will block ...

  5. 【 turn 】 What you don't know Android Studio Debugging skills

    This article is written in English Android studio debug I think it's very good , from : Android Studio Now it has become a development An ...

  6. VS Debugging skills , Improve debugging efficiency ( turn ):

    If you haven't used these techniques yet , I hope this blog will help you find them . They're easy to learn , It can save you a lot of time . Run to the cursor (Ctrl+ F10) I often see people debugging applications like this : They need to debug the code in the application ...

  7. iOS All kinds of debugging skills, luxury package

    Reprinted from Catalog Preface The best chicken Enemy and know yourself you can fight a hundred battles with no danger of defeat It's broken Bug Normal operation Global breakpoint (Global Break ...

  8. What you don't know Android Studio Debugging skills

    Reprint : Android Studio Now it has become a development Android The main tool of , It's quite easy to use . As a developer , Debug and discover bug ...

  9. Visual Studio Debugging skills

    Visual Studio Debugging skills [ Original address ] Debugging Tips with Visual Studio 2010 [ The original publication date ] 2010/8/19 10:48 AM This is what I wrote about ...

Random recommendation

  1. [ translate ]Java HashMap working principle

    Most of the Java Developers are using Map, especially HashMap.HashMap It's a simple but powerful way to store and access data . But how many developers know HashMap How does the interior work ? A few days ago , I read. java.util.Ha ...

  2. IE10 A little bit. img The label problem

    I wrote a simple paragraph before demo, Later on IE10 I found that I can't use it when I use it , Let's start with the last piece of code HTML: <div class="all" id="box"> ...

  3. DataGridview Focus does not move, do not save data problem

    this.datagridLeft.ClearSelection();                this.datagridLeft.Refresh();                this. ...

  4. css Border shadow problem

    The shadow falls below :box-shadow: 0 3px 5px rgba(0, 0, 0, .2); The shadows fall around :box-shadow: 0 3px 5px rgba(0, 0, 0, .2), 0 0 ...

  5. Hibernate To solve the problem of high concurrency : Pessimistic locking VS Optimism lock

    High concurrency is a problem that must be solved in program design , The main way to solve this kind of problem is to lock the program .hibernate The locking mechanism is also implemented , The common locking methods are pessimistic lock and optimistic lock . Pessimistic lock refers to the data being locked by the outside world ( Including this system ...

  6. php Open source project learning secondary development plan

      Open source project : cms At home dedecms cmstop Abroad joomla, drupal Online retailers At home ecshop Abroad Magento Forum discuz Blog wordpress   When studying ...

  7. divmod(a,b) function

    python One function a day - divmod Digital processing functions divmod(a,b) function English description : divmod(a,b) Method returns a//b( Divide and round ) as well as a Yes b The remainder of The return result type is tuple Parameters : ...

  8. NAND The structure and working principle of flash memory

    NAND Flash memory is a voltage element , It stores data by its memory voltage , Now let's talk about its structure and working principle . The internal storage structure of flash memory is metal - Oxide layer - semiconductor - Field effect transistors (MOSFET), There's a floating gate inside (Floating G ...

  9. JLINK(SEGGER) The light is not bright USB Firmware fix not recognized 、clone modify

    Today's tune SMT32 A few times ,JLINK I hung up and found this tutorial on the Internet , It took a long time to do it well , The driver is not installed properly !WIN7 System , The driver for automatic installation is GPS.COM10, depressed , It's a mistake . Should be :atm6124.sys. To manually select ...

  10. Salted fish introduction to give up 6--jsp&lt; One &gt; Three orders

    JSP The full name is Java Server Pages It and servle The technology is the same , All are SUN A company defined one that is used to develop dynamic web Technology of resources .JSP The biggest feature of this technology is , Write jsp It's like writing html, But it compares htm ...