Developer Tools is a default tool in Google Chrome and other browsers intended for developers and testers to debug code. With its help, the tester can view the page code, logs, page loading, display in different resolutions, code errors and much more. In this section, you will understand DevTools and how to customise it.
The primary tabs of DevTools (Elements, Console, Sources, Network, Application) are covered in other articles. Still, this article will give a general overview and introduce some useful tools for testing websites.
Setting up browser DevTools
DevTools settings let you control the behaviour of individual panels and DevTools in general. Click the Settings button in the action bar at the top to Open Settings.
For example, you can choose the DevTools language.
With the Console open, you can also access the Command Menu, a faster alternative to many settings. In particular, if you remember the name of the settings or even their value but don't remember where the setting is,
Press Ctrl+Shift+P (Windows/Linux/Firefox/Edge) or Cmd+Shift+P (macOS). You can start typing the setting's name or value, select a suggested option, and press Enter.
You can change DevTools placement. By default, DevTools is docked to the right of your viewport. You can also dock to the bottom or left sides or undock DevTools into a separate window.
Simulate Responsiveness with Device Mode
You can click the Toggle Device Toolbar to open the UI to simulate a mobile device viewport. Here, you can select a specific mobile device from the ❝Dimensions❞ list, edit and add a custom mobile device, rotate it and perform other actions.
Important: You must understand this is a device emulator, and we only test on real devices; however, using this tool to understand website designs, specifically responsiveness, will help you report valid bugs and report better.
Shortcuts in DevTools
Settings > Shortcuts lists default shortcuts you can use while focused in DevTools to speed up your workflow. You can customise your keyboard shortcuts.
