<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

An introduction to Chrome Dev (and QA) Tools

Published on
4,702 Points
1,202 Views
5 Endorsements
Last Modified:
Marlon
I was born in a town so small when the buzzards circled overhead they got dizzy.
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.
chromeDev1.png 
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.
chromeDev2.pngA 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.
chromeDev3.png 
  • Sources: This not only shows you source, but it lets you set break points, pause on caught exceptions, view the stack and more.
 
chromeDev4.png 
  • 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.
chromeDev5.pngCheck 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
 
 
5
Comment
Author:Marlon
  • 2
2 Comments
LVL 5

Author Comment

by:Marlon
Are the images showing up in the article ? I see them when I'm in the editor, but they are
missing afterwards.
0
LVL 5

Author Comment

by:Marlon
Eric, thanks for the pointer to the editing process.
0

Featured Post

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Join & Write a Comment

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month