Chrome Developer Tool

Chrome Developer Tool, a QA’s best friend

Google is an amazing place and it should be no surprise that they develop some pretty amazing tools.

In this post, let’s look at the ‘Chrome Developer Tool’.

Chrome Developer Tool

Chrome Developer Tool comes automatically installed in Chrome Browser and has helped many Developers and Testers (QA). Benefits comes in the form of UI Automation. If you dig deep enough, you can use the Tool to make performance improvements to a website also.

In this post, I have listed some of the biggest benefits of the tool and why you should consider using it.

Under The Hood

You get to have a cheeky peek

Well not really, you get to see the entire thing!

The tool can be accessed via the setting menu. Once you open the Tool, one of the first things you see are the DOM (HTML code) and Styles. This allows you to inspect the body of the page and it’s makeup.

Chrome Developer Tool Element

Wait a second, why is this so important?

For a QA, being able to write UI Automated tests requires that s/he has access to the source of the page. Looking at the HTML source code makes this easier. The QA is able to highlight and select specific elements on a web page. This then highlights the relevant HTML code under the Elements tab.

This allows the QA to cherry pick HTML code that they need to interact with which later allows the QA to write UI tests.

Networking

The Networking tab is perhaps a God send from Google.

If used correctly, information persisted in the Network tab can be used to identify a number of areas. This include page load time, causes of slow loads, resource and asset size etc.

This tab becomes very handy for anyone who is either interested or invested in Performance Testing.

Chrome Developer Tool Networking

For instance, it is possible to see:

  • What the largest file size is
  • The queue or order in which files loads
  • If any files resources stop other resources from loading

So what if we can see these files, how is the actually helpful?

Before being able to resolve an issue, you need to understand what the issue is.

Using the Network tab helps to identify ‘issues’. The tab becomes a hot bed to highlight potential performance fixes.

Auditing

The Audit tab is a good place to start if you want to quickly measure:

  • Page and Network performance
  • Accessibility
  • Web best practices

It very nicely supplements the Network tab.

Chrome Developer Tool Auditing

It is possible to run an Audit on a given web page which returns a number of suggestions. These suggestions are provided by Google.

Suggestions may come in the form of CSS tweaks, cookie size, script load order etc.

Implementing these suggestions could potentially help rank your page higher in search engines and make your website more accessible around the world.

Performance

The ‘Audit’ and ‘Networking’ tabs can be used to make performance improvements. However, the Performance tab has a slightly more direct approach.

The Performance tab allows the user to create a profile view of the current page. This essentially allows the user to see the series of events, API calls and resources which load to make the makeup of the page.

This allows the user to measure the first instance a page is loaded and when the user can first interact with the page. It also provides a pretty cool pie chart of the total load time.

Chrome Developer Tool Performance

Summary

Google Chrome Developer Tool is a free tool which can be used to make vast performance improvements and help write UI tests.

A QA should strongly consider adding Chrome Developer Tool to their ‘key best tool favorite list’.