Testing and Debugging are essential activities during the software development life cycle, specifically in the software development and maintenance phases, it is a fundamental step to produce a high-quality product.
While Testing is performed to check if the code contains errors, debugging is done to locate and fix these errors.

Among the many ways and methods to perform debugging and testing, Browser offers comprehensive tools, which are so powerful.
It allows developers designers or testers to work with a variety of web technologies, including HTML, CSS, the DOM, JavaScript, and other components that are handled by the web browser.
Due to increasing demand from web browsers to do more, Popular web browsers have included more features for developers.

The tools we are are talking about are called web development tools or web tools and can be used with web applications.
It comes as browser add-ons or built-in features in it.

Most popular web browsers, such as Google Chrome, Firefox, Internet Explorer, Safari, and Opera, have built-in tools, and many additional add-ons can be found in their respective plugin download centers.

In this article, we are going to explain 8 ways for you to use these tools, which will save you time and make your test experience more efficient and fun.

• Please note that Web browser screenshots that are taken for examples below are taken from Microsoft Edge web browser, however differences are not that much between all broswers development tools.

How can I access these tools?

Open up your browser, and then right-click the mouse then select inspect elements, or just open up your browser then press Ctrl+ Shift+I.
Below is the screen that you will get after performing this step

1. Pointer. Used to point on the wep app elements (for example: an image or any other DOM element).
2. Change the screen display for your web app (pointed in #6).
3. Tools Bar.
4. Change the tools display, which has 4 options 2 horizontal (Upper horizontal part of the screen / Lower horizontal part of the screen)options and 2 vertical options(Left side of the screen/ right side of the screen).
5. The display for the selected tool chosen from the tools bar (pointed by #3).
6. The display for your web app.

8 Ways to debug and test using the web browser

I. Console Tab.

Mainly its benefits when using Javascript, you can use console.log() to trace your variable in your code, and know what are the actual variables are holding, values that you log out using console object and log method will be found in the console tab.
The consoles allow developers to type in JavaScript commands and call functions, or view errors that may have been encountered during the execution of a script.
Developer can get the results in the console display as shown in the image above.

II. Network Tab.

When you have a function that returns a result from a backend, but somehow you are not receiving anything in the program view, just open the browser, get to the tools and click on the network tool in the tools bar, then refresh your page and watch all the coming requests through the network.
then trace and check if you are really calling that method, sending the desired parameters, and if it's really returning the result that you are looking for, this way you will be able to figure out if it's view related error or back-end related error.
as you can see in the screenshot below, all requests are listed in the left side of the display screen

Just double click on the request that you want to check, and another display on the right side of the screen will be shown, where you can examine the details of the request(eg; response, header, time is taken to execute...etc), just like in the screenshot below

III. Application Tab.

This tool will help you to view all data stored in your application(Eg, Cookies, Local Storage, sessions...etc)
For Example; Using local storage is common to save some simple data, if you need to check what are the actual values currently stored in your app local storage, you can check it by using the browser application tab.

IV. Edit your element's CSS or HTML.

It allows you to edit your CSS or html and see the results live in the browser, but your original file will not be affected by these changes, as soon as you refresh the page it will be back to the original style.
To Perform this one, you have to click on the pointer (#I As described in the first screenshot in the article), then hover over the element you want to manipulate or just you want to check.

As in the Screenshot above

1. Is where the pointer is pointing.
2. The CSS of element pointed to in point number 1 above.
3. The Html code of the element pointed to.

V. Inspect to know what CSS classes your DOM element is really holding.

-You can refer to the screen shot in the previous point (#IV).

Just like what we have viewed in the previous point, This helps A looooot when you can't determine what classes are affecting your Html element or tag! Sometimes you are applying edits but somehow it's not being implemented! The reason is that these elements are inheriting some CSS classes from a parent elements, locating these parents elements to help you un-inherited their CSS class can easily be traced using the pointer, just point to the element using pointer, and all the CSS code that is applied to that element will be displayed in the css section, check it carefully, also you can check and uncheck CSS classes and properties and see the direct effect on the element, how cool is that?

VI. Inspect to view what each DOM element is actually holding (js values).

-You can refer to the screen shot in point (#IV).

Let's say you are passing JS values to be views in an Html element or tag, and need to view what is the exact value being passed because for a reason it's not showing up right in your app. Using the browser pointer it can help you see the values and determine the cause of the issue.By pointing to the required Html element, and the value that is holded will be displayed in the code part.

VII. Color Picker tool.

Although it's so simple this one is really one of my favorites, by using this brush you can get the code or RGB of any color you came across while browsing the web.
All That you need to do is to inspect any of the elements in the page, then in the CSS part click on color (the color rectangle itself, you will get a small screen with a color picker icon, click that icon and then press on any color you want to get in the page, details of the color will be displayed in the color rectangle) just like shown in the screenshot below.

VIII. Profiling and auditing

This one I personally don't use a lot, but you should also know about it.
Edit Profiling allows developers to capture information about the performance of a web page or web application. With this information, developers can improve the performance of their scripts. Auditing features may provide developers suggestions, after analyzing a page, for optimizations to decrease page load time and increase responsiveness. Web development tools typically also provide a timeline features that provide a record of the time it takes to render the page, memory usage, and the types of events that are taking place.
These features allow developers to optimize their web pages or web application.

Conclusion

With all that being said, ways explained above are only a part of what you can do using these amazing tools, so practice the one mentioned above, and then explore the rest to develop your testing and debugging skills even more.

What about your favorite web tools?

Do you have a favorite web tool? Or web tools?! Please share it with us in the comments section below.