DevTools
In depthTool
Also known as: Browser DevTools, Chrome DevTools
Developer tools built into the browser for inspecting the DOM, network, performance and console.
DevTools, explained
Written by EduVerseWhat it is
DevTools is the set of developer tools built into browsers such as Chrome, Firefox and Edge. You open it with F12 or by right-clicking a page and choosing Inspect. Its panels show the live HTML, the CSS applied to each element, every network request and the JavaScript console.
Why teams use it
Frontend code runs in the browser, so that’s where you need to see what it actually does. Instead of guessing or rereading your code, you can change CSS live, pause JavaScript on a breakpoint and read the exact response a server sent back. Most frontend bugs are found here first.
An example from work
A button on your page does nothing when you click it. You open DevTools and see a red “Uncaught TypeError: Cannot read properties of undefined” in the Console tab. You click the file link next to it and land on the exact line where your code used data that hadn’t loaded yet.
Our own explanation, not a quote from the book.
In the book
Sentences from The Software Realm, Decoded that mention DevTools, exactly as printed.
2 more passages about DevTools in the full book
Read every conversation where DevTools comes up, with the interactive slides and demos.
Where it fits
Debugging and inspecting frontend code in the browser
Coverage in the book
Covered in depth: multiple pages with explanations, examples and simulations.
