I was not so keen on publishing this article initially as I thought that I would be repeating the things that you might be knowing already. After all, it is all about using Browser's Dev Tool Efficiently. But later, I realized that each of us must be having our own favorite set of tips and tricks that are fine to boast about. Thus the article happened!

Statutory Warning:

To me, Web Browser's Dev Tool and Chrome Browser's Dev tool are Synonyms.

Please note that I am not going to mention things like console.log('Hi'), how to debug Source files, or inspect the DOM. Most of you must be doing it day in and out. All that I mentioned below are least-used but can make you a very productive Web Developer. Let's get started.

Elements Panel

Following Tricks are related to the Elements tab of Chrome's Debugger Tool

Re-arrange Position of Elements

You can Drag-and-Drop the elements to move Up-and-Down in position. This is very helpful while editing/debugging the HTML structure.

Reference a Node in Elements panel

Do you have to select a particular Node in the Elements panel and refer to it from the Console panel? You may have if you want to do further processing(or debugging) on that Node.

Use $0 for it.

Note: if you’re using jQuery in your project, you can use $($0) to access and apply jQuery APIs on this element.

Doing lots with a single DOM Node, like taking a Screen Shot?

You can take a screenshot of a DOM node without going out of the Debugger tool. Yeah, Fancy! Press ctrl-shift-p(I think it is cmd-shift-p in Mac) by selecting a node. You will be given lots of options to select from. One of those is to take a Screen Shot, Really!

Do not forget to explore other options available on pressing ctrl-shift-p for DOM Node.

Console Panel

This one is my favorite panel among all the available panels.

Go Multi-Line

It is annoying at times to type multi-lines in the console panel. You can do it just by pressing shift-enter key combinations. Keep pressing shift-enter to continue with the execution for each line. Once done, press the enter key.

Console logs Formatting

If we go beyond the simple console.log('Hi'), there are few more useful versions of it for better formatting:

%s format a variable as a string
%d format a variable as an integer
%f format a variable as a floating-point number
%o can be used to print a DOM Element
%O used to print an object representation
%c used to pass CSS to format a string

Let's see some of these as example below:

console.log(
  '%c I have %d %s',
  'color: green; background:black; font-size: 20pt',
  3,
  'Bikes!'
)

Run the above code in the console panel. You will see an output as,

Store as Global Variable

Often we get a bigger chunk of a JSON object as a response. We might want to pick a portion of it and work on it. There is a way to save any portion of the JSON object as a Global Temporary Variable that can be accessed in the console panel. See it now:

Advanced Logging in the Console panel

console.dir

console.log(['Apple', 'Orange]);

Output is,

Now try,

console.dir(['Apple', 'Orange'])

The output is almost the same as above but, it explicitly says the type as an Array.

console.table

This prints a Table representation in the console. It is mighty when you deal with a complex object. Just print it as a tabletop view and inspect it with ease. See it in action:

Preserver Console Logs

Isn't it annoying that the logs in the console get cleared of on Navigating to other pages? You can preserve those just by checking a check-box:

Grouping Console logs

At times, keeping the logs loose can cause delays in debugging. Consider a situation that, you want to group all the logs together for a function and do not want it to be mixed with other log messages. Yes, you can do it easily.

console.group('Testing my calc function');
console.log('adding 1 + 1 is', 1 + 1);
console.log('adding 1 - 1 is', 1 - 1);
console.log('adding 2 * 3 is', 2 * 3);
console.log('adding 10 / 2 is', 10 / 2);
console.groupEnd();
`

The output is a grouped log together:

You can really go as nested as you want. The use of console log grouping is highly recommended.

It is time for console.time

Often you will find a need to measure how long a function takes to execute? How long a block of code takes to execute? console.time() and console.timeEnd() are very useful utilities to help here. Here is an example of calculating the time it takes to get the last name of billion objects(I have just mimicked the billion!)

function test time() {
  var users= [
    {
      firstname: "Tapas",
      lastname: "Adhikary",
      hobby: "Blogging"
    },
    {
      firstname: "David",
      lastname: "Williams",
      hobby: "Chess"
    },
    {
      firstname: "Brad",
      lastname: "Crets",
      hobby: "Swimming"
    },
    {
      firstname: "James",
      lastname: "Bond",
      hobby: "Spying"
    },
    {
      firstname: "Steve",
      lastname: "S",
      hobby: "Talking"
    }
  ];

  var getName = function (user) {
    return user.lastname;
  }

  // Start the time which will be bound to the string 'loopTime' 
  console.time("loopTime");

  for (let counter = 0; counter < 1000 * 1000 * 1000; counter++) {
    getName(users[counter & 4]);
  }

  // End the time tick for 'loopTime
  console.timeEnd("loopTime");
}

Once you run the above code from the console panel or within the node environment, you will be getting the output like,

loopTime: 2234.032958984375ms

That's the total time taken in milliseconds to compute the last name of billion Users. Great!

$_ Refer to previous execution output

When you are in the console panel, you can refer to the previous execution output with $_. You can feed this output as an input to your next execution logic.

This is just a small set that I am in love with. There are plenty of other panels to cover as well. You can find the full list from Google's Tools for Web Developers. It surely deserves a book-mark in your favorite browser.

I would love to hear from you on your favorite set. As they say, 'Sharing is Caring, please share some by posting a comment below.

Image Courtesy: GIPHY.com

I hope you liked this post. Please hit the Follow button below to read my future articles. Happy Exploring!

DevTools - My Favorite Tips and Tricks

Comments (5)

Learn with Tips and Tricks

Advanced JavaScript Console Logging for Developers

More from this blog

Goodbye, Slow-Motion Tortoise: A Deep Dive into SSR Streaming

Mastering React Design Patterns for Building Maintainable Forms

JavaScript Variables Explained Clearly: Values, Types, and How Data Really Works

JavaScript Explained From Scratch: How the Web Becomes Interactive

Tidbit 01: How Does Event Loop Handle Promises? Ever Thought?

Elements Panel

Re-arrange Position of Elements

Reference a Node in Elements panel

Doing lots with a single DOM Node, like taking a Screen Shot?

Console Panel

Go Multi-Line

Console logs Formatting

Store as Global Variable

Advanced Logging in the Console panel

console.dir

console.table

Preserver Console Logs

Grouping Console logs

It is time for console.time

$_ Refer to previous execution output

Command Palette

Comments (5)

Learn with Tips and Tricks

Advanced JavaScript Console Logging for Developers

More from this blog

Elements Panel

Re-arrange Position of Elements

Reference a Node in Elements panel

Doing lots with a single DOM Node, like taking a Screen Shot?

Console Panel

Go Multi-Line

Console logs Formatting

Store as Global Variable

Advanced Logging in the Console panel

console.dir

console.table

Preserver Console Logs

Grouping Console logs

It is time for console.time

$_ Refer to previous execution output