Slog Viewer

Beautiful structured log viewer for debugging. Automatically transforms JSON/logfmt logs into readable, interactive output with syntax highlighting, filtering, and search.

Features

• Automatic Detection: Detects and formats JSON/logfmt logs during debugging
• Task Support: Capture structured logs from VS Code Tasks ("type": "slogViewer")
• Open Log Files: View any structured log file directly in the panel, with optional live tail
• Interactive UI: Modern webview with VSCode theme integration
• Advanced Filtering: Right-click any field to include/exclude logs by value
• Filtering & Search: Filter by log level and search across messages
• Export Logs: Copy or save filtered logs as JSON, CSV, or text
• Collapsible Fields: Click to expand/collapse log details
• Works with Any Language: Go slog, Node.js pino, Python structlog, and more

Quick Start

1. Install the extension
2. Option A — Debugging: Start debugging (F5) and view formatted logs in the Slog Viewer panel
3. Option B — Tasks: Define a task with "type": "slogViewer" in .vscode/tasks.json and run it
4. Option C — Log Files: Run "Slog Viewer: Open in Slog Viewer" from the Command Palette, or right-click a file in the Explorer

Task Support

VS Code Tasks let you run commands directly from VS Code. By using "type": "slogViewer" instead of "type": "shell", the extension captures structured logs and displays them in the Slog Viewer panel — while still showing all raw output in the terminal.

Before (standard shell task — logs only in terminal):

{
  "label": "Run Server",
  "type": "shell",
  "command": "node",
  "args": ["server.js"]
}

After (slogViewer task — logs in Slog Viewer panel + terminal):

{
  "label": "Run Server",
  "type": "slogViewer",
  "command": "node",
  "args": ["server.js"]
}

Complete tasks.json Example

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Dev Server",
      "type": "slogViewer",
      "command": "node",
      "args": ["${workspaceFolder}/server.js"],
      "cwd": "${workspaceFolder}",
      "env": {
        "NODE_ENV": "development"
      }
    }
  ]
}

Task Properties

Variable substitution is supported: ${workspaceFolder}, ${file}, ${env:VAR_NAME}.

Log File Support

Open any log file containing structured JSON or logfmt entries directly in the Slog Viewer panel.

Opening a Log File

• Command Palette: Run Slog Viewer: Open in Slog Viewer and select a file
• Explorer Context Menu: Right-click a log file and select Open in Slog Viewer or Watch in Slog Viewer (Live Tail)

Live Tail (Watch Mode)

Use "Slog Viewer: Watch in Slog Viewer (Live Tail)" to monitor a file for new log entries in real time. New lines appended to the file automatically appear in the panel. Log rotation (file truncation) is handled automatically.

Notes

• Each file appears as a separate session in the session dropdown
• Non-structured lines (plain text, stack traces) are silently skipped
• Any text file with JSON or logfmt log lines is supported (.log, .json, .jsonl, .txt, etc.)

Supported Formats

JSON

{"time":"2025-01-01T00:00:00Z","level":"info","message":"Server started","port":8080}

Logfmt

time=2025-01-01T00:00:00Z level=info msg="Server started" port=8080

Advanced Filtering

1. Right-click any value - Right-click on a log message or any JSON field value to open the filter menu
2. Include/Exclude - Choose to show only logs with that value, or hide logs with that value
3. Filter chips - Active filters appear as chips below the toolbar
   • Green chips = include filters
   • Red chips = exclude filters
   • Click a chip to toggle it on/off
   • Click × to remove a filter
4. Add Filter button - Manually create filters for any field

Example: To hide all "http request" logs, right-click on a message containing "http request" and select "Exclude".

Tip: File path values support both left-click (opens the file) and right-click (filter menu with an additional "Open file" option).

Configuration

Access via VSCode Settings → "Slog Viewer":

License

MIT