How to use Chrome Developer Tools for testing

What is it?

This is what they say on Chrome DevTool’s website:
The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application.

Nice, isn’t it? I’d say – it is the most underestimated tool for manual testing.

Why don’t you give it a try in testing web?

I’ve prepared this awesome and unique word cloud to present an overview of areas in which you may use them in testing. And there are multiple functions, not only limited to:

• resizing (change user agents)
• screen rotation
• using Console: Debug JS – CSS, Logs
• network manipulation: Throttling, Performance
• security testing
• location change
• looking for elements (id)
• taking screenshots
• clearing cache
• test recording
• database checking

How to enter?

• Ctrl + Shift + I
• F12
• Mac Chrome: View ->Developer->Developer Tools

Is it only for Chrome browser?

ChromeDev-like tools are available at other browsers as well. There is a Firebug for Firefox and Safari Web Inspector in Web Development Tools on Mac.

Is it useful for testing mobile?

Sure it is! As a tester I feel the need to explain how to  start, so:

1. Install the Chrome browser.
2. Get yourself an Android smartphone
3. Find a USB cable to connect them
4. Plug your device in.
5. Type chrome://inspect in chrome browser.
   
   

On mobile devices, you can use Chrome Developer Tools in a very similar way to web testing. You can perform throttling, look for elements, or check the network connection, what is more, you are also able to check things in a database through Stetho.

Nah, it doesn’t work on my mobile…

Yes – it does. All you need to do is enable developer options!

1. Open settings
2. Go to System> About phone>Version number
3. Tap on it 7 times (really)

And now this 🙂

1.  Open developer options
2.  Turn them on ( 🙂 )
3. Allow USB debugging

From now on the device should be visible in chrome/inspect.

How to take advantage of Chrome Developer Tools in details.