13. Reading unfamiliar codebases
JavaScript · 56 pages source format
Professional work is mostly reading, not writing. Start from entry point (main.js, index.html). Follow imports. Use grep/search for symbols. Debugger breakpoints beat console.log spam. Read tests to learn intended behavior. Leave code better — small rename PRs build trust.
What you'll learn
- Entry point tracing
- Search strategies
- Debugger usage
- Reading tests as docs
- Safe refactoring
Find the entry point
package.json "main" or "module". index.html script tags. src/main.js in Vite. Start there; follow one user action end-to-end.
Do this now
Clone a small open-source vanilla JS or Vite project (<500 lines). Identify entry point in 10 minutes.
Search with intent
Ripgrep/IDE search for function names, error strings, CSS classes. "Find references" on symbols. Read call hierarchy upward.
Do this now
Pick one feature (e.g. "add todo"). Trace from button click to data save using search only.
Debugger over console
Breakpoints pause execution with full scope. Step over/into/out. Conditional breakpoints for loops. Network tab for fetch debugging.
Do this now
Set breakpoint in fetch handler. Inspect response in debugger. Step through render path.
Tests as documentation
When behavior is unclear, read tests first. They show inputs, outputs, and edge cases the author cared about.
Do this now
In your cloned repo, find test files. List 5 behaviors you learned from tests without reading implementation.
First contribution
Fix a typo, improve error message, add one test. Small PRs get merged. Read CONTRIBUTING.md if present.
Do this now
Open a draft PR or local branch with one improvement to the cloned repo. Write clear commit message.
Pro tip. If repo is too large, use GitHub code search or filter by path:src.