Navigating Large CodebasesLesson 3.4
How to map a codebase using a call graph
call graph concept, building manual call graphs, automated call graph tools, finding dead code, hotspot identification, reading breadth-first vs depth-first
The Call Graph Shows How Code Is Connected
A call graph maps which functions call which other functions. It's the fastest way to understand the execution paths through a codebase, identify hotspots, and find dead code that nobody calls.
Build a Manual Call Graph While Reading
// Starting from the entry point, trace the call chain:
// app.js
app.post('/login', authController.login);
// └── authController.login()
// ├── validateLoginRequest(req.body)
// ├── userService.findByEmail(email)
// │ └── userRepository.findOne({ email })
// ├── bcrypt.compare(password, user.passwordHash)
// └── jwtService.sign({ userId: user.id })Automated Tools Speed This Up
# JavaScript: use madge for dependency graph
npx madge --image graph.svg src/index.js
# Python: use pycallgraph or py-call-graph
pip install pycallgraph
pycallgraph graphviz -- python app.pyBreadth-First vs Depth-First Reading
Breadth-first: understand every direct call from the entry point before going deeper. Gives you a map before details. Best for orientation.
Depth-first: pick one path and follow it all the way to the bottom. Best for understanding one specific behavior end-to-end.
Use breadth-first first, then depth-first on the path that matters for your task.
