Chrome developer tools: How to Use Chrome Developer Tools

Web browser Chrome have two uses. On the one hand, ordinary Internet users to browse the web, and on the other hand, developers to develop applications that work. Google Chrome offers developers built-in tools to analyze applications and troubleshoot problems. When you use Google Chrome, you can find these tools by pressing CTRL + Shift + I (Windows) or CMD + opt + I (Mac) on your keyboard. This will open up a developer console made up of various tools. These tools will greatly help you with most development problems. The developer tools are very helpful in diagnosing the problem quickly and help speed up the application development cycle. Let’s move on to the sections where you can learn more about how to use the developer tools in the Chrome browser.

Chrome developer tools

Checking an element on a web page

This allows us to quickly select any element on a web page. Let’s say you want to check a section of a page and can’t find the code for that section. What you can do is press CTRL + Shift + I on your keyboard to open the developer tools and click the little arrow icon as shown below. Now you can navigate to any section of the page, it will highlight the element and the corresponding code in the developer tools section.

 

  1. Device mode

Now this is something cooler, when you are working on any project you need to make sure your web page looks good on all devices. This means that you have to test your work on every device. Chrome gives you the ability to see different device modes to check if your work is responsive to them or not. Go to developer tools and click on that little “Toggle device toolbar” icon next to the selection tool to enable device mode.

In this panel, you can check on different devices if your page is responsive or not. You can turn on portrait or landscape mode, as well as change the width and height according to your preference. You can also enable frame mode to display a device frame by navigating to three dots on the browser page and enabling the Show Device Frame option.

 

  1. Panel “Elements”

Using this panel, you can preview the code changes of any page during development. It allows you to make changes to HTML and CSS code. Let’s say you want to see the size of the “Google” image on the Google homepage. Just right-click it and select the “Inspect” option. On the Elements tab, you can see the HTML corresponding to the selected element on the page. On the right sidebar, on the Styles tab, you can view the CSS for the selected HTML element.

You can edit the HTML and CSS codes to preview them in the browser. If everything is ok, you can permanently make these changes to your webpage. This helps to save time on coding and subsequent testing every time. Learn more about how to view the source code of a web page in Chrome.

 

  1. Console panel

It is a JavaScript console that provides diagnostic log information for the development process. You can write JavaScript commands here. For example, if you want to find the body tag, you can simply type “document.body” and press Enter. You will receive your results.

 

  1. Sources panel

This panel is also known as the debug panel. It’s like a whole code editor where you can write code and save it instead of going from one panel to another. It helps a lot when making changes to a real file, you don’t have to copy paste every time the code is from one place to another.

You can easily map files from the source panel to your project’s source code. The debugging tools on the right allow us to run JavaScript on the page you are working on. It allows you to set breakpoints with which you can easily debug your code.

 

  1. Network panel

The network bar allows you to check the network status of a web page. It will show you many statuses like filename, method, status, type, initiator, and size, uploaded file time, start time and end time for a specific file.

Let’s say you are working on a project and want to test page speed. What you need to do is go to the URL where you want to check the speed. Press CTRL + Shift + I to open developer tools and go to the Networking tab. You won’t see anything right now. But when you refresh the page, you will see the page statistics as shown below. This will help you analyze which element on the page takes a long time to load, and you can work on optimizing the speed.

 

  1. Performance panel

This panel will help you monitor the performance of your web page and show you all loading, scripting, rendering and painting at the end of the write option. Open your webpage where you want to do this and go to the Performance tab in the developer tools.

Now press the record button and start recording, the recording will continue. When this is done, you can check the memory from above. This will give you JavaScript size, number of documents, nodes, etc.

 

  1. Memory panel

This panel does the same as the Performance tab. You can take a snapshot and it will show you all the memory used for that page. You can do this by going to the Memory panel and clicking the Take Snapshot button. This will show you the memory consumed by each object.

 

  1. Application panel

This panel will show you the local storage used by your web page as well as all the uploaded resources in one place. Web SQL databases, cookies, fonts and style sheets will be in place. With this panel, you can debug web applications, manage storage easily, you can also clear the cache, and check and delete cookies.

Go to developer tools, open the “Application” tab. Check local storage, remove or update files from your project. You can also delete all cookies by selecting the “Clear All” option as shown below.

  1. Security panel

This panel will show you how secure your web page is, or if there are any errors, it will let you know. Let’s say you are developing a website and making it secure. But for some reason the SSL certificate is not valid, or there are problems while configuring the SSL. This panel will tell you what to fix and show you the SSL (HTTPS) status or SSL (HTTP) not. In other words, safe or unsafe.

 

  1. Audit Commission

From this panel, you can check performance, web development best practices, SEO, and more. Go to developer tools and go to the Audit tab. Click Run Audit and start auditing on the web page. Chrome will use the Lighthouse extension to audit the web page and, after the audit, will show you the results of the audit performed.

 

Developer tools settings

In addition to the browser settings, which you can access from the menu, there are many special settings available only for the developer tools console. Click the three-dot button in the upper right corner of the developer tools to find many customization options. For example, you can change the position of the dock and disable the cache while developer tools are open.

 

Output

Chrome developer tools help you fix any type of error that occurs on a web page, and also helps developers create responsive and compatible apps that run smoothly on all devices. You can play around and learn the basics of web development by analyzing your favorite web pages.

Leave a Reply

Your email address will not be published. Required fields are marked *.

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>