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

Make the most out of your debug and test sessions

The Chrome DevTools can improve your workflow by helping you develop, test and debug your websites right within your browser. Many developers are not familiarized with the wide variety of functions of Chrome DevTools. Thus, most of us use the JavaScript console for logging necessary values.

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

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 log with format specifiers.

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.

Console dir example.

#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.

Console table to show all properties.

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.

Console table display advanced objects.

#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 time forEach 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.

Console count example.

#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 assert example.

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.

Console xpath example.

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.

Do you want to create a headless WordPress with React and GraphQL?