Top 5 Chrome Developer Tools Tips Every QA Should Know

How quickly you can Test your Web Application Responsiveness, performance, Accessibility, Quick front End validation? What are the tools you need to install? 

By using the Chrome Developer Tool, we can achieve all these.

Chrome Developer Tool Introduction:

However, the name says developer Tools. It’s not only for developers; it’s a great tool for QA  who test Web Applications.  From  Inspecting elements for writing Automation code to Identifying site performance and accessibility using Lighthouse lot more can do with the chrome dev tool. 

 If you’ve never been inside Developer Tools before, Open Chrome’s menu > More Tools > Developer Tools. F12 for Windows and  (⌘ ⌥ I  ) for Mac to Toggle Developer Tool in Chrome

Here are a few tips  for Developer Tools

You can see multiple tabs in the Developer tool, including icons for Element Inspector and Toggle Device Tool, lets see how these options will make Tester’s life easier.

Responsive mode

Working on Web Application testing, it is necessary to understand how the application reacts in various device browsers in various devices, including iPhone and IPad.

You can choose the device from the list or add custom devices by editing and Adding new Devices.

For example, we can change zoom level, Network Throttling to check our application reacts offline or any other network speed level.

Clicking Edit will lead you to a huge range of customized settings.

Console

Errors can escape from the user’s Eye, but Chrome Console caught all exceptions with details. And also, we can execute either single line javascript command (typescript and press “Enter”) or multiline Scripts (after each line, press Shift+Enter )

Analyze Web Application Performance:

From this tab, we can know about CPU utilization, How page rendering happens in Web Page. The Summary at the bottom talks about the Overall breakdown of the CPU

Network 

When the user uses our application, we must know how it will react when there is a sudden change in the network, it can be a change in speed or completely offline. We can use this network tab and select a different option from the dropdown to stimulate this. 

Lighthouse Report:

It’s an open-source automated tool (https://github.com/GoogleChrome/lighthouse), which can use to audit performance, SEO, Best Practice accessibility of Web Application by running Lighthouse report via Chrome Devtool.

However, the list is not yet completed; we can edit CSS, Clear  Cookies, Script Debugging using adding breakpoints under the Source tab. 

Make sure to use the Developer Tool effectively to add more values to our Web Application testing whenever required.

Happy Testing!