This is the 21st day of my participation in the August Text Challenge.More challenges in August

sequence

For those of you who have used JavaScript, you probably know how to output messages using console.log.

But is everyone familiar with console?


Get started operation

Pressing the F12 key will bring up the browser console, as shown below. Here I’m using Chrome


Let’s use console.log to print the information and see what happens

111 was directly printed out, arR was not defined, so the error was reported




Common Console Commands

There are many console commands, not just the usual log commands

MDN Reference: developer.mozilla.org/zh-CN/docs/…

There are a lot of console commands, so I’ll just pick out a few interesting ones




Print message command

The console. Log siblings info(), debug(), WARN (), and error()

The command function
info Console. log alias, output information, but some browsers will have a small identifier before the exclamation mark, as followsChrome is the same, Firefox is the same

Test command:console.log('console log') console.info('console info')

debug It is also a printed message that is displayed only when the console is configured to display debugging output. In Chrome it can be becauseThe level of loggingI can’t print it, but Firefox can

Test command:console.debug("console debug")

warn With a warning identifier added, the printed message becomes a warning message style

Test command:console.warn("console warn")

error By adding an error identifier, the printed message becomes an error message style

Test command:console.error("console error")

The following was tested in Firefox:

console.log('console log')   
console.info('console info')
console.debug("console debug")
console.warn("console warn")
console.error("console error")
Copy the code





Count Prints the number of calls

Print the number of times count() is called. This function takes an optional argument label. If label is provided, this function records the number of times count() with that particular label is called

Test code:

for (var i = 0; i < 5; i++)
{
	console.count("key")}Copy the code



Note that the magic here is that every time you re-run the test code, the count count is not reset

So you might need console.countReset() to reset the count. CountReset is to reset the counter. This function takes an optional argument label.

console.countReset("key");
for (var i = 0; i < 5; i++)
{
	console.count("key")}Copy the code





Time Code performance check

Console. time and console.timeEnd are two console commands that are commonly used

The browser prints the elapsed time of the corresponding timer in milliseconds, and you can test the time between time and timeEnd for JavaScript code execution

console.time(1)
var knum = 0;
for (var i = 0; i < 10000; i++)
{
	knum /= i;
}
console.timeEnd(1)
Copy the code

But there’s another oneconsole.timeLogThe command

Outputs the value of the timer on the console, but this command is conditional on starting the timer, which must have been started via console.time()

The console. TimeLog command is similar to the timeEnd command, but the timeEnd command ends and the current time timer is no longer available

Example: After timeEnd ends, timeLog becomes invalid

console.time(1)
var knum = 0;
for (var i = 0; i < 10000; i++)
{
	knum /= i;
}

console.timeEnd(1);
for (var i = 0; i < 100000; i++)
{
	knum /= i;
}
console.timeLog(1);
Copy the code

Example: After timeLog ends, timeEnd can continue

console.time(1)
var knum = 0;
for (var i = 0; i < 10000; i++)
{
	knum /= i;
}
console.timeLog(1);

for (var i = 0; i < 100000; i++)
{
	knum /= i;
}
console.timeEnd(1);
Copy the code





Clear Console Clearing

In CMD terminals, it is common to use the clear command to clean up

The clear command also exists in the browser control bar

console.clear()Command to clean up the console



Group Indicates the group of output information

Sometimes, if you don’t take the trouble, you can output information on the console like a folder directory

Console. group and console.groupEnd are combined

console.group("Group 1")
    console.log("First group")
    console.group("Arrangement for Group 1")
        console.log("start")
        console.log("begin")
    console.groupEnd("Arrangement for Group 1")
console.groupEnd("Group 1")

console.group("Group 2")
    console.log("Second group")
    console.warn("Warning")
		console.error("Error")
console.groupEnd("Group 1")
Copy the code

But in factgroupAnd a brother namedgroupCollapsed, its combination with end can also complete the same function as group

Differences: Output from groupCollapsed collapses, whereas output from groups does not

console.groupCollapsed("Group 1");
    console.log("First group")
		console.groupCollapsed("Arrangement for Group 1");
        console.log("start")
        console.log("begin")
		console.groupEnd() 
console.groupEnd() 

console.groupCollapsed("Group 2");
    console.log("Second group")
    console.warn("Warning")
	console.error("Error")
console.groupEnd() 
Copy the code




Table displays data as a table

Use console.table to display as a table in the console

The condition used is that you need a required parameter, data, which must be an array or an object

You can add the optional columns parameter, which is used to select a subset of columns to display

Basic examples:

console.table(["apples"."oranges"."bananas"]);
Copy the code

Output an array of objects:

var obj = {
  name: 'apple'.age: 30.color: 'red'
}
var obj2 = {
  name: 'orange'.age: 15.color: 'orange'
}
var obj3 = {
  name: 'banana'.age: 24.color: 'yellow'
}
console.table([obj,obj2,obj3]);
Copy the code

Use the optional columns argument to print only age

console.table([obj,obj2,obj3], ["age"]);
Copy the code




Trace outputs a stack trace

Console. trace displays the call path of the currently executing code on the stack.

function app() {
  function check(){
    console.trace()
    function set() {
      console.trace(2)
    }
    set()
  }
  check()
}

app()
Copy the code

The previous methods of Trace and Trace2 were explicitly advised to be called when the method failed or failed to run




Console outputs something interesting

With %c, you can output something similar to HTML

Example of text color change:

console.log("% C look up in the sky. % C sorry there's nothing."."color:red"."color:blue")
Copy the code

Output image examples:

Background is used in the same way as CSS, and you can also set the margin and padding properties. Background: URL holds the image address

Note: Chrome is used here

console.log("%c\n %c look left"."Background: url (" https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=844971292, & FM = 11 & gp = 0. 1777969318 JPG ') no-repeat center center; background-size:200px 300px ; font-size:300px"."color:red" );
Copy the code

Effect:

Output ASCII picture

Online tools:

  • Tool. Lu/asciipainti…
  • www.jianshu.com/p/fca56d635…

Example: the old drivers have already started, so come on in.

var d =`. -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -. '-- -- -- -- -- -.. -- -- -- -- -- -- -- -- -- -- -- -- -. -- -- -- -- -- -- -- -- -- -. -- -- -- -- -- -- -- -- -- -. -- -- -- -- -- -- -- -- -- -. -. | | \ \ | | | | | | | | | | | \ \ | | | | | | | | | | |...... | | _ _ | | _ _ | | _ _ | | _ _ | | | | | | | | | / / / / | | / / / / | | / / / / | | / / / / | | / | | | _. -- -- -- -- -- - "' -- -- -- -- -- -- -- -- -- --" '-- -- -- -- -- -- -- -- -- -- "' -- -- -- -- -- -- -- -- -- -- "' -- -- -- -- -- -- -- -- -- -- ' '-' | .______________________________________________________________| |)| | | | | | mga| ||==| | | | | _-_ | | | | .-. | ||==| C| | | __ |.'.-.' | _ | _ | |.'.-.'. | __ | "__==' '---------'|( )|'----------------------'|( )|'----------"" '-' '-' `
console.warn(d)
Copy the code

Effect:

Learning materials

Developer.mozilla.org/zh-CN/docs/… www.calamus.xyz/ www.cnblogs.com/tangwei89/p…