Apex LogLens

Interactive visualization of Salesforce Apex debug logs, inside VS Code: Execution Graph (class call map) + Execution Flow (collapsible call tree)

• Callouts (outbound HTTP requests, responses, and status codes). Click any node to jump to the .cls at the exact line in your editor.

It reuses the exact parser and UI from the standalone web app — only the I/O layer differs (webview postMessage instead of HTTP).

Architecture

Message protocol (webview ⇄ host):

• webview → host: ready, parseText {text,name}, getSource {cls,reqId}, openSource {path,line,cls}, pull {cls}, pickLog
• host → webview: project {workspace}, model {name,model,classStatus}, source {reqId,found,path,source}, error {message}

Run it (development)

cd loglens-vscode
# no build step — it's plain JS
code .          # open this folder in VS Code
# press F5  ->  launches an "Extension Development Host" window

In the dev window:

1. Open a Salesforce project (so Open in editor / class lookup works).
2. Open or right-click a .log file → Apex LogLens: Visualize Debug Log (also in the editor title bar and the Command Palette).

Package & install (.vsix)

npm install -g @vscode/vsce
cd loglens-vscode
vsce package           # produces apex-loglens-0.1.0.vsix
code --install-extension apex-loglens-0.1.0.vsix

Notes

• Salesforce platform/system classes are excluded from the graph/flow.
• Color-coded logs pulled via sf are cleaned automatically.
• "Open in VS Code" / clicking a node uses vscode.workspace.findFiles('**/<Class>.cls').
• The Pull action runs sf project retrieve start --metadata ApexClass:<Class> in a terminal.
• To re-sync the parser with the web app after changes, re-copy loglens/src/parser/*.js and convert export→module.exports (see how this scaffold was generated).