Developer Tools
The editor, browser devtools, and terminal every developer works in daily.
CurrentbeginnerBeginner-friendlyGuide only -- no course yet
Overview
Beyond any specific language, comfort with a code editor's features (multi-cursor, search-and-replace, debugging), browser developer tools (inspecting elements, the network tab, breakpoints), and a terminal makes every other skill faster to apply. This entry orients the everyday tooling, distinct from Git or a specific language.
- What it is
- The everyday tools -- editor, browser devtools, terminal -- that surround writing and debugging code.
- Why it's used
- Fluency here compounds: a developer comfortable with breakpoints and the network tab debugs in minutes what otherwise takes hours of guesswork.
- Where it fits
- Alongside, not instead of, learning a language -- these tools are how you actually write, run, and debug code day to day.
Core concepts
- Editor navigation and multi-cursor editing
- Browser DevTools (Elements, Console, Network, Sources)
- Setting breakpoints
- Reading a stack trace
Example
The debugger statement (or a breakpoint set by clicking a line number) pauses execution so you can inspect variables live -- almost always faster than debugging via console.log statements alone.
// In browser DevTools' Console tab:
debugger; // execution pauses here when DevTools is open
// Then step through code line by line in the Sources panel.Common use cases
- Debugging any web application
- Everyday development workflow, regardless of language
Project ideas
- Intentionally introduce a bug into a small script and practice finding it using breakpoints instead of print statements