Posted in tools

Chrome developer tools – introduction

talking-tools1

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

picture1

How to enter?

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

and here we have:

dol

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 Chrome browser.
  2. Get yourself an Android smartphone
  3. Find a USB cable to connect them together.
  4. Plug your device in.
  5. 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!

  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 your device should be visible in chrome/inspect.

How to take advantage of Chrome Developer Tools in details.

 

 

Advertisements

One thought on “Chrome developer tools – introduction

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s