Field manual
How to play
You do not need to have opened DevTools before. This page explains what each panel is for and nothing about what is hidden where.
The rules
- 1Explore the arena. Click things. Resize the window. Press keys. Paste odd inputs into fields.
- 2When something behaves differently from what should logically happen, that is a find.
- 3Report it with steps another developer could follow. If you found a hidden phrase, paste it into the proof field — correct phrases are graded instantly.
- 4Most behavioural bugs are reviewed by a human. Finding one that somebody else already found still counts for you.
The panels
F12, or Cmd+Option+I on a Mac, or right-click → Inspect.
Elements
The HTML and DOM your browser actually rendered — which is not always the HTML the server sent. Comments, attributes, hidden inputs, templates and custom tags are all here, greyed out or collapsed but fully readable.
Cmd/Ctrl-F searches the DOM tree, including tag names and attribute values.
Styles & Computed
Why an element looks the way it does: every rule that applies, which ones lost, and the final computed value. The box-model diagram shows exactly where an element's width comes from.
Tick 'Show all' in Computed to list every custom property in effect.
Console
Messages the page logged, and a REPL bound to the page's own JavaScript. You can call the page's functions, read its globals and inspect the selected element.
$0 is the selected element, $$('sel') is querySelectorAll, copy(x) puts x on the clipboard.
Network
Everything the browser asked the server for: URLs, query strings, request and response headers, status codes, payloads and timing. The Size column tells you when a response came from cache instead of the network.
Right-click a request → Copy as cURL to replay it outside the browser.
Application
Storage: localStorage, sessionStorage, cookies (with their HttpOnly and SameSite flags), IndexedDB, Cache Storage and the web app manifest. Everything a site has left on your machine.
Cookies marked HttpOnly are invisible to document.cookie — deliberately.
Device / responsive mode
Render the page at any viewport size, with a ruler showing the exact width. Layout bugs live in ranges, so drag slowly rather than jumping between device presets.
You can type an exact width. Some things only happen at exact widths.
Sources & Rendering
Every file the page loaded, plus breakpoints. The Rendering panel emulates media features — print, dark mode, reduced motion, forced colours — without touching your operating system settings.
Rendering → 'Emulate CSS media type: print' shows a page's print design live.
Knowing where to look isn't the same as knowing what you'll find.
Writing a report that counts
Not useful
“the shop is broken”
No page, no steps, no expectation, nothing to reproduce.
Useful
“On /arena/shop, adding 3 × Holographic Sticker (₹10.10) shows a line total of ₹30.30 but an order total of ₹30.29. Expected both to be ₹30.30. Looks like the total is summed as a float and truncated.”
Page, steps, expected, actual, and a hypothesis.