Chrome DevTools Introduction
Chrome Developer Tools is a set of web development and web authoring tools provided by the Google Chrome browser. They allow web developers to test and debug their applications. Also it provides access to the internals of the browser and their application.
These DevTools come in a dynamic interface. The various panels give access to different functions, which allow you to get an extensive overview of how your web application is performing and even develop it inside the browser.
What Can Chrome DevTools Do?
There are multiple functions in particular it provides. As a result, it is a dynamic and powerful tool for web development.
Using the Chrome Developer Tools you can:
- Inspect and modify the DOM layout and elements, as well as the CSS
- Watch the rendering and network performance, allowing you to see how you can optimize your application further
- Access many other internal aspects of the web applications you develop!
Chrome DevTools Introduction Interface
Firstly, to access the Chrome Developer Tools interface, you have a few options.
It can be done by:
- Right-clicking a page element and selecting Inspect (this will also select the element you clicked in the DOM interface)
- Pressing the Command+Option+I keys for Mac OS or Control+Shift+I for Windows and Linux
- Selecting the Chrome main menu and navigating towards More Tools > Developer Tools
From there on you have access to multiple panels. Here is a list of what they do, in short:
- Device mode - allows you to view the web page or application as it would appear on a mobile device
- Elements - allows you to view and modify the DOM elements and their CSS
- Network - debugs request issues and allows you to optimize the page load performance
- Performance (prev. Timeline) - lets you inspect the runtime performance by recording the events that occur during the life cycle of a site
- Memory (prev. Profiles) - track the profile memory use and leaks
- Application - allows you to inspect the resources that have been loaded
- Security - debugs certificate problems, mixed content issues and others
The following tutorials will go into more detail about the DevTools interface.