5 console tips to debug your web apps with Chrome Dev Tools
Make the most out of your debug and test sessions
Still, if we learned about the different console tricks of different browsers, we could considerably improve and optimize the process of debugging code.
Here are some of the most important and useful console tricks from Chrome Dev Tools to have in mind for enhancing your productivity when debugging front-end applications:
#01 – Writing to the console
Use the console.log() method for any basic logging to the console. The string parameter passed to any of the logging methods (log, info, warn, error) may format specifiers.
%s Formats the value as a string
%i or %d Formats the value as an integer
%f Formats the value as a floating point value
%o Formats the value as an expandable DOM element
%c Applies CSS style rules to the output string
The console.dir() method writes a DOM element in a JSON format, while the standard logging method writes it in HTML tree format. This command prints an interactive listing of all properties of the object. This looks identical to the view that you would see in the DOM tab.
#02 – Tables
The table() method provides an easy way to view objects that include similar data. When called, it will take the properties of an object, create a header and display data from each index’s properties value. All properties are shown regardless of whether an object contains it or not.
The second parameter passed to the method table(), can be used to log more advanced objects and particular properties. For instance, logging only some desired object’s properties may be more useful.
#03 – Measurements
When tracking time elapsed between code execution points or methods is required, the console.time() method is very helpful. This method starts a new timer, passing a string to the method to give the marker a name. The timer will finish when the marker name is achieved by the console.timeEnd() called method.
Console time for example.
Use console.count() to count how many times the same label is passed to a function. This method writes the number of times that the line of code where count was called was executed. The optional argument title will print a message in addition to the number of the count.
#04 – Exception and Error Handling
When an exception or error happens, the console provides specific, reliable information to locate and correct the problem. Errors and Warnings act the same way as normal logging. Both methods, console.error() and console.warn() output to stderr.
The console.assert() method conditionally displays an error string if its condition evaluates to false, without interrupting execution. It tests that if an expression is true and if not, it will write a message to the console and throw an exception.
#05 – Command line API – Historical References
$_ returns the value of the latest evaluated expression.
$(selector) returns the reference to the first DOM element with the specified selector. This is an alias for the document.querySelector() function.
$$(selector) Returns an array of all the elements that match the specified selector. Alias for document.querySelectorAll().
$x(path) returns an array of DOM elements that match the given XPath expression.
Whenever you want to debug or test your front-end web app, consider applying these tricks that Chrome Dev Tools offers. If you are wondering to know more about all the functionality available, you may visit the oficial documentation of the Console’s API.