What’s in your toolbox? Why you should use browser developer tools
Tags: websecurity, cybersecurity, webdev, beginners
Published: 2022-04-07 15:43:07

## Tools, tools, tools...



![toolboxgif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70tc79b9vo669y4v1yz2.gif)
 

## **Prologue**


As part of the development, security, and operations team (DevSecOps/makers and breakers), you’re bound to have a diverse toolbox. By this, I’m talking about technology such as integrated development environments (IDEs), version control software, plugins, libraries, frameworks, continuous integration/continuous development tools (CI/CD), testing software, and vulnerability scanners.

There’s no doubt that you utilize different tools when developing or testing an application during the software development lifecycle (SDLC). However, many of them are expensive, time-consuming to read/learn documentation, install and deploy, and sometimes require reconfiguration to suit certain purposes.

Sometimes, these technologies (tools), can seem a bit daunting to learn about or use. Yet, what if I told you there are simple, inexpensive, and efficient tools that don’t require installation or configuration, that you could use to test the security of your application without breaking a sweat? **I got your attention, didn’t I?** 😉


![smirkgif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4yzcxge6l8n4i2mvsyv.gif)






## What are browser developer tools? 🤔
 


Browser developer tools, as their name implies, are sitting right in your browser, whether that be Chrome, Firefox, Safari, or Microsoft Edge. Anyone worth their salt in development, quality assurance (QA), or security testing roles should know how to utilize these powerful tools effectively.


![Access devtools in chrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11g0wmb1vvwq6rubm26g.png)
_Accessing browser developer tools in Chrome._



Browser developer tools are beneficial for testing a web application’s overall functionality, performance, and security. They can be used to continuously test, inspect, and monitor various aspects of an application in real time without having to return to an integrated development environment or the server itself to modify code.
 
These tools basically constitute a pre-staging environment that provides virtual and language shell interactivity, meaning you can debug your application, test your API, and monitor network traffic. 

You can also check for client-side validation errors and authentication mishaps. As these tools can be used to edit headers and request parameters and data on the fly, they can also perform security-related checks, scanning for vulnerabilities like SQL injection, cross-site scripting (XSS ), and API attacks without the need for a tool such as Burp Suite.

Browser developer tools have various benefits, but crucially, they can help ensure a focus on security early in the SDLC.



## **The Tools** 🛠🪛🔩⚙️



![image of dev tools in chrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pf83d18lwnm3jyt6ve7e.png)
_Browser developer tools in Chrome._


Most browsers include the following developer tools by default: **Elements**, **Console**, **Sources**, **Storage** **Inspector**, **Memory**, **Network**, **Security**, and **Application**.

These tools are all designed for specific purposes. If you’re trying to test an API’s response or carry out a network performance analysis, then you’ll need the **Network** panel. For bypassing client-side measures and testing out various elements, the **Inspect Element**/**Inspector** tab would be the appropriate tool to use. 

And if you want to clear out your cache and modify and delete cookies to prevent potential sensitive data exposure and session hijacking attacks, you’ll need to use the **Application** panel.

**Real-World Saga** 😬

In [October 2021](https://www.nytimes.com/2021/10/15/us/missouri-st-louis-post-teachers-hack.html), a news reporter was able to utilize the **Inspect Element**/**Inspector** tool of an elementary school’s website to obtain teachers’ social security numbers, showing that you don’t always need sophisticated or expensive tools to discover vulnerabilities in an application. 


## **Epilogue**

It can be a struggle to maintain the balance between ensuring security and delivering quality applications. 
This is where browser developer tools come in handy. 

Although most developers and security testers are unaware of their efficacy, these simple and inexpensive tools save time, ease company budget concerns, and ultimately bridge the gap between development and security.

Bid thy time no longer, open thine browser and check out thy tools - you are welcome! 😁


_**Disclaimer - This blog was first published on a different platform.**_