During the development process, we often use console.log() to assist us in debugging and development. It is simple and convenient. Today we will learn about some of its skills and methods, so that we can use the console more elegantly and efficiently when developing. .log().
-
Printing variables :
During the debugging process, you may often encounter multiple variables printed in the console. For identification, we will add a string table name at the end which variable it is currently, as follows: In the console, according to the corresponding identification or corresponding
line You can see which variable the printed value corresponds to by counting.
But now I have a more intuitive method: you can put the variable into a pair of curly braces, such as console.log({xxx}).
For example:
what we see in the console at this time is:
the variable name corresponds to the printed value, which looks very clear and can also reduce a lot of code~
(ps: If you want to use this method to directly print the vue component data Variables in, such as console.log({this.categoryArrList}), will report an error. Because console.log({name}) is actually equivalent to console.log({name: name}), so I want to print this directly. categoryArrList will report an error. This method will make it very clear if you use this method to print the variables in the function~) -
Print object :
Similarly, during the debugging process or before submitting data to the backend, we may need to check an object to see whether the attribute values in this object are the values desired by the backend, so we usually print it on the console Extract this object and check its attribute values:
Generally, we just do this:
At this time, what we see on the console is as follows:
If the attribute values are objects or arrays, we need to open them one by one to see the corresponding values. If the hierarchy is very deep, this is also a cumbersome process. At this time, we can borrow JSON.stringify() during console.log() to view the complete object structure: For example: what we see on the console at this
time
is Like this:
the attributes and attribute values of the entire object are clear at a glance. We don’t need to copy a bunch of code to bejson.com to convert the format. Doesn’t it save some time~
JSON.stringify() can have three parameters: JSON.stringify(value[, replacer[, space]])
Parameter description:
value: required, the JavaScript value to be converted (usually an object or array);replacer: optional. The function or array used to convert the result. If replacer is a function, JSON.stringify will call the function, passing in the key and value of each member. Use the return value instead of the original value. If this function returns undefined, the member is excluded. The key of the root object is an empty string: "". If replacer is an array, only members with key values in the array are converted. Members are converted in the same order as the keys in the array;
space: Optional, the text adds indentation, spaces and newlines. If space is a number, the return value text is indented by the specified number of spaces at each level. If space is greater than 10, the text is indented by 10 spaces. Space can also use non-digits, such as: \t.
Therefore, with the first and third parameters of JSON.stringify(), you can clearly view an object in the console.
- Print information in a specific format :
console.log() provides us with format modifiers:
| modifier | effect |
|---|---|
| %s | Elements are displayed as strings |
| %d、%i | Elements are displayed as integer types |
| %f | Elements are displayed as floating point numbers |
| %o、%O | Elements are displayed in object format |
| %c | Add CSS styles to elements |
By borrowing these modifiers, we can print out the form we want on the console according to the corresponding functions:
For example:
Similarly, we can also print out text and pictures with CSS styles:
console.log("%c 老板叫你赶紧排期开发！！！", 'font-size: 28px; font-weight: bold; color : blue');
console.log("%c ", "background: url(http://img.doutula.com/production/uploads/image/2019/05/31/20190531263745_BpyVan.jpg) no-repeat center;padding-left:600px;padding-bottom: 242px;")
What we see in the console is as shown below:
Through the format modifier, we can output any text and picture information we want on the console, so when we usually browse the website, we open the pictures and text we see in the console. Information is achieved using the console~
Having mentioned these few tips, in fact, in addition to these three points, the powerful console also has many other uses:
- Classification output: .log .info .warn .error
console.log('文字信息');
console.info('提示信息');
console.warn('警告信息');
console.error('错误信息');
- Group output: Use console.group() and console.groupEnd() to wrap the group content.
console.group('group1');
console.log('a');
console.log('b');
console.groupEnd('group1')
- Table output: Use console.table() to output the passed object or array in table form. Suitable for neatly arranged elements
var Obj = {
Obj1: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj2: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj3: {
a: "aaa",
b: "bbb",
c: "ccc"
},
Obj4: {
a: "aaa",
b: "bbb",
c: "ccc"
}
}
console.table(Obj);
- View all properties and methods of an object: console.dir()
console.dir(obj)
-
Conditional output: Use console.assert() to perform conditional output
When the first parameter or return value is true, no content is output.
When the first parameter or return value is false, the following content is output and an exception is thrown.
like:
console.assert(true, "你永远看不见我");
console.assert(false, "你看得见我");
- Counting output: Use console.count() to output the content and the number of calls
(function () {
for(var i = 0; i < 3; i++){
console.count("运行次数：");
}
})()
-
Timing function: Use console.time() and console.timeEnd() to wrap the code snippet that needs timing and output the time it takes to run this code.
like:
-
Clear all information on the console: console.clear(). After the method is successfully executed, the console will output: “Console was cleared”.
After clear, this article should be over. In fact, console has many uses. Some methods are still very useful during debugging, which can save a lot of time. Its existence is reasonable. Using the appropriate method in the right place is also very helpful for development. help~