Console object tricks & other secrets of developer tools

I know, I know:

But chances are you can really do a lot more with it than you expect. Without further ado, let’s get right to it.

The console window looks quite similar in most browsers and you can invoke it by default with the F12 key (fn + F12 on Mac). In addition to reading information from the page, you can execute special commands, modify the DOM or execute any JS code:

As you can see, it gives you a wide range of possibilities to test and check various elements of the website being built. A useful parameter for quick content editing on the website is:

document.body.contentEditable=true;

Calling it in the console will allow you to freely edit all texts on the page, which may be useful not only for programmers but also for copywriters and testers.

The console object

The most frequently used object in the browser console in everyday work is definitely the… console object. While everyone uses its log() method to display data, it actually offers a lot more possibilities, the list of which can be easily viewed by running the following command:

console.log(console);

As you can see, the console object has quite a lot of interesting functions to offer. I’m going to go over some of the most important ones.

The log & dir methods in the developer console

As I already mentioned, the most frequently used developer console method in the debugging process is log(). It has a counterpart: dir(). So what’s the difference between them?

Well, the first one shows you only the data given in the parameter, transforming it into a string, while the dir() function displays the full tree, which includes the type of given data. It provides a different, more complete view of the variables being checked.

Multiple log levels in the developer console

When testing software, you can log various types of content within the console object, taking into account specific types (levels). You can choose from:

• error – to log errors in the application,
• warn – for warnings,
• info – for information texts,
• debug – logs entries with the debug flag.

These different types of content of the console object appear in the console as follows:

Table function in the developer console

Is it possible to display complex data structures somewhat more conveniently? 

Naturally! The table() function comes in handy as it presents data in the form of an easy-to-read table. This mechanism can be especially convenient for previewing complicated JSONs coming from the API.

Timers in the developer console

The console also allows you to conveniently measure the time of command execution. For this purpose, you can use the following functions:

• console.time() – starts the timer,
• console.timeLog() – calling this function displays the current timer status,
• console.timeEnd() –  ends the timer.

Custom log styling in the developer console

The content presented in the console does not have to be visually archaic. By adding CSS style to console.log() as parameters, you can replace any occurrences of %c in the log content with the selected properties.

Usable CSS styles are of course limited and dependent on the browser used, but basic text formatting options are fully available and should be more than enough in your daily work.

jQuery in developer console?

Who does not like working with jQuery? For all fans, the browser console is a very nice place to be. You can conveniently get elements from the DOM using the following functions:

• $('tag')
• $('.class-name')
• $('#id-attribute')

These functions are equivalent to the document.querySelector() method. They only return the first element. If you need to return a complete list of elements matching the query, just use the double dollar sign $$. Then, an array is returned that allows you to perform further operations.

Console object and developer console tricks – summary

As you can see, the possibilities of the browser console are very wide. Thanks to the use of appropriate functions or possibilities offered by the JavaScript language, you can manipulate the output data in detail, including:

• Getting more information about the data with the dir method.
• Logging different types of content within the console object for testing purposes.
• Displaying complex data structures in a convenient manner.
• Using CSS in the developer console.
• Running JavaScript in the console.

Of course, the possibilities presented above do not cover the whole topic. Some of the available functionalities are specific to a given browser. You can learn more about them in the developer’s documentation (for example, check out this resource for Chrome DevTools). It is worth following any changes to these functionalities and looking for solutions that will best support your work in a given project.