Log Analyzer VSCode Extension

A powerful log analysis tool for VSCode that provides advanced log viewing, searching, and AI-powered analysis capabilities.

Features

• Local Log File Loading: Load and view local log files with optimized performance for large files
• Remote Log Download: Download and analyze remote log files from URLs
• Advanced Search: Search and highlight keywords with navigation between matches
• Quick Highlight: One-click highlighting for WARN and ERROR messages
• Alibaba Cloud DashScope Integration: Native support for Qwen-Turbo model
• Large File Optimization: Improved handling of files over 10MB with smart truncation
• Enhanced Search: Integrated search UI with hit counting and navigation
• One-click AI Context Analysis: Specialized right-click menu within the log viewer for instant AI help
• Flexible URL Monitoring: Dynamic URL input popups when running tasks

Installation

From Source

1. Clone this repository
2. Navigate to the extension directory
3. Install dependencies:

   npm install
   

4. Compile the extension:

   npm run compile
   

5. Package the extension:

   vsce package
   

6. Install the .vsix file in VSCode

From VSCode Marketplace

Coming soon!

Usage

Basic Usage

1. Open the Command Palette (Ctrl+Shift+P)
2. Type "Log Analyzer" and select "Open Log Analyzer"
3. Use the toolbar buttons to load log files or use commands

Loading Log Files

Local Files:

• Click "Load Local File" button
• Or use command: Log Analyzer: Load Local Log File
• Select your log file from the file dialog

Remote Files:

• Click "Load Remote File" button
• Or use command: Log Analyzer: Load Remote Log File
• Enter the URL of the remote log file

Task & URL Monitoring

1. Click ▶ 运行任务 button in the top toolbar
2. A URL input popup will appear:
   • Type or paste the destination URL
   • Press Enter to start Chrome monitoring
3. View real-time logs in the bottom "Task Monitor" panel

Searching and Highlighting

Search:

• Click "Search" button or press Ctrl+F
• Enter your keyword and press Enter
• Use Next/Previous buttons to navigate between matches

Quick Highlight:

• Click "Highlight WARN" to highlight all warning messages
• Click "Highlight ERROR" to highlight all error messages

AI Analysis

Method 1: Toolbar

1. Click the "Ask AI" button on the toolbar
2. Use the dialog to type your query

Method 2: One-click Context Analysis (Recommended)

1. Select text within the log viewer panel
2. Right-click on the selected text
3. Click "一键问AI" from the custom menu
4. The selection will be automatically pasted into the AI dialog for analysis

Method 3: VSCode Context Menu

1. Select text in any code editor
2. Right-click and choose Ask AI About Selection

Configuration

The extension can be configured through VSCode settings:

{
  "logAnalyzer.aiApiKey": "your-api-key-here",
  "logAnalyzer.downloadDirectory": "./downlogs",
  "logAnalyzer.maxDisplaySize": 10485760,
  "logAnalyzer.chromePath": "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
  "logAnalyzer.pageUrl": "http://www.baidu.com"
}

Settings

• logAnalyzer.aiApiKey: API key for AI analysis (required for AI features)
• logAnalyzer.downloadDirectory: Directory where remote logs are downloaded
• logAnalyzer.maxDisplaySize: Maximum file size to display in bytes (default: 10MB)
• logAnalyzer.chromePath: Path to your Chrome executable for task monitoring
• logAnalyzer.pageUrl: Default/initial URL shown in the task start popup

Commands

• logAnalyzer.openPanel: Open the Log Analyzer panel
• logAnalyzer.loadLocalFile: Load a local log file
• logAnalyzer.loadRemoteFile: Load a remote log file from URL
• logAnalyzer.searchKeyword: Search for keywords in the log
• logAnalyzer.askAI: Ask AI about selected text
• logAnalyzer.highlightWarn: Highlight all WARN messages
• logAnalyzer.highlightError: Highlight all ERROR messages

Key Bindings

• Ctrl+F (or Cmd+F on Mac): Open search dialog

Development

Prerequisites

• Node.js 16+
• npm
• VSCode
• vsce (VSCode Extension CLI)

Building

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch for changes
npm run watch

Testing

# Run tests
npm test

Packaging

# Package extension
vsce package

File Structure

.
├── src/
│   ├── extension.ts           # Main extension entry point
│   ├── LogAnalyzerPanel.ts    # Webview panel management
│   ├── LogAnalyzerManager.ts  # Core functionality
│   └── utilities/
│       ├── getUri.ts         # URI utilities
│       └── getNonce.ts       # Security utilities
├── webview/
│   ├── styles/
│   │   └── main.css          # Webview styles
│   └── scripts/
│       └── main.js           # Webview scripts
├── package.json              # Extension manifest
├── tsconfig.json            # TypeScript configuration
└── README.md                # This file

Original Python Tool

This VSCode extension is based on the original Python log analyzer tool by Jose. The original tool provided:

• PySide2 GUI interface
• Advanced log downloading with caching
• Multi-threaded downlogs
• AI integration with Alibaba Cloud DashScope
• Optimized large file handling

This VSCode extension aims to bring the same powerful functionality to the VSCode environment with additional benefits:

• Integration with VSCode's ecosystem
• Better performance and memory management
• Modern web-based UI
• Extensibility through VSCode APIs

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have suggestions, please:

1. Check the Issues page
2. Create a new issue with detailed information
3. Include steps to reproduce any bugs

Changelog

v1.2.0

• New Feature: Added specialized Webview right-click menu with "One-click Ask AI".
• New UX: Implementation of interactive URL input dialog when starting tasks.
• Config: Extracted chromePath and pageUrl settings for better environment support.
• Fix: Resolved issue with the context menu hijacking where right-click was disabled.
• Improvement: Automatic content passing from selection directly to analysis logic.

v1.1.0

• New Feature: Added integrated search UI with "Next/Previous" navigation and match counter.
• New Feature: Added interactive AI analysis dialog within the webview.
• Optimization: Switched AI backend to Alibaba Cloud DashScope (Qwen-Turbo) for better performance.
• Optimization: Improved large file loading with automatic tail-truncation and status notification.
• UX: Added status bar notifications and information messages for key actions.
• Fix: Improved remote log download reliability and error handling.

v1.0.0

• Initial release
• Basic log file loading and viewing
• Search and highlight functionality
• AI integration
• Remote log downloading
• Large file optimization