An introduction to Chrome Dev (and QA) Tools

An introduction to Chrome Dev (and QA) Tools
Have you ever been asked to investigate memory or cpu usage of your company’s web app? Have you ever been asked to investigate where your company’s web app is spending time during its loading? Google’s chrome browser comes with a rich set of tools that can be used to investigate memory usage, CPU usage, object load times, network traffic and more. This article gives a quick rundown of some of what’s available through Google’s DevTools.

The suite of tools are referred to a ‘DevTools’ but, of course, anyone can make use of them, including QA folks. Chrome version 38.0 is used for this article. Since there are different versions of the tools your tools may look different.

To get started, click on the Chrome menu. In the drop down, look for ‘More Tools’ or something with a similar name. From that drop down, click on ‘Developer Tools’. You can also use a three keystroke group of shift-control-I (capital i) (Cmd-Opt-I for Mac) to launch the tools.
 
When the tools launch, you’ll see the different options across the tools banner. The Chrome DevTools Overview does a good job of introducing the set of tools.
A quick rundown

• Elements: As the name implies, with this tab selected you can see the DOM tree elements. Additonally, you can drill down into the structure of the tree and you can edit elements. The Editing Styles and The Dom page gives more details.
• Network: Using the Network option, you can see network traffic, including how long it took to load page objects.

 

• Sources: This not only shows you source, but it lets you set break points, pause on caught exceptions, view the stack and more.

 
 

• Profiles: This is where you can go to get information on memory usage. You can take snapshots of heap memory usage and then compare differences between them. This is a very handy way to see if your page is leaking memory. You can also collect CPU usage stats for  javascript code and you profile heap memory allocation over time.

Check out the references for more information on all these features.
References:

• Chrome DevTools Overview should be your starting point for diving in deeper into any of the tools that you are curious about.
• Videos – Google Chrome are a set of short videos that give quick intros. At the bottom of the page are a couple recordings of chrome meetings.
• Taming the Unicorn is a nice look at javascript profiling with chrome devtools