With the advent of modern frameworks, ES6 and the increasing risk of security every day, knowing how to use Chrome developer tools can give you a major boost in productivity and help in the easy diagnosis of a website’s performance. This article aims to give an overview of different features available in Chrome developer tools and their usage. Most of the content of the article can be extrapolated to Mozilla Firefox and Microsoft Edge developer tools. We will divide the article into sections on the basis of various panels available in Chrome developer tools of Google Chrome version 62.
For opening Chrome developer tools in Google Chrome, do one of the following:
Go to the top right corner, click on Customize chrome (three vertical dots) -> More tools -> Developer tools.
Press ‘Ctrl + Shift + I’ (Windows, Linux) or ‘Command + Option + I’ (Mac)
Right click on an element in website and select Inspect.
Now, we will dive into each of the devtools panels one by one.
Elements - Freely iterate the layout of your site
Often a need to change and view the DOM (Document Object Model) structure of a webpage arises while development. Elements panel in developer tools helps in:
Inspecting a part of webpage for its DOM content
Viewing whole DOM structure and HTML of a webpage
Editing HTML/CSS, viewing applied and final computed styles. This is quite important while making small iterations in design and testing prototype changes.
In the left pane, we can see the rendered HTML and how elements are nested in DOM tree. These elements can be edited to observe real-time simultaneous changes to the webpage. The right pane of elements panel can be used to see styles applied to an HTML element which can be enabled/disabled selectively to see a particular style’s effect. We can also see final computed styles after cascading and applying styles in Computed section. Event listeners attached to the element can also be seen in the right panel. Most common use-case of elements panel is to check HTML and DOM position of an element rendered on screen. This can be done by pressing right click on the desired element in a web-page and selecting inspect element. This will pop up elements panel with the desired element’s HTML highlighted. It also possible to hover over the HTML of an element to see its margin and padding which are green and orange respectively. Check bottom section of styles panel for more information.
Bonus tip: It is possible to check applied CSS for various states of an element by selecting ‘:hov’ option in styles panel.
Device Toolbar - Check your website’s responsiveness
For building responsive websites, Chrome developer tools have ‘Toggle device toolbar’ (in top left corner) option which can be used to view the website in different resolution. It also has specific viewports for mobile devices such as iPhone, iPad, and Nexus.
Sources - Debug your JS
The code can also be directly edited through source panel.
Enable breakpoint on any error.
Check call stack
Add various types of breakpoints like event listener breakpoints (such as click) or DOM breakpoints (such as modification of tree).
Audits - Test for best practices
This panel can be used to identify common problems and issues that affect a website’s performance, accessibility and user experience. Audits use Google’s lighthouse project as a backend. The usual checks involve checking of standards for Progressive Web App, performance metrics, best practices and accessibility concerns. Just go to the panel and run an audit with desired options to get results.
Network - Optimize page load performance and debug request issues
This panel can be used for monitoring any kind of requests made by a website. Response body and headers along with request parameters and headers are logged for each request. Network requests can be filtered either by type or domain. This panel would be the first place to go to while diagnosing a failed request. The failed requests are shown red in color with the respective HTTP status code shown with it. In case of a POST request, form data sent with the request can also be seen.
Other panels present are:
Cookies, which can be used to check cookies sent with the request and set by the response, and
Timing, which shows time-wise stats for the request and can be used for performance diagnosis.
Other features include:
Speed throttling to test website on 3G/4G or slower connections
Capture screenshot for taking image of what is visible in viewport for the website.
Cache disable for all requests from network panel.
Bonus tip: Right click on a network request of interest and select one of the options to copy the request. Most frequently used option is copy as cURL which you can use to get cURL equivalent of the request and replay it in terminal.
Application - Inspect your website’s resources
This panel is used to manage various resources loaded by the website. This includes cookies, local storage, application cache, images, fonts, stylesheets, registered service workers, session storage, Web SQL databases and IndexedDB. Values of these resources can be checked, set or cleared through this panel. It also shows how much storage is used by all of this data combined and individually. Following tasks can be done easily using Application panel:
Web app’s manifest can be inspected and triggered using Manifest pane.
Service Workers pane can be used to perform service worker related tasks like unregistering, stopping, going offline etc.
Service workers cache can be viewed using Cache Storage pane.
Clear Storage can be used to clear all of the storage, caches and service workers.
Frames pane can be used to organize resources by various filters.
View and edit various storage and databases.
Execute statements on a Web SQL database.
Memory - Track down memory leaks
Using this panel, we can find issues that affect the page performance in most common scenarios which including memory leaks and bloats. The Memory panel provides profiling of three different types:
Record Allocation Timeline: This recording helps in tracking down memory leaks in website’s JS heap. Start the recording, perform the action which you suspect of the memory leak, then press stop recording. Blue bars in the recordings represent new memory allocations. These are possible candidates for memory leaks and can be zoomed in to filter the constructor pane and then a particular object can be viewed in object pane.
Performance - Improve runtime performance of your page
Bonus tip: You can enable FPS meter by pressing ‘Command + Shift + P’ (Mac) or ‘Control + Shift + P’ (Windows, Linux), typing Rendering and selecting Show Rendering. In Rendering tab, enable FPS meter to show an overlay on top right of your screen which shows FPS.
Security - Inspect common security problems
This relatively new panel allows you to test your website for most common security measures. All of the origins of different resources are tested for valid SSL certificates, secure connection, secure resources and other things. Origins are further filtered into different categories based on non-secure/secure which allows easy tracking of issues. Just open up the developer tools, select this panel and reload your website to get an analysis. In future, more security tools may be added to this panel.
Console - Log diagnostic information
Chrome developer tools can be easily extended to create extensions for different purposes, which can then be added as new panels. For e.g. popular devtools extension include extension for AngularJS, React. See this article by Google developers’ website on extending devtools for more information.
Credits: Some of the images were taken from Google Developers’ Website on Chrome DevTools which are licensed under Creative Commons Attribution 3.0 License.
Leave a Reply
Your email address will not be published. Required fields are marked *