Web browsers has two sides of usage. One side by general internet users to browse the web and other side by developers to design apps that works. Google Chrome offers builtin tools for developers to analyze the applications and troubleshoot the 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 the developer console consisting of various tools.
These tools help you a lot in fixing most of the issue in development. Developer tools are very helpful in diagnosing the problem quickly and helps gaining speed in application development cycle. Let’s jump on to the sections where you can learn more on how to use developer tools in Chrome browser.
Using Developer Tools in Chrome
1. Inspecting an Element On a Webpage
This does a quick job for us in selecting any element on a webpage very easily. Let us say you want to inspect a section of the page and you are having trouble finding the code of that section. What you can do is to press “CTRL + Shift + I” on your keyboard to open developer tools and click on the little arrow icon as shown below.
Turning on Selection Tool
Now, you can go on any section of the page, it will highlight the element and the corresponding code in the developer tools section.
2. Device Mode
Now, this is something cooler, when you work on any project you need to make sure that your web page looks good on every device. This means you should check your work on every device out there. Chrome gives you a feature where it allows you to see different device modes to check whether your work is responsive or not. Go to the developer tools and hit on this little icon “Toggle device toolbar” next to selection tool to turn on the device mode.
In this panel, you can check on the various devices whether your page is responsive or not. You can turn the portrait or landscape mode and also change the width and height according to your preferences. You can also turn on the frame mode to show the device frame by going to the three dots on the browser page and turn on “Show device frame” option.
Check Responsiveness and Enable Frame Mode
3. Elements Panel
With the help of this panel, you can preview any page’s live code changes when doing development. It allows you to do HTML and CSS code changes. Let us say you want to see the dimension of “Google” image on Google home page. Just right click on it and choose the “Inspect” option. Under “Elements” tab you can see the HTML corresponding to the selected element on the page. On the right side pane, under “Styles” tab, you can view the CSS code of the selected HTML element.
Viewing Code in Developer Tools
You can edit the HTML and CSS codes to see the live preview of it on the browser. If that looks fine you can make those changes to your webpage permanently. This helps to save lot of time on writing codes and then testing each time. Learn more how to view source code of a webpage in Chrome.
4. Console Panel
This is the JavaScript Console that provides log diagnostic information for the development process. Here you can write the JavaScript commands. For example, if you want to search for body tag, you can just type ‘document.body’ and hit enter. You will get your results.
Running Commands in Console
5. Sources Panel
This panel is also known as the debug panel. This is like a whole code editor in which you can write code and save it rather than shifting from one panel to another. This helps a lot while doing the changes on the real file you don’t need to copy paste every time the code from one place to another.
Source Panel in Chrome Developer Tools
You can easily map the files from the source panel to your project source code. The debugging tools on the right hand side allow us to run JavaScript on the page you are working. It allows you to set breakpoints with the help of which you can debug code easily.
6. Network Panel
The network panel allows you to check the network status of a web page. It will show you many statuses like Name of the file, Method, Status, Type, Initiator, Size, Time of the file loaded, Start time and the End time for a particular file.
Let’s say you are working on some project and you want to check the speed of the page. What you need to do is to go to the URL on which you want to check the speed. Press “CTRL + Shift + I” to open developer tools and go to “Network” tab. Right now, you won’t see anything. But when you refresh the page you will see the statistics of the page as shown below. This will help you to analyze which element on the page is taking long time to load and you can work on optimizing the speed.
Network Status in Chrome Developer Tools
7. Performance Panel
This panel will be helping you in monitoring the performance of your web page and it will show you the whole loading, scripting, rendering and painting things at the end of a recording option. Open your web page on which you want to perform this and go the “Performance” tab in developer tools.
Now, click on the recording button and start recording, this will keep on recording. When it’s done you can check on memory from the top. It will give you the JavaScript size, number of documents, nodes, etc.
Performance Results in Chrome Developer Tools
8. Memory Panel
This panel pretty much does the same thing as of performance tab. You can take a snapshot and it shows you all of the memory used for that page. You can do this by going to the “Memory” panel and press “Take a snapshot” button. This will show you the memory consumed by each object.
9. Application Panel
This panel will show you the local storage that has been used by your web page, it will show you all the loaded resources at one place. Web SQL databases, cookies, fonts and stylesheets will be altogether just in on place. With the help of this panel, you can debug web applications, easily manage storage, clearing cache can be also done and inspecting and deleting the cookies is also the part of it.
Go to the developer tools, open “Application” tab. Check the local storage, delete or refresh files from your project. You can also clear all cookies by selecting the “Clear All” option as shown below.
Local Storage of Application
10. Security Panel
This panel will show you how secure you web page is, or if there are any errors it will let you know. Let’s say you are developing a website and making the site secure. But due to some reason the SSL certificate is not valid, or there are some issues while configuring SSL. This panel will let you know what need to be fixed and show you the status of the SSL (HTTPS) or not SSL (HTTP). In other words, secure or not secure.
Security Panel in Chrome Developer Tools
11. Audit Panel
From this panel, you can check the performance, best practices to follow for web development, SEO, etc. Go to the developer tools and visit “Audit” tab. Click on “Perform an audit” and run the audit on the webpage. Chrome will use the lighthouse extension for auditing the webpage and after the auditing, it will show you the results of the auditing performed.
Lighthouse Audit Running in Chrome
Developer Tools Settings
Besides the browser settings that you can access from the menu, there are many special settings available only for developer tools console. Click on the three dots button on the top right corner of the developer tools to find many customizing options. For example, you can change the position of the dock and disabling the cache while developer tools is open.
Customizing Developer Tools Console in Chrome
Conclusion
Developer tools in Chrome allows you to troubleshoot any type of errors that occur on webpage it also helps developers to build a responsive and compatible applications that runs smoothly on all devices. You can play around and learn the basics of web development by analyzing your favorite webpages.