Console Ninja is a Visual Studio Code extension that enhances the debugging experience by displaying console.log output and runtime errors directly within the code editor, adjacent to the corresponding lines of code. This eliminates the need to switch between the editor and external browser or terminal consoles, streamlining the development workflow for JavaScript and Node.js applications.

Key Features

Inline Log Display Shows console.log output and runtime errors next to the relevant code lines.

• Immediate visibility of logs and errors in the editor.
• Reduces context switching between editor and console.

Hover Tooltips Provides detailed information on logs and errors upon hovering.

• Displays log values, timestamps, error messages, and stack traces.
• Includes actionable icons for quick log management.

Log Viewer Offers a collapsible log viewer panel within VS Code.

• Summarizes and expands log entries for deeper inspection.
• Clickable links navigate directly to source code locations.

Search and Navigation Supports searching through log history and keyboard shortcuts.

• Quickly find specific logs or errors.
• Efficient navigation through log entries5.

Support for Multiple Runtimes Works with browser-based and Node.js applications, including frameworks like Express, Hapi, and Fastify.

• Compatible with most Node.js projects (Node v16.15.0+).
• Easily integrates with various development workflows.

Interactive Value Graphs Visualizes runtime data as structured graphs directly in the editor.

• Enhances understanding of complex data structures.
• Useful for debugging and data inspection.

MCP Server Integration Allows LLM agents (e.g., Copilot, Cursor) to access runtime logs and errors.

• Enables advanced AI-assisted development workflows.
• Supports configuration for multiple AI coding assistants.

Benefits

Streamlined Debugging Reduces time spent switching between editor and external consoles.

• Increases productivity by keeping all debugging information in one place.
• Makes error identification and resolution faster.

Enhanced Code Understanding Provides immediate, contextual feedback on code execution.

• Helps developers quickly grasp code behavior and issues.
• Facilitates learning and debugging for both beginners and experienced developers