What is Developer Tools?
Developer Tools (DevTools) is a set of web developer tools, which are built within the web browser. Despite its name, DevTools isn’t just a tool for developers. DevTools contains many features that can greatly assist in the day-to-day testing of web applications.
DevTools can help you edit pages on the fly, run audits on your web applications, test client-side validation and diagnose problems quickly, which ultimately can help you build better websites, faster.
DevTools can help you edit pages on the fly, run audits on your web applications, test client-side validation and diagnose problems quickly, which ultimately can help you build better websites, faster.
Accessing DevTools
DevTools are available in different web browsers, and they can be accessed in multiple ways. Since shortcuts and methods may vary across browsers and devices, it’s best to search for "how to open DevTools" in your specific browser to find the most up-to-date instructions.
Key DevTools panels
DevTools consists of multiple panels that provide different functionalities across browsers. The following panels are available in Chrome DevTools and have equivalents in Firefox and Safari, though some may have different names or be organised differently:
- Elements panel: Displays the HTML structure of the page and allows real-time modifications. (Firefox: Inspector, Safari: Elements tab)
- Console panel: Logs messages, errors, and debugging information. (Same across Chrome, Firefox, and Safari)
- Sources panel: Shows JavaScript files and allows setting breakpoints for debugging. (Firefox: debugger, Safari: Sources tab)
- Network panel: Monitors HTTP requests, responses, and loaded resources. (Same across Chrome, Firefox, and Safari)
An example of how Chrome DevTools can help
One way DevTools can assist is by debugging issues within a web application. For example, suppose a user adds an item to their shopping basket and selects standard shipping. The expected total should include the item price and the shipping cost. However, instead of displaying the correct sum, the total shows an unexpected value.
By using DevTools, testers can inspect what happens when the shipping option is selected. They might start by checking the JavaScript function handling the calculation, then navigate to the Sources panel to review the script and set a breakpoint. When selecting the shipping option again, DevTools pauses execution at the designated line, allowing testers to inspect the subtotal and shipping cost values. By identifying the problem in the Console panel and adjusting the operation, testers can confirm the correct calculation.
By using DevTools, testers can inspect what happens when the shipping option is selected. They might start by checking the JavaScript function handling the calculation, then navigate to the Sources panel to review the script and set a breakpoint. When selecting the shipping option again, DevTools pauses execution at the designated line, allowing testers to inspect the subtotal and shipping cost values. By identifying the problem in the Console panel and adjusting the operation, testers can confirm the correct calculation.
