By Dmitri Pavlutin

Like it and see. Make it a habit

In this paper,GitHub Github.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

We know that console.log(message) is used simply to print the argument message to the console.

console.log('Little Head'// Const myAge = 28 console.log(myAge) // 28Copy the code

This article focuses on five useful tips that can help you be more productive when using console.log().

1. Print full name variables

If the console prints a large number of variables, it is difficult to tell which variable corresponds to which value.

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

sum(1, 2);
sum(4, 5);
Copy the code

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

To indicate the relationship between a value and a variable, we can wrap the variable in curly braces: {b} :

2. Advanced formatting

The most common way to print something to the console is simply to call console.log() with one argument:

console.log('Little Head') // Front-end smartsCopy the code

Sometimes we might want a message that contains more than one variable. Fortunately, console.log() can format strings in sprintf() using specifiers like % s, % I, etc.

const user = 'Little Head';
const attempts = 5;

console.log('%s login failed % I times', user, attempts); // Failed to log in 5 timesCopy the code

% s and % I are replaced with the values of user and attempts. The specifier % s is converted to a string and % I to a number.

Here is a list of available specifiers:

specifier role
%s Element is converted to a string
% % d or I Element is converted to an integer
%f Element is converted to a floating point number
%o The element is displayed in the most efficient format
%O The element is displayed in the most efficient format
%c Apply the CSS provided

Print style with style

The browser console allows us to apply styles to printed messages, which we can do by using the % c specifier with the corresponding CSS styles, as follows:

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

Font: 36px; font-weight: bold’

4. Interactive display

Log styling is dependent on the console implementation of the host. Browsers like Chrome and Firefox provide interactive representations of objects and arrays, while the Node console outputs text.

See how Chrome prints ordinary objects, arrays, and DOM trees that can be expanded and collapsed to interact with these elements.

4.1 Objects

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

console.log(myObject);
Copy the code

In the Chrome console, myObject prints like this:

You can expand and collapse the object property list, and you can also see the prototype of the object.

4.2 the Arrays

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

console.log(characters);
Copy the code

4.3 DOM tree Structure

We can interact directly with the DOM elements displayed in the console.

console.log(document.getElementById('root'));
Copy the code

In the Chrome console, DOM elements can be extended and their contents can be fully viewed:

4.4 Interactive nested messages

The % O specifier (which associates values with the correct print format) can insert arrays, objects, DOM elements, and regular text into text messages without losing interactivity.

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

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

From the console, myObject arrays are not converted to strings, but remain interactive.

  1. Print large objects in the Node console

The log in Node is printed as plain text. However, console.log() in Node does not show objects with deep nesting: level 3 objects are shown as [Object].

const myObject = {
  propA: {
    propB: {
      propC: {
        propD: 'hello'}}}}; console.log(myObject);Copy the code

When the script is run, propC prints the Object as [Object] :

To see the full object structure, use json.stringify ():

const myObject = {
  propA: {
    propB: {
      propC: {
        propD: 'hello'}}}}; console.log(JSON.stringify(myObject, null, 2));Copy the code

Json.stringify (myObject, null, 2) returns the JSON representation of the object, with the third argument 2 setting the indentation size in the space.

Hopefully these five tips will make your console.log() experience more productive.

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

Original text: dmitripavlutin.com/console-log…

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.