# DevTools - My Favorite Tips and Tricks

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
![elements.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1558785243928/F5GDoMcpM.png)

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

![dom_move.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1558785720996/R6QfJpQmc.gif)

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

![refer_element.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1558786580229/CQfU7HFRz.gif)

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

![screenshot.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1558787189051/QjG7BMGwt.gif)
- 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.
![cosnole.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1558787443044/sqp8oDaQ3.png)

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

![multi-line-console.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1558787867686/wydL7uAwc.gif)

### 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:
```javascript
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,
![formatconsole.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1558788500987/2ObgBTSdr.png)

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

![global_var_console.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1558789422004/kW4xg1E2b.gif)

### Advanced Logging in the Console panel

##### console.dir
```javascript
console.log(['Apple', 'Orange]);
```
Output is,
![advancedlog1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1558789868258/XF7IHGD6F.png)

Now try,
```javascript
console.dir(['Apple', 'Orange'])
```
The output is almost the same as above but, it explicitly says the type as an `Array`.
![advancedlog2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1558790035228/d6VYz-DYm.png)

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

![console_table.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1558790387161/tlc-3mREB.gif)

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

![preserve_logs.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1558790858421/eHSuD081H.gif)

### 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.
```javascript
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:
![groupedlogs.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1558791233772/sD3lasvq1.png)

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!)
```javascript
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,
```bash
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.

![last_ref.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1558838783422/ttsIPElm_.gif)

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](https://developers.google.com/web/tools/chrome-devtools/). 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.

![type.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1558839182027/-OzjLPV_E.gif)
*Image Courtesy: GIPHY.com*

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