Yogesh Chavan

Posted on Aug 21, 2020 • Edited on Apr 26, 2021

Most Useful Features of Chrome Developer Tools That You Must Know

#javascript #codenewbie #webdev #react

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.

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

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

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

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

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.

Create a new folder on your machine to store the override files
Goto overrides tab inside sources tab (Hit the two arrows to select the overrides tab if not displayed by default)
Click on "Select folder for overrides"
Select the folder created in the first step
Click on the "allow" button in the popup displayed on top of the browser to allow making changes in browser files
Change any JavaScript or CSS file and save the file using Ctrl+S or Cmd+S(Mac)
You might see the "DevTools has disconnected from the page" error the first time when you save. This is ok.
Reload the page using Ctrl+R or Cmd+R(Mac)
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

Get Formatted JSON In Console

Consider you have the following JSON.

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)

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

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

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

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

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)

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

Calculate The Code Execution Time

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

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.

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

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.

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

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

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)

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

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

document.designMode = 'off'

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

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.

Top comments (12)

Ero Stefano • Aug 22 '20

I learned a lot! I hope you will do one also for the other registers in developer tools.

Yogesh Chavan • Aug 22 '20

Glad you found it useful. Can you please elaborate what do you mean by other registers in devTools?

Ero Stefano • Aug 22 '20

Sorry, I read that on my mobile and could check the dev tools before. :) I mean registers like application, memory, performance, lighthouse and security.

Yogesh Chavan • Aug 22 '20

Okay. Sure, I will create an article for that soon

M Ashkhan Ahmed • Mar 17 '21

Thanks brother
This very useful for me.

Yogesh Chavan • Mar 17 '21

Glad you found it useful. Thank you 🙂

André Pereira • Aug 21 '20

Great post, Chavan! I Really liked the console.table. We can also not forget the Design Mode feature that allow us to edit a webpage without coding.

Yogesh Chavan • Aug 21 '20

Thanks for reminding me of the design mode. I used it many times but I totally missed it to include it. I have updated the article now with the design mode feature. Check it out!