Browser Developer Tools
Tool manual · Kali & common usage
Web testing · Beginner · Web testing lane
What is Browser Developer Tools?
Built-in browser Developer Tools (Chrome/Edge/Firefox) for inspecting HTML, JS, network calls, cookies, and storage.
First stop for understanding how a web page talks to its backend — no extra install.
Official website: Browser Developer Tools · Documentation
When do you use it?
- Check cookies (Secure, HttpOnly, SameSite).
- Watch XHR/fetch failures, status codes, headers.
- Debug front-end auth flows.
Who uses it?
- AppSec engineers
- Bug bounty hunters (in-scope)
- Penetration testers
How do you use it? (typical flow)
- Install Browser Developer Tools using the steps below (prefer Kali package or official installer).
- Confirm you have authorization for the target (lab VM, own system, or written scope).
- Run --help / man (or the Help section) to see current flags for your version.
- Start with a safe example from Basic commands against localhost or an authorized lab target.
- Record what you ran, what you observed, and any follow-up (filter, report, remediation).
Help & manual (like man / --help)
Every serious tool has a built-in way to look up flags. Learn these first so you are not stuck memorizing every option.
1. Chrome DevTools docs
https://developer.chrome.com/docs/devtools
Official guide.
2. Open tools
F12 or Ctrl+Shift+I
Keyboard shortcut.
Kali Linux
Use Firefox/Chromium on Kali — press F12. No separate package required.
1. Installation
| OS | Installation |
|---|---|
Kali Linux | Use Firefox/Chromium on Kali — press F12. No separate package required. |
All browsers | Press F12 or Ctrl+Shift+I |
2. Basic commands
1. See every request a page makes
Network tab → reload
See every request a page makes
2. Inspect cookie flags (HttpOnly, Secure)
Application → Cookies
Inspect cookie flags (HttpOnly, Secure)
3. Show help
Network --help
List flags for your installed version (same habit as man/--help).
4. Short help
Network -h
Alternate help flag when supported.
5. Keep requests across navigation
Preserve log
Keep requests across navigation
6. Force fresh requests
Disable cache
Force fresh requests
Options / flags
| Option | Purpose |
|---|---|
Preserve log | Keep requests across navigation |
Disable cache | Force fresh requests |
5. Useful features
- Network tab
- Storage/Application tab
- Console
- Sources & debugging
6. Practical examples
Example 1: See every request a page makes
Network tab → reload
See every request a page makes
Example 2: Inspect cookie flags (HttpOnly, Secure)
Application → Cookies
Inspect cookie flags (HttpOnly, Secure)
Example 3: Show help
Network --help
List flags for your installed version (same habit as man/--help).
Example 4: Short help
Network -h
Alternate help flag when supported.
Example 5: Keep requests across navigation
Preserve log
Keep requests across navigation
7. Important notes
- Used by every web developer; the first tool for understanding web behavior.
- Authorized targets only — labs, systems you own, or written permission.
- Prefer reading --help / man / official docs for your installed version; flags change over time.
Related course: web application security · bug bounty hunting · Commands: /commands#burp