DevTools are inherent in every web app developer’s and tester’s equipment. They enable website analysis, debugging, and software optimization in real-time.
Get to know the essential DevTools available in popular web browsers and learn how to use them for UI testing.
What are DevTools?
DevTools are irreplaceable during user interface testing. They allow us to deliver better and more efficient products. Where can you find them? You can do it in three ways.
In Safari, you first need to enable the display of DevTools. How? Click the Safari tab in the top bar with options, then select Preferences and Advanced tab. At the bottom, there’s a “Show develop menu in the menu bar” option that needs to be checked.
No. 1 Use keyboard shortcuts.
- Devices with macOS: alt + command + l
- Devices with Windows or Linux: Ctrl + Shift + l
Source: Safari browser
No. 2 Go to your browser’s options, click the More tools tab, and then DevTools.
Source: DevTools in Google Chrome browser.
No. 3 Right-click anywhere on a browser where the app is displayed. Next, choose Inspect, and you’ll see DevTools on the right.
Benefits of using DevTools during web app testing
DevTools gives us more control over the tested app. They also make it easier to identify and solve issues, enabling us to improve the software.
We can differentiate some key benefits that come with using DevTools:
- Efficient UI testing – DevTools allow us to thoroughly inspect the UI structure and app’s behavior during user interactions.
- Faster error identification – testers can use DevTools to quickly find and report problems, which makes the testing process faster.
- A better understanding of how the app performs – thanks to DevTools, testers can better understand how the app works from the technical perspective, which facilitates creating effective user scenarios.
- Monitoring the performance – DevTools enable checking the app’s performance and identification of areas that require optimization.
- Support for automatic tests – DevTools often offer features that support test automation and can speed up testing.
- Analysis of compatibility/accordance with requirements – you can use DevTools to check if the app meets specific requirements regarding efficiency, accessibility, and compatibility with browsers.
- Solving problems in the production environment – DevTools enable testers to quickly identify and solve problems that may appear after the app’s launch.
- Optimization of manual tests – testers can use DevTools to check UI elements, which can speed up and facilitate manual testing.
Popular DevTools
Below, I present some important DevTools that I use regularly during web app UI testing. They are all available in Safari, Google Chrome, Mozilla Firefox, Microsoft Edge, and Opera browsers.
Tools for optimization
- Performance
Example of usage: A tester can use this tool to measure the website’s performance and evaluate various components’ loading and rendering time. This way, they can check how long it takes to load the homepage or interact with a form. If loading is too slow, the tester can report it as a problem that requires optimization. - Memory
Example of usage: A manual tester can monitor the browser’s memory usage during various app scenarios. For example, after completing specific actions, the tester can check whether the app releases memory correctly. If memory usage continuously increases, maybe there’s a leak that should be fixed.
Tools for debugging
- JavaScript Debugger
Example of usage: During interactive feature testing on the website, the tester can use the JavaScript debugger to track what events are called out as a response to user interactions. This helps find errors in the app’s logic. How can you start the debugger mode? Open Devtools and go to the Sources tab. On the right, you’ll find a drop-down list and the Breakpoints tab. Check the “Pause on caught exceptions” option and refresh the website. Scripts will open in the debugger mode.
Source: Google Chrome DevTools
- Elements
Example of usage: When testing UI responsiveness, the tester can inspect Elements to check how specific elements are rendered on different devices and with different resolutions. This can help identify problems with layouts and CSS styles.
Tools for performance analysis
- Network
Example of usage: When testing features related to network communication, manual testers can use network tools to monitor HTTP/HTTPS requests sent by the app. This helps identify communication errors, such as incorrect requests or wrong server responses. - Console
Example of usage: To test user interactions, you can use the JavaScript console to display diagnostic notifications and issues. It should help you find problems with interactions, such as JavaScript malfunctions or validation errors regarding the user’s data input. - Application
Example of usage: To test how efficient the website’s loading is, you can use tools to manage the resources. This way, they can check which resources are loading and how they impact the website’s loading time. It can help identify redundant resources or problems with their loading. In the Application tab, you’ll see many sections, such as “Frames”, “Storage”, “Cache Storage”, etc. which include various info about the resources used by the website. - Storage
Example of usage: To test features related to data storage, such as logging in to an app or app preferences, a manual tester can use tools to manage stored data to check if they are saved and read properly. - Lighthouse
Example of usage: To test the quality of the app and its compliance with various standards, testers can use the Lighthouse tool to check if the app meets specific requirements regarding accessibility, efficacy, SEO, and other aspects.
Source: Google Chrome DevTools
- More tools
Example of usage: Manual testers can use DevTools’ extensions to implement additional features. This way, they gain new opportunities that facilitate the testing process and app analysis.
Thanks to these specific examples of using tools for developers, manual testers can better understand how to take advantage of some DevTools elements when testing the UI of web apps.
Is the brand of the browser important?
No matter what browsers you use, DevTools will look almost the same. Why? There are a few reasons.
- Conformance with standards — browser designers try to follow specific standards regarding UI layout. Many DevTools features and solutions rely on commonly accepted patterns, which is why they look so similar.
- Availability of elementary features — basic features, such as Elements, JavaScript Debugger, or tools for network analysis, are necessary for effective code debugging and optimizing web apps.
- Innovation — when one browser introduces innovative features or improvements to DevTools, others can quickly adapt and implement them. As a result, we can find similar tools in many different browsers.
- User feedback — many designers working for browsers often listen to what the development community suggests. If some features are popular or desired by users, they appear in other browsers as well.
Although DevTools look similar in different browsers, each can offer unique features and possibilities dedicated to a specific usage or user preference.
Despite their name, DevTools aren’t dedicated solely to developers. Manual testers can also use them to improve their work and check web apps more thoroughly. DevTools offers a rich set of functionalities for analysis, debugging, and app optimization in real time. Browsers’ DevTools are just some of the popular tools worth knowing that come in handy when working on web apps.
