20+ Console Methods, I Bet You Can’t Even Name 10
Hello Coders, I am Rubics, and Today I am going to 20+ console Methods. I bet you can’t even know 10.
Are they useful?
Definity, not all are useful all the time but yeah knowing them increases your chance to solve web-based problems.
You are possibly aware of the console.log technique and perhaps some different console strategies like the console.blunders and console.dir, however, there are truly over 20 console strategies to be had with a purpose to use. Each of those strategies has its personal use instances and in case you use the proper technique for every use case you’ll substantially growth the pleasant of your debugging.
I determined to interrupt down this article into four awesome sections.
1. Basic logging
2. Performance logging
3. Utility logging
4. Format logging
Each of those sections covers a handful of techniques geared in the direction of the overarching goal. These sections additionally consist of heaps of widespread debugging hints and hints that you now no longer need to overlook.
Basic Logging Methods
To begin with we want to speak approximately the five primary logging techniques.
1. log
2. debug
3. info
4. warn
5. error
Each of those techniques paintings precisely the equal way. The best distinction is how they may be displayed in the console.
Let`s study an instance of the usage of every one of those techniques to evaluate their output.
Right: Firefox console
If you do that out your self you can now no longer see a number of the logging messages. That is due to the fact you may show/disguise one-of-a-kind logging ranges inside the browser console. These are commonly configured above the console window.
Bottom: Firefox console
This cap’s potential to expose/conceal exclusive logging tiers is one of the motives for those numerous logging techniques being so useful. You can without difficulty configure what you need to expose so in case you are most effective in seeking out mistakes you may flip off all of the logging tiers that aren’t blunders which makes it simpler to digest what goes on.
Basic Syntax
Now the fundamental formula to using all these techniques is to print/use them one by one printing in a separate log function.
But If you need a couple of values, you can also pass them in a single console.log function by using comma separation.
This will work for any of the five fundamental logging techniques and is a superb manner to log associated values all at once rather than printing every logging in its own line.
Live View Issues
One factor that browsers do to try to assist with debugging is constantly displaying the stay updated value for any item logged to the console. In this manner in case you run the underneath code and study the console you could see distinct outputs relying on the console.
The above code will print in case your item now no longer have any nested objects/arrays. If you’ve got objects/arrays nested inner your item you may want to both write your very own technique to deeply clone the item or simply serialize to/from JSON.
Advanced String Logging
The ultimate element we want to cowl with those primary logging strategies earlier than transferring onto the greater particular strategies is a way to do superior styling.
Sometimes the primary styling of printing out strings/values isn’t always pretty sufficient and also you want satisfactory management over how the output is outlined on the screen. This may be performed in 2 principal ways.
First, you could use string formatting to layout how the content material is located and published inside a string.
In the above instance, we’re using %s, %d, %f, and %o as placeholders wherein values have to be inserted into the output of our console. When you operate those placeholders the following values handed to the log approach might be published wherein the placeholder values are.
- %s is for string placeholders.
- %d is for integer placeholders.
- %f is for decimal placeholders.
- %o is for item placeholders.
Now that is a quite cool feature, however, without a doubt, it isn’t something I use a lot because I can simply use tagged template literals instead.
The 2nd kind of formatting is a good deal greater beneficial and this is because it permits you to jot down custom CSS for styling your logs.
The %c image tells the log approach to use something CSS patterns are exceeded as the subsequent argument to the log approach to all of the textual content that comes after the %c. These patterns will observe all of the manners as much as the stop of log approach or till the subsequent %c image is used. This is ideal in case you need to have a truly fancy console message for unique use cases.
Format Logging Methods
Now that we’re ultimately carried out speaking approximately the simple logging strategies we are able to speak approximately a few greater superior logging strategies beginning with a few simple log strategies that alternate how the output is formatted.
Dir
The dir approach may be very straight-ahead in that it really works almost identically to the log approach, however with one exception. The log approach will output HTML factors as HTML which may be traversed at the same time as dir will log the whole lot as though it had been JSON. This method that HTML factors might be logged much like an item while the use of dir which makes it extraordinarily beneficial for viewing residences on an HTML element.
Right: console.dir(document.body)
Table
The table approach is beneficial for showing an array of gadgets in a tabular layout which makes it less complicated to experiment with small datasets.
This makes scanning your listing to look for variations among factors withinside the array easier. You also can type through particular columns withinside the desk by simply clicking at the header of the desk if that function is supported for your browser dev tools.
Grouping
The very last manner to layout console output is with the three institution strategies.
1. group
2. groupcollapsed
3. groupEnd
The names of those strategies are quite self-explanatory and groupCollapsed strategies each begin a collection with the simplest distinction being that the groupCollapsed technique defaults to having the institution closed withinside the console even as the institution defaults to having the institution open. The groupEnd technique then closes off the modern institution.
Every log that happens at the beginning and stopping of a collection may be placed inner that institution. Let`s study an example.
In the above instance, we created three distinct corporations. The first organization had no cost that exceeded the organization approach so it simply receives a default label.
In the 2d organization, we exceeded a label of Label to the organization approach so withinside the output you may see that it has that label related to the organization. We additionally placed a collapsed organization interior of this organization to exhibit that you may nest corporations interior of corporations as plenty as you need. You also can see that the collapsed organization isn’t open with the aid of using default withinside the output.
These organization techniques are notable in case you want to output a big quantity of records this is related, however you don`t need it to fill the whole output of the console.
Performance Logging Methods
The subsequent institution of console strategies I need to speak approximately is the overall performance-centered strategies. These may be cut up into groups.
1. Timing Related
2. Profiler Related
Time-Based Logging
The first institution is the handiest to apprehend considering all it offers is calculating the time among feature calls. It additionally works very in addition to grouping.
We begin a timer much like we begin a group. We can skip a label if we need it so that it will companion our timer with that label. The best distinction between timers and companies is that in case you supply your timer a label you want to additionally use the equal label whilst you finish the timer. This is due to the fact you may run a couple of extraordinary timers without delay and the label is used to decide which timer to stop.
Timers even has a neat feature known as a time log which helps you to print out the modern time of the timer without finishing it.
Again similar to with timeEnd you want to skip the label to the time log so it is aware of what timer to use.
Profiler Logging
Now in case you need to take your overall performance logging to the following stage, you could use profiler logging which fits much like the time primarily based totally logging from above, however in preference to the usage of a starting/preventing an easy timer it starts/stops the profiler constructed into the dev equipment of your browser.
This will release the profiler for your browser dev gear and report a group of overall performance-associated facts. Now relying on your browser this fact is positioned in a one-of-a-kind region and displayed in a one-of-a-kind way. Also, that is a non-fashionable characteristic so a few browsers might not assist this or may also deal with it in an atypical way. Because of this I typically wouldn`t advocate the use of this technique until you know the way it really works together along with your browser.
Lastly, earlier than we flow on I ought to point out that much like with time primarily based totally logging you may use the timeStamp technique to feature a marker for your profiler so that you can see how long it took to get to that point.
Utility Logging Methods
The very last console techniques I need to speak approximately don`t honestly match into any of the above categories, however, they’re nevertheless exceptionally useful.
Assert
Probably my preferred console approach of this organization asserts. This works precisely similar to the fundamental console methods, however, it takes a boolean because of the first parameter. If this boolean is real it’s going to now no longer do something and basically pass the log entirely. If the boolean is fake then it’s going to log the entirety exceeded to the assert approach after the boolean parameter. It is largely like wrapping your log internal and if statement.
This method is perfect for testing values to see if they are what you expect which can make your logs much cleaner if you only log when something is unexpected.
Clear
Count and countReset
The depend and countReset capabilities make it clean to depend on the variety of instances the fee became logged. This works incredibly further to timers.
The count feature takes an elective label to indicate what you’re counting after which in case you need to reset the count you need to byskip the equal label to the reset feature.
Trace
The closing console approach I need to speak approximately is trace. This is a completely easy feature that simply prints out the present-day stack trace on the factor the approach is called. This is awesome for debugging what capabilities are calling different capabilities and to parent out how you bought to a particular area withinside the code.
Conclusion
I guess you didn`t anticipate there to be this many console strategies. I understand I changed into quite amazed with the aid of using the sheer amount of particular strategies once I commenced my studies for this article. Hopefully, at the least, this kind of new strategy will assist take your debugging talents to the following level.
About us:
Follow us on medium to get a complete journey topic by topic or follow on Facebook, Quora, LinkedIn or connect with the community on Facebook. Read our other blogs.
Read 25 Algorithm You Must Know: A Rubics Edition
Read: Do you want to feel Data Structures?: A Kinda Roadmap
Read: Searching & Sorting
Read: Let’s Draw a Roadmap for Competitive Coding
Read Time & Space Game: Let’s Find Complexity of My Code
If you are a beginner, you can start your coding journey with us our code lab.
Thank you for reading this article this far. Please share your viewpoints in the comments and topics on which you want an article.
Thank you. See you soon!
