Most modern web browsers come with built-in developer tools (DevTools), which are mainly intended for developers to test their web applications. However, as web penetration testers, these tools can be a vital asset in any web assessment we perform, as a browser (and its DevTools) are among the assets we are most likely to have in every web assessment exercise.

To open the browser devtools in either Chrome or Firefox, we can click [CTRL+SHIFT+I] or simply click [F12]. The devtools contain multiple tabs, each of which has its own use.  Here we have various tabs to display different outputs for assessment. The Network tab, for example, will display request and response details. Use of Filter URLs allows for more targeted searches in lieu of over load information displayed for a website.

Here are the typical tabs found in a browser's Developer Tools (DevTools) and their functions:

1. Elements

• Inspect and modify HTML and CSS of a webpage in real time.
• Edit styles, change element attributes, and see live updates.
• View the DOM structure and manipulate elements.

2. Console

• Run JavaScript commands and interact with the page dynamically.
• View error messages, warnings, and logs for debugging.
• Execute custom scripts and test functions.

3. Network

• Monitor network requests, such as API calls, images, and scripts.
• Analyze load times, request/response headers, and status codes.
• Filter and inspect WebSocket, Fetch/XHR requests.

4. Performance

• Record and analyze page rendering performance.
• Identify bottlenecks and optimize loading times.
• Visualize CPU and memory usage over time.