Back to all blogposts

Console object tricks & other secrets of developer tools

Piotr Parzentny

Piotr Parzentny

Frontend Developer

In our daily work as web developers (not only frontend specialists), one tool that everyone tends to use a lot is the developer console. The leading browsers on the market all constantly come up with newer and newer functions and mechanisms that facilitate everyday work and support the debugging process. Most developers use this tool to view errors and display data using the (in)famous console.log() function. However, the potential of this tool is much bigger. It requires learning more about the console object which is exactly what I’m having you do today.

I know, I know:

console log

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:

Console window

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:


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:


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.

Console object

The most frequently used object in the browser console in everyday work is definitely the… console object

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.

Log & dir console methods

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:

Content types

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.

Table function

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.

CSS in developer console

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.

jQuery in developer console?

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.

And if you want engineers that know developer tools like the back of their hand, contact The Software House. 👇

You may also like

What do you want to achieve?

    You can upload a file (optional)

    Upload file

    File should be .pdf, .doc, .docx, .rtf, .jpg, .jpeg, .png format, max size 5 MB

    0 % of

    or contact us directly at [email protected]

    This site is protected by reCAPTCHA and the Google
    Privacy Policy and Terms of Service apply.


    Thank you!

    Your message has been sent. We’ll get back to you in 24 hours.

    Back to page

    We’ll get back to you in 24 hours

    to get to know each other and address your needs as quick as possible.


    We'll work together on possible scenarios

    for the software development strategy in sync with your goals.


    We’ll turn the strategy into an actionable plan

    and provide you with experienced development teams to execute it.

    Our work was featured in:

    Tech Crunch
    Business Insider

    Aplikujesz do

    The Software House

    CopiedTekst skopiowany!

    Nie zapomnij dodać klauzuli:

    Kopiuj do schowka

    Jakie będą kolejne kroki?


    Rozmowa telefoniczna

    Krótka rozmowa o twoim doświadczeniu,
    umiejętnościach i oczekiwaniach.

    Test task

    Zadanie testowe

    Praktyczne zadanie sprawdzające dokładnie
    poziom twoich umiejętności.


    Spotkanie w biurze

    Rozmowa w biurze The Software House,
    pozwalająca nam się lepiej poznać.

    Response 200

    Response 200

    Ostateczna odpowiedź i propozycja
    finansowa (w ciągu kilku dni od spotkania).