Today we'll take a look at Chrome Developer Tools, find out what's inside them, and learn the basics of using their broad capabilities. DevTools has become a swiss knife for web developers allowing them to do many things right in the browser: from looking at the styles of a certain element to tracking the performance metrics. In this topic, we'll give an overview of its main panels.
Getting started
Chrome DevTools is a set of useful tools for web developers, built into the Chrome browser. There are multiple ways to open it:
Open the browser menu → select More Tools → select Developer Tools.
Right-click an element on the webpage → select Inspect.
Use the keyboard shortcut Ctrl + Shift + I (on Windows or Linux) or Cmd + Opt + I (on Mac).
Press F12.
To change the language you should go to Settings → Preferences → Appearance → Language, and then reload the DevTools.
To select the placement of the panel relative to the page, you need to go to Customize and control → Dock side.
Device mode
Device mode allows you to see what the webpage looks like on devices with different viewports. To open it, click on the Toggle Device Toolbar icon in the left corner.
To set the width and height of the viewport you can write the dimensions in the input fields or just pull the edges of the current window. Also, you can select the Responsive mode and click on the top bar to choose one of the common screen sizes: Mobile, Tablet, Laptop, or 4K. To pick a particular device (iPhone, Samsung, iPad, etc.) you should select one from the options in the Dimensions tab. Also, you can adjust the zoom level and rotate the viewport.
Elements panel
The first tab in the navbar is the Elements panel, which is used to inspect and edit HTML elements on the page. On the left side of the panel, the DOM is shown. Here you can see all the nodes with their tags and attributes. On another side of the tab, you can view the styles. To start inspecting the page, click on the cursor icon. Then hover your cursor over any element, and you'll see its selector, width and height, its basic styles, and other useful data.
When you select an element, it is highlighted both on the page and in the DOM. If you want to edit a certain element, double click on it in the DOM or right-click it and select Edit as HTML.
All the editing in the Elements panel only affects your local version of the page. If you reload it, the webpage will get back to its initial state.
On the Styles tab, you can see all the styles applied to the selected element. Simply click on the CSS code to edit it or add your styles. Also, scroll down the section to view the box model of the element.
Console and sources panels
The Console panel allows you to view errors, warnings, and information messages, as well as run JavaScript code in it.
The Sources panel shows the source code for the webpage. Also, there are various debugging tools on the right side of the tab.
For more detailed information about working in the Console and Sources panels, check out our special topic JS Debugging.
Network and performance panels
On the Network panel, you can view the network activity on the webpage. For example, if you reload the page, the panel will display all the loaded resources in chronological order. Also, for each resource, there is information about its name and type, HTTP code, the cause of the request, its size, and loading time. If you click on the particular resource, you can preview it or look at the more detailed data. A round button on the top left corner starts the recording of the network log. Also, there are tools for filtering and searching the logs.
Using the Performance panel, you can record the performance metrics while the webpage is running. After all the recorded data is processed, it is displayed on various charts. Also, you can view the screenshots of the page when it was recorded.
Memory and application panels
The Memory panel is used to search for problems related to inefficient memory usage that might affect the performance of a web page. To start inspecting it, press the button to take a snapshot and view the memory distribution at a particular moment.
The Application panel allows you to view, edit, and delete service files stored on a user's computer (such as cookies) and inspect other loaded resources.
Security and audits panels
To inspect the security of the webpage, look at the Security panel. There you can see if the page and its requested resources use a secure HTTPS connection.
Lighthouse (or Audits) panel allows you to audit the webpage for performance, accessibility, user experience, and other issues using common metrics. To run an audit, select the necessary categories and the device and click on the Generate report button.
After the report is ready, you can view the scores for metrics categories and opportunities for improvement.
Conclusion
In this topic, we've had an overview of the common cases when a web developer should use the Chrome DevTools. We've learned how to view the page on different devices and inspect the DOM nodes. Also, we've looked at the browser console for messages and opened the source files. What is more, now we know how to analyze network requests and the performance of the webpage. We've viewed the memory distribution and the application storage, checked the secured connection, and generated a report with the webpage metrics.
It's worth mentioning that there are even more tasks that you can solve with the DevTools. Just keep using it, and you'll find out!