Chrome DevTools – Becoming A Power User

This article will help you get the basics of chrome’s developer tool and turn you from a novice user to a Power user.

What are the Chrome DevTools?

The Chrome DevTools are also known as Google Chrome Developer tools which comes inbuilt with Google Chrome. Other browsers have their own developer tools but for the sake of this article we’ll focus on Chrome DevTools.

You can do anything from testing your website on different viewport screen as well as editing them on the fly and even measure the performance of your entire website or individual assets.

How to access Developer Tools?

There are quite a few ways to do that some of them are listed below:

1) Accessing it from Menu

You can click the menu icon in the top right corner and go to More tools and click Developer tools

2) Using Keyboard Shortcuts

You can use Ctrl+Shift+I or F12 to open the chrome’s element panel.
If you want to open the console panel directly use Ctrl+Shift+J.

3) Using Right Click

You can right click on any page and click Inspect.

Using the Element Panel.

As the name suggest, Using this panel we can target any element of the DOM. We can quickly change the Html tag name, add classes, edit content and many other things of a web page.

In Element Panel, there are few sub panels.

1. Styles Panel:
   We use Styles panel to add/modify CSS classes and properties for an element and there are many ways to do it.
   For e.g. we can add/remove a class using the .cls Option, here we can add and remove the classes and see their effects in real time. To add a class just type the name of the class in the input section and to remove a class just uncheck the class name!
   

We can also simulate pseudo classes events like hover, active etc. To do that use the :hov option.

Just check the state which you want to simulate and it will work.

Another trick is to use this menu with this you can add text-shadow, box-shadow, color, background-color and a new class respectively. To access it just hover on the element style and click the vertical ellipsis icon.

2. Computed panel:
   We use the computed panel to see all the computed values of the CSS properties of a certain element.
   For e.g. if we set a font-size of an element to 2 rem then the computed value of font-size will be 32px (assuming the root font size is 16px).

Value Set By User:

Computed Value:

Another thing that we can do is analyze the element dimension as shown in the picture above.

3. Event Listeners Panel is not used much but here you can see the event listeners attached to selected element.

4. The DOM Breakpoints are used to break on DOM mutation events, such as when a node is removed, modified, or its attributes are changed.

Using the Console Panel.

You can directly access it using Ctrl+Shift+J or on any other panel press escape to open it.

Here we write JavaScript, For instance we can write JavaScript code to manipulate the DOM.
For e.g.
let element = document.querySelector(any css selector here);

If we inspect the element we can access it using $0 (zero) and the previously clicked element can be accessed using $1 and so on.

We can use the setting icon in the top right corner (Img-4) and click on Preserve Log to retain the logs even after reload.

Using Source Panel.

This panel is used to view the source files and for debugging the code.
We can add break points in a script file and hit reload.
It will stop the execution of the script at that point, and we can view the state of the variables at that point of time.
Some Power user tips.

1. Quick Switch in between files: Press Ctrl+P to open the command panel and type the file name.
2. Searching in the source file: Press Ctrl+Shift+F with the source panel open and you can search in the file.
3. Formatting the Source file: Click this icon and it will format the file.

Using Network Panel.

Network Panel is used to monitor all the request made for downloading and uploading the resources. You can analyze the network activities and detect which resource are causing problem and fix it.

We can see the request by filtering the type of the request like XHR, CSS, Fonts etc by clicking on the name. Here in the above image we are filtering by XHR.

To replay an XHR, just right click on the request and click Replay XHR.

Some Power user tips.

1. Filtering the network request by method type. Use method:METHOD-NAME in the filter input and it will filter the requests. You can use Logical AND operation by separating them by `` (space) and if you Logical NOT use the - (minus sign).
2. You can import the whole activities response and share it with your devs. This comes handy while debugging the apis.
3. You can save the data as global object from network and perform high level operations using console panel.
4. Network Throttling - You can throttle the network and slow it down.
   Typical use case is when you want to fix the loader on the fly.