Take you back to the JavaScript (2) console that you don't know about features

The most common debugging tool for JavaScript is Console.info (). The console is one of the properties of the Window object in the browser, provided by the browser object Model (BOM) to access the browser console, where you can output strings, arrays, and objects that help debug your code. Console also comes with some easy-to-use methods that you don't normally understand, and this article can enrich your debugging tools.

We generally pass

Window.console.info (' Hello World ');

Or

Console.info (' Hello World ');

Because window can be omitted, we use the latter to streamline the code.

Four ways to output information to the console:

1. Console.log ();

2. Console.info ();

3. Console.warn ();

4. Console.error ();

The only thing we have to do is to pass one or more parameters to them (method). The console displays different icons and colors to indicate its record level. See:

Different levels of record printing code

Different levels of record printing effects

You will notice that the error log message is more visible than other messages. Visually differentiating helps developers quickly view error or warning messages in the console. You should make sure when you should alert what category of log information.

Perhaps you are already familiar with the above features, then the truly valuable content starts now, please look down.

String substitution

This technique can use placeholders in a string to replace other parameters that you pass in to the method.

Input: Console.info (' Hello%s ', ' World ');

Output: Hello World

Code

Effect

%s is a placeholder for the second parameter ' world '. Any string, integer, or array can be converted to a string and replaced by%s. If you pass in an object, it will be displayed as [Object Object] or object.

Firefox

Chrome

If you want to pass in the object, you need to use%o Or%O, not%s.

Console.info (' This was an object%o ', {obj: ' object '});

Incoming Object

Digital

String substitution can be used with integers and floating point numbers:

• Integer%i or%d

• Floating point%f

Input: Console.info (' int:%d, float:%f ', 1, 1.5);

Output: Int:1, float:1.500000;

You can use%.1f to format floating-point numbers so that only one decimal is displayed,%NF, and you Know (show n as decimal).

Summarize the formatting specifier:

1. %s replacing placeholders with strings

2. % (d or I) Replace placeholders with integers

3. %f,%NF replacing placeholders with floating-point numbers

4. %o or%o Placeholder appears as an object

5. The%c app provides CSS (PS: You can try it yourself, or look at the following ' Egg ' bar)

String templates

ECMASCRIPT6, template strings are replacements or connections. The syntax is to use the inverse quotation mark (' ') instead of the quotation mark, and the variable is wrapped in ${}:

Const A = ' world ';

Console.info (' Hello: ${a} ');

Hello:world

object is displayed as [Object Object] or object in the template string, so you can still use the%o or%O Replace.

Use string concatenation with you before: Console.info (' Hello: ' + str + '! ');, using replacement or template creation is not the code easier to read!

Easter Egg (*&......&*)

Now, let's implement a colorful console, when we request a data, the request succeeds in green, and the request fails in red. First look at the effect:

Colorful logs

Const SUCCESS = [' Background:green ', ' color:white ', ' display:block ', ' text-align:center '].join (';');

Const FAILURE = [' background:red ', ' color:white ', ' display:block ', ' text-align:center '].join (';'); Console.info ('%c/dancing/bears was successful! ', success);

Console.log ({data: {name: ' Bob ', Age: ' Unknown '}});

"Mocked" data response

Console.error ('%c/dancing/bats failed! ', failure);

Console.log ('/dancing/bats Does not exist ');

Use the%c placeholder in string substitution to apply your journal print line to add style rules. The console supports only a few CSS styles and varies by browser.

Other Available methods

The following methods are not API standards, so you need to use them in a high-version browser.

1, Console.assert (Boolean, param); If the first argument evaluates to False, then the second argument is returned. If true, the log is not displayed.

Assertion

2, Console.dir (); Displays a list of interactive properties for an incoming object, saving the action of opening object objects, not bad.

3, console.table ([' JavaScript ', ' php ', ' Java ']); Display an array or an object in a table

Please click here to enter the picture description

Chrome Users Note that table () is not working, and you can solve this problem by putting the item in an array or object.

Console.table ([[' JavaScript ', ' php ', ' Java ']]);

4, Console.group (); Consisting of at least 3 console calls, it outputs multiple levels, showing the following effects:

Please click here to enter the picture description

5, Console.time (ID) and console.timeend (ID) Start the ID of the timer and stop ID of the timer.

It can run up to 10,000 timers at a time.

At last

Some of the console's methods are practical, but because their APIs are still changing, they can be accessed

Https://developer.mozilla.org/en/docs/Web/API/console

End

If you like my content please pay attention to it, common learning common progress!

Thanks for browsing ~ ~

Take you back to the JavaScript (2) console that you don't know about features