"Understand DevTools and how to use them for manual exploratory testing."
Motivation
The web development and debugging tools embedded in modern browsers are indispensable tools that empower developers and quality assurance professionals. In this article, we'll explore the generic features in the DevTools browser and how they can be effectively used in manual exploratory testing.
Bugs in a browser are problems that must only be submitted if the test instructions state it because they are unrelated to the customer's product, and they cannot fix them, as mentioned here.
Getting Started with DevTools
To embark on your journey with browser DevTools, there are three ways:
Use hotkeys
Cmd + Option + I(macOS) orCtrl + Shift + I(Windows or Linux)Right-click any element on the web page and select "Inspect"
Click the "F12" button
These steps open the DevTools panel, which displays a variety of tabs and features designed to help you with all aspects of web development and testing.
The DevTools Arsenal
1. General Overview of the Browser DevTools
Developer Tools is a default tool in Google Chrome and other browsers intended for developers and testers to debug code. With its help, testers can view the page code, logs, page loading, display in different resolutions, code errors and much more. In this section, you can set up DevTools and use some tools.
Example: Testing and simulating mobile devices in Chrome DevTools
2. Elements Tab: Unraveling the DOM
The ❝Elements❞ tab is your gateway to the Document Object Model (DOM). Here, you can inspect, modify, and navigate through the HTML and CSS of a web page. Identify elements, experiment with styles, and understand the page structure effortlessly.
Example: Easily locate and inspect an element by right-clicking and selecting "Inspect."
3. Console Tab: JavaScript Interaction
The ❝Console❞ tab is your JavaScript playground. Execute JavaScript commands, log messages, and interact with the page in real-time. This is invaluable for debugging, experimenting with scripts, and gaining insights into the behaviour of your web application.
Example: Use console.log() to output messages or variables directly to the console.
4. Sources Tab: Dive into JavaScript Code
For a deeper understanding of your JavaScript code, head to the ❝Sources❞ tab. Set breakpoints, step through code execution, and debug efficiently. This is a must-have for unravelling complex logic and identifying bugs.
Example: Set breakpoints by clicking on line numbers and step through code execution.
5. Network Tab: Tracking Requests and Responses
The ❝Network❞ tab provides a comprehensive overview of network activity, showcasing all requests and responses between the browser and the server. This is essential for identifying bottlenecks, analyzing performance, and ensuring smooth data flow.
Example: Analyze details like headers, response, and timing for each network request. Read the full article about this section.
6. Performance Tab: Optimize Page Speed
Optimizing web page performance becomes a breeze with the ❝Performance❞ tab. Record and analyze the timeline of events, identify resource-heavy tasks, and pinpoint areas for improvement.
Example: Capture performance data and analyze the timeline to identify bottlenecks.
Performance bugs are usually Out Of Scope during exploratory testing.
7. Application Tab: Manage Resources
The ❝Application❞ tab is your hub for managing web page resources, including local storage, session storage, and cookies. Explore and manipulate data to test how your application responds to different scenarios.
Example: Use the "Application" tab to manage and modify Local Storage data.
8. Security Tab: Ensure a Secure Environment
For a security-conscious approach, the ❝Security❞ tab is indispensable. Review SSL certificate details, identify potential security issues, and take proactive measures to ensure a secure browsing experience.
Example: Inspect SSL certificate information to ensure a secure connection.
Test IO does not perform security testing, so please don't submit these bugs.
A Versatile Companion in Testing
Browser DevTools are not just for developers; they are a versatile companion for quality assurance professionals engaged in manual exploratory testing. Whether you're dissecting the DOM, debugging JavaScript, analyzing network activity, or optimizing performance, DevTools provide the insights and tools you need for effective testing. Embrace the power of DevTools and elevate your manual testing game to new heights. Happy testing!