Introduction

Console Log Helper is a VSCode extension for quickly inserting, deleting and commenting console.log statements while debugging.

Unlike naive "insert on the next line" tools, the extension parses your code's AST and places console.log where it actually belongs.

Features

• Smart insertion: AST analysis anchors the log after declarations, before return statements, etc.
• Multi-language: JavaScript, TypeScript, JSX, TSX, Vue, HTML, Svelte, Astro
• Multi-cursor batch insertion: select several variables and insert all logs at once
• Auto block completion: single-expression arrow functions and braceless bodies get wrapped with {}; empty blocks expand to multiline
• One-key delete: remove all template-generated console.log lines in the file
• One-key comment / uncomment: batch toggle, supporting both // and /* */ forms
• Custom templates: fully configurable log format with snippet cursor control
• Clipboard extraction: copy template-extracted content to clipboard after insertion

Supported File Types

Type	Notes
JavaScript / TypeScript	Full-file parsing
JSX / TSX	React component syntax supported
Vue / HTML	The <script> block containing the selection is extracted and parsed
Svelte / Astro	<script> block extraction

Placement Examples

Select userName and press Ctrl+Alt+L:

// Declaration: inserted after the statement
const userName = getUser()
console.log(userName, `userName`)

// Return statement: inserted before return
function getName() {
  console.log(userName, `userName`)
  return userName
}

// Single-expression arrow function: auto-wrapped, return value preserved
const fn = (userName) => {
  console.log(userName, `userName`)
  return userName.trim()
}