Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 21, 2020 07:08 am GMT

Most Useful Features of Chrome Developer Tools That You Must Know

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

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

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

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))  );})();

Snippet

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

Get Formatted JSON In Console

Consider you have the following JSON.

const book = {"date": "20190322","book": "Harry potter","author": "J.K.Rowling"};

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

Formatted JSON

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

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

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

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

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

Watch

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

  • 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

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.

Total Time

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

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

Group

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

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

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

Check out my other React, Node.js, and Javascript articles at Medium and Don't forget to subscribe to get my weekly newsletter directly in your inbox here.


Original Link: https://dev.to/myogeshchavan97/most-useful-features-provided-by-chrome-developer-tools-that-you-must-know-bak

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To