Chrome DevTools — Tools for Web Developers
Author: Nirmal Nambiar
Introduction
Chrome is a robust and powerful web browser that strives to provide developers with a great experience by providing developers with a handy array of tools to help edit pages, debug and also give them access to the internal working of the web browser and web apps; thus giving a considerable boost in productivity and easy diagnosis of the website.
This article aims to give a synopsis of different features provided by Chrome DevTools and their usage.
Accessing the developer tools
There are three ways to access the tools:
- Go to the top right corner, click on Customize chrome -> More tools -> Developer tools.
- Press Control + Shift + C (Windows, Linux, Chrome OS) or Command + Option + C (Mac)
- Right click on an element in the website and select Inspect.
The DevTools in Chrome have a lot of panels that grant us a wide range of functionalities, so buckle up for an introduction to the features of DevTools.
Mobile & Desktop View
This helps us alternate between the desktop mode and device emulation mode of the website. By default the view of the website in Chrome DevTools is desktop mode. It shows how responsive the website is.
Now we can also choose a particular mobile device on which we wish to view the website.
Device mode view of https://developers.google.com/web/tools/chrome-devtools
We can preview the page at different network speeds and view how the page would load for different network speeds and CPU power presets.
Device mode view of https://developers.google.com/web/tools/chrome-devtools
Elements : Debug CSS and HTML to solve layout issues
The ‘Elements’ panel contains a real-time, interactive DOM (Document Object Model). Often a need to change and view the DOM and Chrome DevTools gives us the opportunity to modify elements on the page so that you can see the changes in real-time.
The left panel displays the rendered HTML and how elements are embedded in the DOM tree.
Elements panel in developer tools helps in:
➔ Checking the HTML and DOM position of an element rendered on screen.
➔ Viewing the whole DOM structure and HTML of a webpage
➔ Editing HTML/CSS, so that you can see the changes in a real-time mode.This is helpful in making minor tweaks to the design and testing prototype changes.
Event listeners attached to the element and the style can be viewed on the Style and Event listeners tab on the Elements panel. One can view the position of the element by right clicking on the desired element in a page and selecting inspect element. This will open the elements panel with the desired element’s HTML highlighted. It is also possible to hover over the element to see its padding and margin.
Console : Logging diagnostic information
The console panel provides an experimental playground for one to view logged messages and run JavaScript.
Console panel allows you to enter commands so that you can interact with the webpage. It also works as a logger for all kinds of errors and shows them all in one place with the line number in source code where the error occurred which could help you with debugging. In addition, it can also format your elements and style outputs, count statements, measure the time of execution or loading, set breakpoints, monitor events, stack messages, evaluate expressions and much more. This is a dynamic tool that you will be using very often.
Sources : Debug the JS
Most frequently used panel which is used to analyze, edit and debug JS and CSS of a website, view files, put up a workspace so that changes made in DevTools get saved to the source code file in your system, create and save Snippets of JavaScript( small piece of re-usable source code).
Using the Page pane one can view all of the resources that the page has loaded.These minified files can be viewed by clicking on it and the file opens up in the Editor pane and can be edited there.
By default, on editing a file in the Sources panel, those changes are lost on reloading the page. Workspaces enable you to save the changes that you make in DevTools to your source code file .
Network : Optimize page load performance
This panel can be used for monitoring any kind of requests ( upload or download ) made by a webpage. The Network panel logs all network activity in the Network Log. It can be viewed on opening the network panel and then reloading the webpage.
Each row of the Network Log represents a resource; by default the resources are listed chronologically. The top resource is usually the main HTML document. The bottom resource is whatever was requested last.
● Status- The HTTP response code.
● Type- The resource type.
● Initiator- What caused a resource to be requested.
● Time- How long the request took.
● Waterfall- A graphical representation of the different stages of the request. Hover over a Waterfall to view a further breakdown.
Other features include:
● Simulation of a slower network connection ( Speed throttling to test website on 3G/4G or slower connections )
● Offline working
● Inspect a resource’s details
● Block requests (view how a page looks and behaves when some of its resources have not loaded in)
Performance : Improve runtime performance
In this panel we can try to optimize the website loading speed and analyze the run time performance of the web page.
On clicking Capture Settings, DevTools reveals capture performance metrics settings. For CPU, select 2x slowdown; by doing this DevTools throttles your CPU so that it’s 2 times slower than normal to simulate how our website performs on a mobile device. Starting the recording using the Record or Ctrl + E button will start profiling of the website’s various events during this period. After a few seconds, click Stop. This will show the results and timings of each event.
Analyze all the charts to understand which part/parts of the website is/are causing degradation of performance. Hovering over each of the charts will reveal the screenshot of the page at that moment.
Whenever you see a red bar above the FPS chart, it means that the framerate dropped so low that it’s probably hindering the user experience; the higher is the green bar, the higher the FPS is.
If the CPU chart is full of color that means the CPU was maxed out while recording. Whenever the CPU is maxed out for long periods, it’s always a good idea to find ways to make it do less work.
Memory : Track down memory leaks
It displays the profile memory usage the page is currently using with the Chrome Task Manager.We can track down issues that affect the page performance, for example, memory leaks and bloats. If a site is progressively using more and more memory, it provides a consistently bad experience.
The Memory panel provides profiling in three different ways:
● Heap Snapshot: This can be used to take a snapshot of the heap which shows memory distribution among website’s JavaScript objects and DOM nodes.
● Record Allocation Timeline: This recording helps in tracking down memory leaks in a website’s JS heap.
● Record Allocation Profiles: This shows memory allocations from your JavaScript functions. Similar to timeline, you can record the profile with actions you want to investigate.
Application : Inspect 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.
Following tasks can be performed using the Application panel:
- Web app’s manifest can be inspected and triggered using the Manifest pane.
- Service Workers pane — can be used to perform service worker related tasks like unregistering, stopping, going offline and more.
- Service worker cache can be inspected using the Cache Storage pane.
- Clear Storage — can be used to inspect and clear all of the storage, caches and service workers.
- Frames pane — can be used to organize resources using various filters.
- Inspect and edit various storage and databases.
- Execute statements on a Web SQL database.
Security : Test Security Measures
This panel allows you to test your website for common security measures. The Security Panel makes sure HTTPS is properly implemented on a page. We can also view the SSL (Secure Sockets Layer) certificate issued to the web page. It certifies the authenticity of the page. Just open the developer tools, select the security panel and reload your website to get an analysis.
Audits : Test for Best Practices
This panel is used to identify common problems and issues that affect a website’s page load performance, accessibility and user experience and hence helps improve it. Lighthouse is an open-source, automated tool for improving the quality of web pages; this is what powers the Audits panel. The usual inspection involves checking of standards for Progressive Web App, performance, best practices and accessibility concerns.
I hope this is an adequate introduction to Chrome DevTools and if this article inspires you to dive deeper and explore further about DevTools you can go ahead and visit https://developers.google.com/web/tools/chrome-devtools for more information.
Author: Nirmal Nambiar
