I believe that most front-end development uses Chrome For development , one side Chrome The browser is really good , More importantly, on the one hand Chrome There is a very powerful debugging tool , Making good use of this debugging tool can improve programming efficiency , Help us locate problems quickly .
<>1.console.table
console.table Only one array or object is accepted , An additional parameter can be accepted to describe the number of columns in the table . It passes the data through the table
Print out in the form of grid , In this way, we can see the data intuitively :
var datas = [ { id: '0001', name: 'zhangsan', age: 20, }, { id: '0002', name:
'lisi', age: 40, }, { id: '0001', name: 'wangwu', age: 88, }, ];
（1） Data object above , We use console.log(datas) Print , The effect is as follows ：
Printed is a Object array , If you want to see the elements of each array , It must be carried out one by one , Relatively troublesome .
Use below console.table() Print
It becomes very refreshing in an instant , meanwhile console.table It also supports printing object properties , as follows Student object , have name and score Two properties .
<script> class Student { constructor(name, score) { this.name = name; this.
score= score; } } var students = [new Student('zhangsan', 78), new Student(
'lisi', 89)]; console.table(students); </script>
<>2.console.dir
console.dir(object)
parameter ：
* object： Output solid objects
This function is used to print out the detailed properties of the object , Functions and expressions .
console.log Can output DOM node , If you want to see DOM Attributes under node , have access to
console.dir,console.dir It can recursively print all the attributes of the object , Print one as follows DOM node
console.dir(window.document)
<>3.console.log()
grammar :
console.log(obj1 [, obj2, ... objN); console.log(msg [, subst1, ... substN);
console.log The function of is to output a message to the console . It can pass in multiple parameters , The behavior of the output depends on whether the first parameter is a substitute string .
If the first parameter is Replace string , be The following parameters serve the first parameter .
console.log(' User information : user name %s, password %s , Age %d , ' Zhang San ', '123456', 30);
output :
The parameters supported by the replacement string are as follows ：
Placeholder description
%s character string
%d or %i integer
%o object
%f Floating point number
%c Style code
How to print a styled prompt ： use %c Add a plot style .
console.log('%c Please don't enter some commands you don't understand on the console !%s', 'font-size:18px;background:
#ddd;color:red', '>>>');
except log, There are several others info, warn, error, Usage and log identical , Respectively represent error information , Warning and suggestive information .
console.info('info information '); console.warn('warn information '); console.error('error information ');
<>4.console.group
label: group Identifier of the group
Create a new group in the console , Then output to the console will automatically add an indent , Indicates that the content belongs to the current group , Know call console.groupEnd()
after , End of current grouping .
console.group and console.groupend They appear in pairs , Just like we use html Same label .
console.group(' Print user information start ~'); console.table(datas); console.group(' End of printing user information ~');
<>5. console.time
console.time Function is used to track the time consumption of an operation ,console.time(); and console.timeEnd() It's a complete set .
console.time() Will start a timer , And execute to console.timeEnd() Function time , End timer , And output the total time of the timer to the console .
console.time(); var arr = new Array(10000); for (var i = 0; i < arr.length; i
++) { arr[i] = new Object(); } console.timeEnd();
<>6.console.assert
console.assert() Its first argument accepts an assertion , The second parameter is a message, If the assertion is
false, The first error is written to the console . If it is true, Think it didn't happen .
console.assert(assertion, message [, subst1, ... substN]);
Assertion is 0, NaN, undefined, false, null, Empty string （''） It will also trigger the following Mesage.
<>7.console.profile
profile and profileEnd Conduct performance analysis
console.profile(" performance analysis "); var arr = new Array(100000); for (var i = arr.length -
1; i >= 0; i--) { arr[i] = new Object(); } console.profileEnd(" performance analysis ");
Open step ： Customization and control Google Chrome——More tools——JavaScript Profiler
<>8.console.count()
use console.count() You can calculate the number of times a piece of code is executed .
<script> function array() { console.count(); } for (var i = 0; i < 10; i++) {
array(); } </script>
[ External chain picture transfer failed , The origin station may have anti-theft chain mechanism , It is recommended to save the picture and upload it directly (img-bqYgmW6u-1650874697896)(D:\study\ project \ front end \chrome Browser debugging tool \ Browser console Print function .assets\image-20220425161334894.png)]
<>9. console.trace()
Print out functions from the console console.trace() Stack information starting at the called position .
<script> function doTask() { doSubTask(1000, 10000); } function doSubTask(
countX, countY) { for (var i = 0; i < countX; i++) { for (var j = 0; j < countY;
j++) {} } console.trace(); } doTask(); </script>
Technology
Daily Recommendation