How to use the Chrome Developer Tool

Hey guys!
Today I'm going to show how to use the Chrome Developer Tool (Found in Google Chrome).

The Chrome Developer Tools (DevTools) is an inbuilt tool in Google Chrome that helps developers to debug websites. According to Google Chrome Devs,

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization.

To use the Chrome Dev Tools,

• Click on the Chrome Menu > More Tools > Developer tools
• Right click on the website > Click on "Inspect Element"
• Press Ctrl + Shift + I

Once its opened, you will see something like this:

Chrome Dev Tools (Taken from my blog post editor)

There are 8 groups of tools in Dev Tools:

• Elements (To modify the website HTML)
• Network (To analyse network performance and modify network requests)
• Sources (To debug JS code)
• Timeline (To analyse application performance)
• Profiles (To profile web apps)
• Resources (To modify web app resources)
• Audits (To examine website improvements)
• Console (To execute JS code)

Elements

This view is used for editing the HTML of the website on which the DevTools are working on. It also shows the CSS rules acting on it. This can be used to alter the text of the website temporarily (it only modifies what comes on the browser, it doesn't edit the actual file) so you can change the text of a website to something else (remember, its temporary).

For example, try right-clicking on something on a website and then click on inspect element

Inspect Element

Once DevTools has opened, the element will be highlighted in the HTML code:

Next, double click on the text inside it and type something else. Once you're done, press Enter. The text will change.

Network

The network view is used for seeing network requests and editing them as well. Web Developers can use this feature to improve load times of their web apps.

Sources

This is used to debug JS code. Web Devs can use this for checking where JS code is failing, etc.

Timeline

This is used for analysing the time it takes for JS code to run (i.e. performance of the JS code). Again, Web Devs can use it to improve the efficiency of the JS code.

Profiles

This is used by Web Devs for making JS code efficient by checking CPU usage, Memory usage and also to find data leaks.

Resources

Now this is another place that is interesting. This view is used for editing the resources that a web app uses. For example, some HTML 5 games use Local Storage/Cookies to store information about a game save. So you can open the respective view and edit the values. If you're lucky, it might be unencrypted as well.

Audits

These can help a WebDev improve a website by scanning for problems in the website.

Console

In this view, you can enter JS commands (functions: native or from the website itself) that run on the wbsite. Try typing console.log("Hello!") or alert("Hello!") and see the result.

Another feature of the DevTools is the Device Mode which allows to see how the site will look like in smaller screens. To activate it, click on the icon on the top left of the DevTools, next to the search icon.

In all, the DevTools are are a very useful addition to Web Developers even though it might not be useful for everyday users.

Thanks for reading!

-Technohacker