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.
Introducing "Ask AI" in DevTools: Your Smart Assistant for Testing
Beyond the above core features, the Chrome browser DevTools is constantly evolving, and one of its newest and most exciting additions is ❝Ask AI.❞ Imagine having a smart assistant right there in your browser, ready to help you understand tricky situations or even suggest solutions while you're testing.
For testers, especially those who might not have a deep background in IT, ❝Ask AI❞ can be an absolute game-changer. When you encounter unexpected behavior on a website, an error message you don't understand, or even just want to know why something looks a certain way, ❝Ask AI❞ can provide immediate insights. It's like having a senior team leader or a developer on call, giving you quick explanations and guidance.
How can "Ask AI" help you in your daily testing?
Understanding Error Messages: Sometimes, a website will display a technical error message that looks like a jumble of code. Instead of being confused, you can often highlight the error in DevTools, and ❝Ask AI❞ can explain in plain language what it means and why it might be happening.
Deciphering Unexpected Behavior: If a button isn't working as expected, or a page isn't loading correctly, you can often get clues from the "Console" or "Network" tabs in DevTools. If you see something unusual, you can ask ❝Ask AI❞ to interpret it for you. For example, you might see a "403 Forbidden Access" error in the Network tab for an image. You could ask ❝Ask AI❞: "What does a '403 Forbidden Access' error on a page mean?" and it would explain that the server has blocked your location from accessing it.
Getting Suggestions for Reporting Bugs: While you'll still provide your detailed steps and observations, ❝Ask AI❞ might help you pinpoint the technical root of a problem, which can make your bug reports even more precise.
