5 console tips to debug your web apps with Chrome Dev Tools

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

console.log

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.

Formatter Output
%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
%O Formats the value as an expandable JavaScript object
%c Applies CSS style rules to the output string

console.dir

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

console.table

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

console.time

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.

console.count

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.

Console.trace

The console.trace() method shows the call path taken to reach the point at which the method was called. Prints an interactive stack trace of JavaScript execution at the point where it is called.

#05 – Command line API – Historical References

• $0 – $4 commands reference to the last five DOM elements inspected or the last five JavaScript heap objects selected in the Profiles panel.

• $_ 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.