How to Set Up Console Ninja in VS Code

Updated

Console Ninja is a VS Code extension that shows console.log output and runtime errors inline, right next to the line of code that produced them. To set it up, install the extension from the VS Code Marketplace, open a JavaScript or TypeScript project, add a console.log statement, and run your code — the output should appear next to the relevant line rather than only in the Debug Console or terminal.

This guide covers the installation path, what you need in place before it works, how to verify the inline output, and the common reasons nothing shows up.

What you need before starting

  • VS Code installed and running.
  • A JavaScript or TypeScript project open in the editor. Console Ninja targets JS/TS runtime output, so a project in another language won't produce inline logs.
  • A way to run that code — a Node.js script, a dev server, a test runner, or a debug session. Console Ninja reads output from a running process; it does not execute your code for you.

Install the extension

  1. Open VS Code.
  2. Go to the Extensions view (the square icon in the Activity Bar, or Ctrl+Shift+X / Cmd+Shift+X).
  3. Search for Console Ninja.
  4. Select the extension published for console-ninja.com and click Install.
  5. Reload the window if VS Code prompts you to.

You can also install it from the command line with the VS Code CLI using the extension identifier shown on its Marketplace page.

Run your project and add a log

  1. Open a JS or TS file inside your project.
  2. Add a log statement on a line you can easily watch, for example:
const total = items.reduce((sum, item) => sum + item.price, 0);
console.log(total);
  1. Start your code the way you normally would — node index.js, your dev server, or a VS Code debug session.

Expected result: the value of total appears inline, next to the console.log line, instead of (or in addition to) appearing in the terminal or Debug Console. Runtime errors are surfaced the same way, next to the line that threw them.

Verify it's working

Check these three signals:

Signal What it means
A value appears next to the console.log line Inline output is active
An error message appears next to a throwing line Runtime error capture is active
Output still appears in the terminal/Debug Console Your normal logging is untouched — Console Ninja adds to it, it doesn't replace it

If you see the first two, setup is complete. If you only see terminal output, move to the next section.

Common reasons inline output doesn't appear

  • The process isn't running. Console Ninja needs a live runtime. If your script already exited, there's nothing to capture.
  • The file isn't part of the running process. Logs in a file that your app never imports or executes won't produce output.
  • You're running outside VS Code's reach. Code executed in a separate terminal, a container, or a remote environment may not connect unless that environment is set up for it.
  • The extension needs a reload. After a fresh install, reload the VS Code window before expecting inline output.
  • Wrong language or runtime. A non-JS/TS project won't produce inline logs.

Where to go next

The extension's Marketplace listing and the console-ninja.com site are the authoritative sources for current capabilities, supported runtimes, and any PRO features — check the PRO features page for what's included beyond the base extension, since feature sets and terms can change.