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
- Mac Chrome: View ->Developer->Developer Tools
and here we have:
Is it only for Chrome browser?
Is it useful for testing mobile?
Sure it is! As a tester I feel the need to explain how to start, so:
- Install Chrome browser.
- Get yourself an Android smartphone
- Find a USB cable to connect them together.
- Plug your device in.
- Type chrome://inspect in chrome browser.
On mobile devices you are able to use Chrome Developer Tools in a very similar way to web testing. You are able to perform throttling, look for elements or check the network connection, what is more, you are also able to check things in database through Stetho.
Nah, it doesn’t work on my mobile…
Yes – it does. All you need to do is enable developer options!
- Open settings
- Go to System> About phone>Version number
- Tap on it 7 times (really)
And now this 🙂
- Open developer options
- Turn them on ( 🙂 )
- Allow USB debugging
From now on your device should be visible in chrome/inspect.