Console. log, which I’m sure anyone who has written JavaScript has come across, is our debug panacea. But besides the log method, did you know that console has many other methods that can help you quickly debug your code?
console.log | console.info | console.debug | console.warn | console.error
Usage scenarios
Output different types of content (level).
usage
These methods work almost the same, but the output may differ in color:
Replace strings – String Substitution
Usage scenarios
The context at which the output is rendered.
usage
The following replacement strings are now supported:
| Substitution string | describe |
|---|---|
%oor%O |
JavaScript objects, which can be integers, strings, or JSON data. |
%dor%i |
An integer. |
%s |
A string. |
%f |
Floating point number. |
Add CSS styles to the output
Usage scenarios
Make your content more structured and can greatly improve your compulsion.
usage
Use %c to style a portion of output:
console.assert
Usage scenarios
Conditional output. Instead of adding multiple ifs, you might want to output information only if certain conditions are not met.
usage
console.assert(condition, ... data)Copy the codeNote that data is printed only if condition is false:
console.table
Usage scenarios
Output data as a table. The most useful scenario for this method, I think, is arrays of objects, because it allows you to see the values of the properties of the objects in the array at a glance.
usage
console.group
Usage scenarios
When you have a large amount of output to the interface, you can use the console.group method to add indentation to the output to make it more tidy.
usage
console.trace
Usage scenarios
Trace the execution stack of functions. When you want to know exactly how a function is called, you can use console.trace to trace its execution stack.
usage
console.count
Usage scenarios
Count the number of times the code is executed.
usage
console.time
Usage scenarios
Records the time it takes for code to execute, in milliseconds (ms).
usage
console.time(timerName)
Copy the code
Refer to the website
- Developer.mozilla.org/en-US/docs/…
- Medium.com/javascript-…
Keep an eye on my technical updates
I am a green onion, and now I am working as a Team Leader in an e-commerce company. I want to pay attention to me and make progress together with me into a full-stack engineer.
This article started with: several console APIs for improving productivity
Follow my personal official account to get my latest technical updates!
