LogTrace Extension
A VS Code extension for displaying XML-based log files as interactive tables.
Features
- Default Log Viewer: .log files automatically open in table view by default
- View Toggle Button: Toggle button in VS Code editor title bar for easy view switching
- Log Table View: Convert XML-formatted log files into readable tables
- High Performance: Optimized for handling large log files with millions of entries
- Virtual Scrolling: Smooth scrolling through large datasets without performance degradation
- Minimalist Interface: Clean table view without distracting headers or controls
- Context Menu Integration: Right-click on .log files for additional options
- Structured Data Display: Shows datetime, log level, process/thread IDs, file location, and content
- Interactive Interface: Click on content cells to expand/collapse full text
- Color-coded Log Levels: Different colors for Info, Warning, Error, and Debug levels
- Memory Safety: Limits display to 1M entries to prevent memory issues
- Auto-refresh: Updates automatically when log files are modified
- In-Page Search: Built-in floating search window with VS Code-style interface
- Advanced Filtering: Powerful filtering system with multiple criteria
New Search & Filter Features
Floating Search Window
- VS Code-Style Interface: Familiar search experience with floating overlay
- Non-Intrusive Design: Search window doesn't cover the main log display
- Real-time Search: Results update as you type
- Search Highlighting: Matched text highlighted in yellow within log entries
Search Controls
- Keyboard Shortcuts:
Ctrl+F to open, F3/Shift+F3 to navigate results
- Navigation Buttons: Previous/Next buttons for easy result browsing
- Search Options: Case-sensitive and whole-word search options
- Result Counter: Shows current position and total matches (e.g., "3 of 27")
Search Scope
Searches across all log entry fields:
- DateTime, Log Level, Process/Thread IDs
- Module information, File names, Line numbers
- Complete log content text
Advanced Filter Window
- Multi-Criteria Filtering: Filter by log level, content, file name, and module
- Real-time Results: Instant filtering with entry count display
- Keyboard Shortcuts:
Alt+Shift+F to open filter window
- Persistent Filters: Filters remain active until manually cleared
- Search Integration: Search works within filtered results
Filter Options
- Log Level: Filter by Error, Warning, Info, or Debug levels
- Content Text: Filter entries containing specific text
- File Name: Filter by source file name
- Module Name: Filter by module name (if available)
Large File Handling
- File Size Detection: Warns when opening files >100MB
- Entry Limit: Safely handles up to 1,000,000 log entries
- Optimized Parsing: Pre-compiled regex patterns for faster processing
- Memory Management: Prevents browser crashes with large datasets
- Efficient Rendering: Only renders visible rows plus a small buffer
- Smooth Performance: Maintains 60fps even with millions of entries
- Dynamic Row Heights: Supports expandable content cells
- Memory Efficient: Minimal DOM elements regardless of data size
Advanced Filtering
- Streamlined Interface: Focus purely on log data without distracting controls
- Maximum Screen Space: All available space dedicated to displaying log entries
- Clean Design: Minimalist approach for better readability
Usage
Automatic Table View
- Simply open any
.log file in VS Code
- The file will automatically display as an interactive table
- No additional commands or setup required!
Manual Command (Alternative)
- Open Command Palette (
Ctrl+Shift+P)
- Type "LogTrace: Show Log as Table"
- Select the command while having a .log file active
Switching Views
- Editor Title Button: Click the preview button (👁️) in the VS Code editor title bar (right side of the tab)
- Command Palette: Use "LogTrace: Toggle Raw/Table View" command
- Editor Tab Menu: Right-click on the editor tab and select "Reopen Editor With..."
- Bi-directional Switch: Works from both table view and raw text view
Navigation & Controls
- Virtual Scrolling: Smooth scrolling through the entire dataset
- Content Expansion: Click on any content cell to expand/collapse full text
- Clean Interface: Maximized screen space for log data viewing
- For files >100MB, allow extra loading time
- Virtual scrolling provides smooth navigation regardless of data size
- Content expansion works on individual cells without affecting scrolling performance
This extension supports XML-formatted log files with the following structure:
<Logs>
<Log>
<HEAD>
<DT>2025/01/01 12:59:26.964</DT>
<LL>03</LL>
<LN>Info</LN>
<PID>00002694</PID>
<TID>00002698</TID>
<MID>0180</MID>
<GID>00000000</GID>
<FILE>BackupServer.cpp</FILE>
<LINE>15</LINE>
</HEAD>
<CONT>Log message content</CONT>
</Log>
</Logs>
Table Columns
- #: Entry number
- DateTime: Timestamp of the log entry
- Level: Log level (Info, Warning, Error, Debug)
- PID: Process ID
- TID: Thread ID
- MID: Message ID
- Module: Module name (if available)
- GID: Group ID
- File: Source file name
- Line: Line number in source file
- Content: Log message content
Include if your extension adds any VS Code settings through the contributes.configuration extension point.
For example:
This extension contributes the following settings:
myExtension.enable: Enable/disable this extension.myExtension.thing: Set to blah to do something.
Known Issues
Calling out known issues can help limit users opening duplicate issues against your extension.
Release Notes
Users appreciate release notes as you update your extension.
1.0.0
Initial release of ...
1.0.1
Fixed issue #.
1.1.0
Added features X, Y, and Z.
Following extension guidelines
Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
Working with Markdown
You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
- Split the editor (
Cmd+\ on macOS or Ctrl+\ on Windows and Linux).
- Toggle preview (
Shift+Cmd+V on macOS or Shift+Ctrl+V on Windows and Linux).
- Press
Ctrl+Space (Windows, Linux, macOS) to see a list of Markdown snippets.
Enjoy!
