Quality Assurance Engineers ensure web applications meet required standards before public release. One key tool in their arsenal is the browser’s Developer Tools (DevTools). This suite of utilities provides them with the necessary resources to inspect, debug, and optimize web applications effectively.
Continue reading to learn how to use them to support web app quality assurance tasks.
What is DevTools?
DevTools is a web development toolkit that provides a powerful way to inspect and debug web applications. It helps engineers facilitate efficient testing by checking elements, monitoring network activity, and analyzing console logs, making the toolkit invaluable for testing purposes.
DevTools in different browsers.
Here is how to open DevTools in different browsers:
- Chrome
- Press the F12 button or the shortcut Ctrl+Shift+I for Windows/Linux
- Click Option + ⌘ + J for MacOS.
- The third way, click More Tools > Developer Tools.
- Edge
- Press the F12 button or the shortcut Ctrl+Shift+I for Windows/Linux.
- Click Command + Option + J for MacOS.
- The third way, click More Tools > Developer Tools.
- Firefox
- Press the F12 button or the shortcut Ctrl+Shift+I for Windows/Linux.
- Press Command + Option + J for MacOS.
- The third way, press Tools > Web Developer > Web Developer Tools.
- Opera
- Click the F12 button or the shortcut Ctrl+Shift+I for Windows/Linux.
- Click Command + Option + J for MacOS.
Opera
In Opera, DevTools can also be opened by clicking the icon in the upper-left corner and selecting ‘Developer. ‘ From there, select ‘Developer Tools’ to launch the tools in your preferred view. Once you’ve opened developer tools, you’ll see a range of panels and options that allow you to inspect and control your web pages.
Safari
To enable Safari Developer Tools, open Safari and go to Preferences in the browser. Then click on Advanced. After that, check the Show Develop menu in the menu bar box. The Safari developer tools will become available from the Develop menu in the menu bar.
The dev tools can also be opened through the element inspector by right-clicking and clicking the Inspect (or Inspect Element in Safari) button.
How the element inspector is used?
A web inspector assists in identifying and locating elements within a web page in a browser. With the web inspector, QA engineers can explore the browser’s code to observe sudden changes on the screen. The inspector displays the web page’s CSS, HTML, and JavaScript, enabling developers or testers to analyze the web page and utilize the features of browser developer tools to perform various checks.
For example, a QA engineer can compare the web page design with the mock-ups in detail, ensuring the current design meets all the requirements.
By clicking the Element Inspector button and selecting the needed UI element on the page, the QA engineer can see the web element’s location in the HTML structure, styles applied to the selected element, size, margins, paddings, etc.
Also, a QA engineer can override the HTML or CSS if needed. For instance, if the eternal spinner blocks the engineer from testing some functionality, the engineer can simply remove it from the page. Another example is when the QA engineer needs to quickly test whether some field adapts to a larger amount of text. The engineer must only add more text to the required textbox in the page’s HTML.
Furthermore, the engineer can easily edit, duplicate, delete, copy, cut selected elements, etc., and copy XPath, which can be used in writing automation scripts.
How the device toolbar is used?
Chrome DevTools allows checking multiple mobile resolutions via the device toolbar. The device toolbar icon is next to the inspect element icon in the upper left corner of the DevTools. You can enable responsive design by clicking on the Toggle device toolbar icon.
The QA Engineer can choose from the list of emulated devices or set up the needed resolution by populating width and height parameters with values. Furthermore, the engineer can choose from the other devices or add a custom device by clicking the “Edit…” button and selecting the needed device from the list.
Also, the QA engineer can enable throttling for the selected device to see how quickly the web page will load with the slow internet or how it will behave once the internet connection is interrupted.
Moreover, the tester can change the device location to see whether the page is adapted to a certain region.
How the browser console is used
QA testers can benefit from it by identifying and reporting JavaScript errors.
It allows the engineer to view and interact with JavaScript error log messages and run code snippets directly in the browser.
How the source tab is used
The engineers utilize this tab to view the list of files uploaded by the page edit CSS and JS.
How the network tab is used
The network tab logs browser requests for loading web pages. It provides detailed information about each network request, including request headers, response headers, status codes, and timing data. QA testers can optimize page load times, test APIs, and identify failed requests.
The QA Engineer can filter out the requests by the request type or timing.
In addition, you can override the data in the response by right-clicking and then clicking on the Override content. Then, choose the folder for the overridden data, make needed changes, and save them (Ctrl + S). The changes will be preserved on the screen even if the page is reloaded.
Also, DevTools allows using throttling to test site behavior on slow internet and disable/enable caching.
How the application tab is used
The application tab allows to inspect and manage storage, cookies and caches.
How the security tab is used
The Security tab offers information about a particular webpage’s HTTPS implementation on the server. HTTPS is a secure protocol for transferring webpage files, providing more encryption and verification than HTTP. The tab lists all origins where the webpage makes requests.
How the performance tab is used
The Performance tab is an essential tool for evaluating web app performance. It assists in recording and analyzing various performance metrics, such as loading times and rendering processes.
