A simple and interactive Log Viewer for VSCode that lets you see console.log outputs directly in the Explorer sidebar — neatly structured and expandable.
- Automatically captures
console.logoutputs when saving your file. - Displays logs grouped by file name.
- Expands objects and arrays into a tree structure.
- Inline tooltips for raw values.
- Supports refreshing logs via command: Log Viewer: Refresh.
- For frontend frameworks (React, Angular, Vue):
- Provides the command Log Viewer: Create Launch Config to auto-generate
.vscode/launch.json. - Adds Chrome/Edge debug configuration so you can run & capture logs.
- Provides the command Log Viewer: Create Launch Config to auto-generate
- Install the extension.
- Save any
.js/.tsfile withconsole.log. - Logs automatically appear in the Log Viewer (no setup needed 🎉).
- Run the command Log Viewer: Create Launch Config.
- This will generate a
.vscode/launch.jsonwith a Chrome/Edge debug configuration.
- This will generate a
- Start the debugger from Run and Debug.
- Save files — logs will appear inside Debug Console and the Log Viewer.
This extension contributes the following commands:
log-viewer.refresh→ Refresh log output manually.log-viewer.createLaunchConfig→ Auto-create alaunch.jsonfor frontend frameworks (React, Angular, Vue).
- Node.js installed (for backend).
- For frontend, a Chromium-based browser (Chrome/Edge) is needed.
- Currently works best with
console.log. - Future support may include
console.error,console.warn, etc. - Debug config is added per project; verify
.vscode/launch.jsonexists for frontend.
- NEW:
log-viewer.createLaunchConfigcommand for frontend frameworks. - Backend Node.js projects now work without needing
launch.json.
- Initial release with:
- Auto log capture on file save.
- Tree view for arrays/objects.
- Manual refresh command.
Pull requests and suggestions are welcome!
Open an issue to report bugs or request features.
Enjoy debugging with Log Viewer! 🎉