This five console.log () tips to help you improve efficiency

Author: Dmitri Pavlutin
Translator: Front Ash
Source: dmitripavlutin.

We know the console.log(message)usage is very simple, it said it would parameter message printed to the console.

console.log('前端小智')
// 前端小智

const myAge = 28
console.log(myAge) // 28

This paper describes 5a useful tips to help you use console.log()improve work efficiency.

1. Print full name variable

If you print multiple variables in the console, is a relatively high number of cases, it is difficult to distinguish which value corresponds to which variable.

function sum(a, b) {
  console.log(b);
  return a + b;
}

sum(1, 2);
sum(4, 5);

After executing the above code, we will see a series of numbers:

To indicate the relationship between values and variables, you can use curly braces to wrap variables: {b}:

2. Advanced Format

The print something to the console, the most common method is to simply use a parameter called console.log():

console.log('前端小智') // 前端小智

Sometimes we might want to include information on a number of variables. Fortunately, console.log()it may be used ％s, ％iand other specifier sprintf()manner format string.

const user = '前端小智';
const attempts = 5;

console.log('%s 登录失败了 %i 次', user, attempts);
// 前端小智 登录失败了 5 次

％sAnd ％iby userand attemptsreplaced values. Specifier ％sis converted to a string, and ％iconverted to digital.

The following is a list of available specifiers:

Specifier	effect
%s	Elements into a string
% D% i or	Element into an integer
%f	Elements are converted to floating point
%O	Elements are displayed in the most effective format
%THE	Elements are displayed in the most effective format
%c	Applications of CSS

With a style of print style

Browser message allows the console will be applied to the printed pattern, we can be ％cdescribed with the use of symbols corresponding CSS style is achieved, as follows:

console.log('%c Big message', 'font-size: 36px; font-weight: bold');

Specifier ％capply CSS styles'font-size: 36px; font-weight: bold'

4. The interactive display

Log styling depends on the host's console to achieve. Like Chromeand Firefoxthis browser provides interactive display and an array of objects, and Node console output as text.

Chrome Print to see how ordinary objects, arrays, and the DOM tree, you can expand and collapse to interact with these elements.

4.1 Objects

const myObject = {
  name: 'John Smith',
  profession: 'agent'
};

console.log(myObject);

Chrome in the console, myObjectthe printing as follows:

Can expand and collapse the Object attributes list, you can also see the object's prototype.

4.2 Arrays

const characters = ['Neo', 'Morpheus', 'John Smith'];

console.log(characters);

4.3 DOM tree structure

We can interact directly with the console display of DOM elements.

console.log(document.getElementById('root'));

In the Chrome console, you can extend DOM elements, and can fully browse its contents:

4.4 interactive nesting in the news

％oSpecifier (The value associated with the correct print format) may be inserted into the array in a text message, the object, DOM elements and regular text, without losing interactivity.

const myObject = {
  name: 'John Smith',
  profession: 'agent'
};

console.log('Neo, be aware of %o', myObject);

Look from the console, myObjectthe array will not be converted to a string, but remains interactivity.

5. Print large object in the Node Console

Node is logoutput as plain text. However, Node is console.log()not shown to have deeply nested objects: the third stage is shown as the object [Object].

const myObject = {
  propA: {
    propB: {
      propC: {
        propD: 'hello'
      }
    }
  }
};

console.log(myObject);

When you run the script, propCobjects printed as [Object]:

To view the complete object structure, you can use the J SON.stringify():

const myObject = {
  propA: {
    propB: {
      propC: {
        propD: 'hello'
      }
    }
  }
};

console.log(JSON.stringify(myObject, null, 2));

JSON.stringify(myObject, null, 2)Returns JSON representation of the object, the third parameter 2sets the indent size in the box.