5 reasons why you should use DevTools for testing

As we all know, testing is very useful and must be used on all kinds of projects to guarantee the proper level of quality. Being a tester nowadays means being a "Guardian of Quality", who will bravely find the nasty bugs and help to exile them from the product forever. And there are a lot of different ways to do this, plenty of different types of testing, testing tools, etc. Today we will talk about using DevTools for improving your testing skills.

If you are a Junior QA, you probably mostly concentrate on what you can do with application's UI: create, edit, delete something, etc. But more experienced QA's almost always have browser DevTools opened while testing, and there are a number of reasons why:

#1 Mobile browser emulator

If you really need to test mobile view (only view in terms of resolution, not mobile app), but you do not have any devices - you can easily test using "Mobile" option in your DevTools (browser emulator). It helps you to emulate most of the devices you need. This feature is really useful, especially if your application is a Web Mobile app. In this case, you can perform all your major testing on the browser emulator, and after that only check UI on the most critical mobile devices. Here is how it looks like:

#2 Playing around with HTML & CSS

There are cases, when  you need to test how a large piece of text would look like on your Web application. But you cannot edit some text on the page. That's when you can edit page HTML and see what happens:

This is only one example of all the stuff you can do in the "Elements" section. More options for you:

• Inspecting elements (e.g., finding image source, if a video is missing - you can see if it's uploaded to its source or not; you can play around with styles, text colors etc.)
• Verification of really specific UI requirements (font size - you can check it in pixels, font style, icon width/height/position and many many more)
   

#3 Checking out application requests and response structures for API testing 

If you know a thing or two about backend and API testing, you might need to know which request is being sent and with what data in certain cases, in order to test purely the backend part. You can check this in DevTools -> "Network" tab. 
 

#4 To win the hide-and-seek game with bugs :)

Some defects hide from you! And you can't really find them unless you check browser console. For example, this is also a bug:
 

It's a bug because you shouldn't have any errors in your application. An error means that something is not working correctly.

#5 Defect investigation & root cause analysis

Sometimes the page crashes, or some unknown error appears, or something else goes wrong or doesn't work. For example, "Experience" field does not have a limitation. You think it's a minor defect with low priority, right? Wrong! Because if you abuse that field, you will get an internal server error (code 500) in response, and the page will crash, and such things should never happen for your user :)

I have only listed these 5 reasons because that is what I mostly use browser DevTools for. Of course, this list is not exhaustive and goes on and on. But if you want to be a successful tester - please, take my advice, and keep those browser DevTools opened while testing! (F12 key ;))

Happy bug hunting!