Creation is not easy, for a free praise, thank you!!
This article has participated in the third session of the Denver Nuggets Creator camp. For details, see: Digg Project | Creator Camp third session is ongoing, “write” to make a personal impact.
preface
Why the sudden thought of writing an article about Console? In addition to using vscode’s debuger, I have spent most of my time using console.log() to output some or debug programs. I believe that many comrades who have just started to contact JS should also be accustomed to using console.log(). But the power of log is limited and cannot be satisfied in all scenarios. For example, let’s use table data objects.
The following picture is purely from the black storm!!
console.log()
This property is probably the most common, but have you ever used it to output a console object?
console.log(console)
Copy the code
grammar
Console. log(common JS data)
console.log(123)
>> 123
Copy the codeConsole. log(placeholder %s %d %f %o, etc.)
Console. log(' I am %s',' front-end picker') >> I am front-end pickerCopy the codeConsole. log(ES6 template string)
Const nickName = "front-end picker" console.log(' I am ${nickName} ') >> I am front-end pickerCopy the codeArrays/objects are displayed on a single line
console.log({object: 'object'}, {object: 'object'});
console.log(['array', 'array'], ['array', 'array']);
Copy the code
CSS styles beautify the output
Above we introduced placeholder output, and there is actually a placeholder %c that can be used to receive CSS styles.
Console. log(' I am red % C text ', 'color: red; ');Copy the code
Each %c is only responsible for the text that follows it until the next %c is encountered;
Console. log('This is %cred text %c I have no color %c I am green.', 'color: red; ', '', 'color: green; ');Copy the code
Of course, you can also choose to define styles as variables.
let style="background: white; border: 3px solid red; color: red; font-size: 50px; margin: 40px; padding: 20px;" Undefined console.log('%c I am log! ', style);Copy the code
console.clear()
Most browsers have a way to clear the control bar built into the developer tools.
The Console object also provides a clear method to clear the console.
After you execute console.clear()
cosole.debug()
Output “debug” level messages that can only be displayed in the browser if you have debug configured. For example in Firefox:
If you do not check debug: the debug message cannot be displayed.
error()
Prints an error message to the Web console, and only errors is configured for display by the browser.
Here’s what it looks like in Firefox
Both browsers prefix error with a small icon.
info()
Output a notification to the Web console and display it only when the browser configuration info is visible. Here’s what it looks like in Firefox
warn()
Print a warning message to the Web console and display it only if the browser configuration warning is visible.
Here’s what it looks like in Firefox
console.count()
Print the number of times count() is called. This function takes an optional argument label, which is called ** “default” ** if you do not set an argument.
Used for statistical
The console. The count (' I am '); The console. The count (' front picker); The console. The count (' I am '); The console. The count (' front picker); The console. The count (' I am '); The console. The count (' front picker);Copy the codeAs you can see in the figure below, count() is accumulated separately for different parameters.
console.countReset()
To reboot the counter. It also receives a label parameter,
If the label argument is omitted, this function resets the default counter.
console.dir()
The properties of the specified JavaScript object are displayed in the console through an interactive list like a file tree. The syntax is:
console.dir(object)
Copy the codeConst auther = {name: 'front-end picker', age: '18',}; console.log(auther); console.dir(auther);Copy the codeIn Chrome, this property is supported, as shown in the following figure
In Firefox, however, the output of log and dir is the same, except that Firefox will expand dir by default.
Of course, log and dir are completely different when it comes to exporting dom structures. But we’ll learn this in the dirXML method.
console.dirxml()
Displays an explicit interactive tree of XML/HTML elements that includes all descendant elements. If it cannot be displayed as an Element, it will be displayed as a JavaScript object instead. The output is an inherited extended list of nodes that lets you see the contents of the child nodes.
Object is also supported.
In dir we leave DOM here. Create a DOM object
var childNode = document.createElement('p'); Childnode. innerHTML = '<span> here is the message ~ ~ </span>';Copy the codeUse log/dir/dirxml for output
log
You can see that the output effect of log and dirXML is the same, in the form of DOM output, dir output is the value of the attribute.
Group (), groupCollapsed() and groupEnd()
Group different console outputs together to show a form of relationship between them. It is usually used in combination.
Group accepts a parameter that indicates the name of the group. If not set, the group will behave differently in different browsers and the browser will expand the group by default.
GroupCollapsed differs from group in that groups collapse spontaneously.
GroupEnd () indicates the end of the group.
group+groupEnd
console.group(); console.log('name:'); The console. The log (' front picker); console.groupEnd(); The console. Group (' parameters'); console.log('age'); console.log('18'); console.groupEnd();Copy the codeHere’s what chrome looks like. If the group name is not set, the default is console.group, and the output of a group is indented.
groupCollapsed+grounEnd
console.groupCollapsed(); console.log('name:'); The console. The log (' front picker); console.groupEnd(); The console. Group (' parameters'); console.log('age'); console.log('18'); The console. GroupEnd (' parameters');Copy the code
nested
Console. group(' Here is the author information '); Console. log(' item 1 '); console.group('name'); The console. The log (' front picker); console.groupEnd(); Console. log(' item 2 '); console.group('age'); console.log('18'); console.groupEnd(); console.groupEnd();Copy the code
CSS beautification -% C
Console. group('%c below author information ','color:red; '); Console. log(' item 1 '); console.group('name'); The console. The log (' front picker); console.groupEnd(); Console. log(' item 2 '); console.group('age'); console.log('18'); console.groupEnd(); console.groupEnd();Copy the code
console.table()
This method takes a required argument, which must be either an array or an object; You can also use an optional column argument.
It prints out the parameters as a table. Each element in the array (or enumerable property of the object) will be displayed as a row in the table.
The first column of the table is index. If the data is an array, the values of the cells in the column are the index of the array. If the data is an object.
An array of
let ary = [
'1',
'2',
'3'
];
console.table(ary);
Copy the code
object
Let obj = {name: 'front-end picker', age: '18',}; console.table(obj);Copy the code
An array of objects
Let aryOfObjects = [{name: 'zhang' age: '12'}, {name: "bill", the age: '18'}, {name: 'Cathy' age: '19'}]. console.table(aryOfObjects);Copy the codeAs shown, table() gives us a nice layout of objects with repeating keys as column labels. , all keys in each object are represented as a column, regardless of whether there are corresponding keys and data in other objects. If the object has no key column data, it is displayed as empty.
An array of arrays
Let aryOfArray = [[1,2,3],[3,4,5],[6,7,8]]; console.table(aryOfArray);Copy the codeArrays arrays are similar to arrays of objects. It uses the index of the internal array as the column label rather than the key of the column label. Therefore, if one array has more items than the others, there will be blank items in the table for those columns. Just like an array of objects.
Object array array
Let aryOfArraysWithObject = [[' 1 ', '2', {name: 'zhang' age: '12'},], [' 3 ', '4', {name: 'bill', the age: '18'}}], [' 5 ', '6', {name: 'Cathy' age: '19'}]]. console.table(aryOfArraysWithObject);Copy the codeIn Chrome, it is impossible to expand, or view, the contents of these objects in the third column.
Time (), timeLog(), and timeEnd()
time()
You can start a timer to track how long an operation is occupied. Each timer must have a unique name, and a maximum of 10,000 timers can run simultaneously on a page. When console.timeend () is called with this timer name as an argument, the browser prints the elapsed time for the timer, in milliseconds.
Console. time(Timer name)Copy the codetimeEnd()
Stop a timer started with console.time() and print the end time
Console. timeEnd(timer name)Copy the codetimeLog()
Outputs the value of the timer on the console, which must have been started via console.time().
Console.timelog ()(timer name)Copy the codeuse
console.time('this is a timer');
console.timeLog('this is a timer');
console.timeEnd('this is a timer');
Copy the code
Calculate the time for
console.time('this is a timer'); for(let i=0; i<10000000; i++){ } console.timeLog('this is a timer'); console.timeEnd('this is a timer');Copy the code
console.assert()
The console.assert() command is similar to the error command mentioned earlier. The difference is that assertions allow the use of Boolean conditions to determine whether text should be output to the console.
For example, if you want to test the value of a variable and the value is not equal to ‘front-end picker’, the assert command does nothing if the variable is lower than that number and the condition resolves to true. If the condition resolves to false, the output text is displayed. This way, you don’t need to use console.error() after checking if you need output.
Let name = 'zhang3 '; Console. assert(name === 'front-end picker',' not a front-end picker, can't output '); Let name1 = 'front-end picker'; Console. assert(name1 === 'front-end picker',' not front-end picker------1, can output ');Copy the code
In Chrome, you can also output to show where the assertion came from.
let value = 2;
function chackValue() {
chackValue3();
}
function chackValue2() {
chackValue3();
}
function chackValue3() {
console.assert(value < 1, 'This was false.');
}
chackValue();
Copy the codeFor easy viewing, we annotated the number of lines using vscode.
As you can see from the figure below, Chrome tells us that the assertion is at line 9.
console.trace
The call stack
Let’s learn what a call stack is before we learn trace!! There are four functions that function1 calls function2, function2 calls function3, and function3 calls function4. If you look at this diagram, these functions exhibit the characteristics of a stack. The last function to be called appears at the top. This relationship is therefore called the Call stack.
What trace can do
It is used to record the JavaScript stack trace, and we can also add parameters to represent the roster Cinderella of the current trace.
function f1(){ console.log('f1') f2() } function f2(){ console.log('f2') f3() } function f3(){ console.log('f3') f4() } Function f4(){console.log('f4') console.trace('f4'); function f4(){console.log('f4') console.trace('f4'); }Copy the codeAs you can see from the figure, the last function called before console.trace is triggered is F4. So this is going to be the top of the call stack. And then f3, F2, F1
Afterword.
The following quote was posted somewhere hidden on the Nuggets website, and you can guess in the comments section ！！！！
