CallWeb
Click any function or module and see an interactive graph of everything that calls it and everything it calls. Collapsible, filterable, and actually useful — unlike static import trees.
Features
- Interactive Call Graph: Visualizes function call relationships in a force-directed graph
- Bi-Directional: Shows both callers (what calls this) and callees (what this calls)
- Context Menu Integration: Right-click any function → CallWeb: Show Call Graph
- Collapsible Nodes: Click nodes to expand/collapse their connections
- Filter Controls: Toggle between showing callers, callees, or both
- Zoom & Pan: Navigate large graphs with mouse controls
- Multi-Language: Works with TypeScript, JavaScript, Python
Usage
- Place your cursor on any function name
- Right-click and select CallWeb: Show Call Graph for Symbol at Cursor
- An interactive graph opens in a new panel
Command Palette
- CallWeb: Show Call Graph for Symbol at Cursor — Generate graph for the function under cursor
- CallWeb: Show Call Graph for Selection — Generate graph for selected text
How It Works
CallWeb uses VS Code's built-in call hierarchy API to discover call relationships, then renders them as an SVG force-directed graph.
- Blue nodes = Functions that call the selected function (callers)
- Green nodes = Functions called by the selected function (callees)
- Orange node = The selected function (root)
Configuration
{
"callWeb.maxDepth": 3,
"callWeb.excludePatterns": [
"**/node_modules/**",
"**/dist/**"
],
"callWeb.showCallers": true,
"callWeb.showCallees": true
}
Example
Code:
function processOrder(orderId) {
validateOrder(orderId);
calculateTotal(orderId);
sendConfirmation(orderId);
}
function validateOrder(orderId) {
checkInventory(orderId);
verifyPayment(orderId);
}
Right-click on processOrder → Show Call Graph:
[orderController.handleCheckout] ← caller
↓
[processOrder] ← root (orange)
↓
┌────────────┼────────────┐
↓ ↓ ↓
[validateOrder] [calculateTotal] [sendConfirmation] ← callees
↓
┌───┴───┐
↓ ↓
[checkInventory] [verifyPayment]
Graph Controls
- Click node — Expand/collapse its connections
- Drag node — Reposition in the graph
- Scroll — Zoom in/out
- Filter buttons — Toggle callers/callees visibility
- Fit button — Reset zoom to fit all nodes
Supported Languages
- TypeScript
- JavaScript (ES6+)
- Python
Requirements
Use Cases
- Code Understanding: Quickly see how a function is used across the codebase
- Refactoring: Identify all callers before changing a function signature
- Debugging: Trace the call path to find where a function is invoked
- Code Review: Visualize the impact radius of a function
License
MIT
