Most Useful Features of Chrome Developer Tools That You Must Know
Tags: javascript, codenewbie, webdev, react
Published: 2020-08-21 07:08:58

Chrome developer tools are an essential part of web development.

Here are some of the tips and tricks of chrome developer tools to make your life a lot easier during development.

## Take Screenshot Of The Entire Page

- Right click anywhere on the page and select inspect option to open Chrome developer tool
- Open command menu by pressing Ctrl+Shift+P or Cmd+Shift+P(Mac)
- Type screenshot in the search box and select "Capture full size screenshot" from the result.
  
It will take a screenshot of the entire page no matter how long the page is.

![Take Screenshot](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/678e9fdbc2fb4c99633bcd1a0a5964843c4cf8f0/scr.png)

You can also take screenshot of any section of the page using this trick. Suppose you are on homepage of dev.to website and want to take screenshot of the header

- Right click on the header and select inspect option
- Select the "Capture node screenshot" from the command menu

![Node screenshot](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/8a722cdb14de32f8446dd7bbc7bc6acbfcdcf51a/node.png)

---

## Get The CSS Styles Of Any Element On Page

Suppose you are on google.com and want to see the CSS styles applied for google logo

- Right click on the google logo image and select inspect
- Rightclick on the image tag and select copy -> copy styles and the styles applied for the logo will be copied to your clipboard

![Styles](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/styles.png)

---

## Snippets

The snippet is the JavaScript code that you want to execute on any website.

This is to save from manually copy-pasting the code in console to test on every page. You can run the created snippet on any website, anytime.

To Create a snippet

* Goto sources tab of developer tool
* Click on New snippet(Hit the two arrows to select the snippet tab if not displayed by default)
* Write the code
* Save the file by giving some name
* Execute the code by right-clicking on the snippet file name and select run.

For example, if you want to get all the scripts included on a webpage, you can use the below code

```js
(function () {
  console.log(
    Array.from(document.scripts).forEach((script) => console.log(script))
  );
})();
```

![Snippet](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/snippet.png)

Note that, the snippet code that needs to be executed has to be an IIFE(Immediately Invoked Function Expression)

---

## Local Overrides

This technique allows the mapping of local JavaScript or CSS files to files on the production site. This is very useful for debugging production issues.

Many times the UAT / Production environment has environment-specific data like database, migration scripts, etc so making the local environment the same as UAT / Production is not possible. 

In this case, local overrides come very handy. You can quickly execute any JavaScript or CSS directly on UAT / Production by mapping local files without the need of deploying the changes.

To do that, follow the below steps.

1. Create a new folder on your machine to store the override files
2. Goto overrides tab inside sources tab (Hit the two arrows to select the overrides tab if not displayed by default)
3. Click on "Select folder for overrides"
4. Select the folder created in the first step
5. Click on the "allow" button in the popup displayed on top of the browser to allow making changes in browser files
6. Change any JavaScript or CSS file and save the file using Ctrl+S or Cmd+S(Mac)
7. You might see the "DevTools has disconnected from the page" error the first time when you save. This is ok.
8. Reload the page using Ctrl+R or Cmd+R(Mac)
9. You can see your changes reflected on the site.
   
It will persist your changes even across refresh so you can test your changes before pushing to UAT or production site.

Note, you can make changes to JavaScript or CSS files in your preferred editor like VS Code instead if changing in the browser does not feel good. Just copy the changed file in VS Code to the folder created in the first step at the correct directory and refresh the page in the browser.

Check out the below video for the demo

{% youtube VJzdRTncshs %}

---

## Get Formatted JSON In Console

Consider you have the following JSON.

```js
const book = {"date": "2019–03–22","book": "Harry potter","author": "J.K.Rowling"};
```

To make it more readable in console, you can use `JSON.stringify(book, null, 2)`

![Formatted JSON](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/formatted.png)

The 2 passed as the last argument is the number of spaces to use before each line. You can even pass `\t` to indent it by tab

![Formatted JSON](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/formatted1.png)

---

## Copy Variable Value To Clipboard While Debugging

Suppose you are debugging code in chrome by adding breakpoint and the variable value is a long JSON and you want to copy that value for inspection, you can execute the `copy` function in the console by passing the variable name and the value will be copied to your clipboard

![Copy](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/copy.png)

---

## Copy Any Value Displayed In The Console 

If you want to copy some JSON data displayed in the console,  
* Right click on the displayed JSON 
* Select "Store as global variable" option
* Click anywhere on the console to display the temporary variable name which will be temp1 or temp2 or something else.
* Use the `copy` function to copy that value to the clipboard

![Store as global variable](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/477f02ffb498a9c7d82af3509609d3bc63093cc2/copy.gif)

---

## Watch For Changing Variable Values While Debugging

Many times while debugging in chrome, you will find yourself using your mouse to hover over the variable name to check its current value.

This is painful every time doing a mouse over to check the value for each variable. Instead of doing this, you can add that variable name in watchlist by clicking the `+` button beside the watch section in the debugger as shown below

![Watch](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/watch.png)

So every time you are stepping through the code, the current values will be updated in the watch section and you don’t have to mouse over the variable name

![Watch](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/watch1.png)

---

## Find The Unused CSS From Your Website

Using this technique you will be able to quickly find the redundant CSS that is not used anywhere on the site.

This allows us to minimize the CSS file size by removing that unused code.

* Goto any tab like console tab and press Escape key.
* You will see the coverage tab. (Click on the three dots on the left side and select coverage if coverage tab is not displayed for you by default)

![Coverage](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/coverage.png)

* Click on the reload button displayed to start coverage
* It will display all the JavaScript and CSS files
* Search for .css in the search box to filter the result
* Double click on any .css file and it will show you the unused CSS by highlighting it with red color

![Unused CSS](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/unused.png)

---

## Calculate The Code Execution Time

`console.time` and `console.timeEnd` functions allow us to find out the time taken for executing a particular code.

```js
console.time('users');
axios.get('https://randomuser.me/api/?page=1&results=20').then((response) => {
  console.timeEnd('users');
});
```

Once you execute the above code, you will see output which displays the time taken in milliseconds in this case.

![Total Time](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/total_time.png)

---

## Print JSON Array In Table Format

If you have an array of JSON objects you can use `console.table` to get the result in a table format so you can analyze it better

![Table](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/table.png)

---

## Create A New Inline Group For Better Logging

If you have a loop that iterates through items and you want to see the variable values during each iteration, you can use `console.groupCollapsed` method. It allows us to easily see the output without cluttering the console.

```js
axios.get('https://randomuser.me/api/?page=1&results=5').then((response) => {
  const users = response.data;
  users.results.forEach((user) => {
    const name = user.name;
    const location = user.location;
    const email = user.email;

    console.groupCollapsed('User Details');
    console.log(name);
    console.log(location);
    console.log(email);
    console.groupEnd('User Details');
  });
});
```

Once you execute the above code, you will see the output as shown below

![Group](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/group.png)

---

## Quickly Find Any File On The Website

If you want to see all the files loaded by a particular site, you can use Ctrl+O or Cmd+O (Mac) to see the list of all files. Here you can check for a particular file or just type .css to see list of CSS files

![Find File](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/list.png)

---

## Search Across All Files

To search for a particular text across all the files loaded on the page, use
Ctrl+Shift+F or Cmd+Option+F(Mac)

![Search All](https://gist.github.com/myogeshchavan97/e0be7fc4c838544e2d00afeb3a82ae10/raw/3e0757f4f9bb3005a1cfc4b18cb43f722db73bb1/search.png)

---

## Easily Edit Any Website Text 

Now here comes a cool trick that lets you edit any text displayed on the website. This trick avoids the need of selecting the element and editing it in elements panel. 

To edit the text
* Goto any website.
* Execute the below code in your developer console to make the site editable

```js
document.designMode = 'on'
```
* Now click on any heading or text from the website and you can directly start typing and changing the text displayed.
That's pretty cool.

To turn off the editing, execute

```js
document.designMode = 'off'

```
Check out this video by Tomek Sułkowski to see it in action.

{% twitter 1177559150563344384 %}




<br />

That's it about this article. I hope these tips and tricks will be helpful to you.


**Don't forget to subscribe to get my weekly newsletter with amazing tips, tricks and articles directly in your inbox [here](https://yogeshchavan.dev).**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)