VS Code Apex + LWC Debug Helper

A Visual Studio Code extension that accelerates Salesforce Apex and Lightning Web Component (LWC) development workflows — instant debug log insertion, bulk log cleanup, smart selection, Salesforce CLI deploy, and Jest test execution, all from the editor context menu or keyboard shortcuts.

Features

1. Quick Debug Logging (Apex, JS/TS, Java)

Insert a TEMP_LOG debug statement on the line below the selected variable (or the word at the cursor when nothing is selected). Each inserted line embeds the file name and line number for easy log scanning.

• Add Log !!! — log label + variable value
• Add Log No Param !!! — log label only (no variable value printed)
• Add JSON Log !!! — pretty-print serialised log
  • JS/TS: JSON.stringify(myVar, null, 2)
  • Apex: JSON.serializePretty(myVar)

Multi-cursor support: all three commands work across multiple simultaneous selections. Insertions are applied bottom-to-top to keep line numbers stable. After insertion, the newly added lines are automatically highlighted and revealed in the editor.

Auto word detection: if no text is selected, the extension selects the word under the cursor before inserting the log.

Indentation-preserving: inserted lines match the leading whitespace of the source line.

2. Bulk Log Operations

• Add All Log !!! — uses the Babel AST pipeline to parse the entire active JS/TS file and inject a console.log at the entry of every function — named functions, arrow functions, class methods, object methods, and getters. Handles JSX, TypeScript, decorators, class properties, and private class members. The inserted log includes the function name and source line number.
• Remove Log !!! — scans every line of the active file and deletes all lines containing TEMP_LOG in one atomic edit, working bottom-to-top to avoid line-shift side effects.

3. Salesforce CLI Deploy

Deploy !!! opens (or reuses) a persistent terminal named DeployTerminal and runs:

sf project deploy start --ignore-conflicts --source-dir "<activeFile>"

Available in the context menu for: .js, .ts, .cls, .java, .xml, .html, .page, .css.

4. Jest Test Runner

Jest Test it !!! scans backwards from the cursor to find the nearest it('...') or describe('...') label, then runs:

node_modules/.bin/jest "<file>" -t "<testName>"

If no test block is found above the cursor, the entire test file is run. Uses the same shared DeployTerminal.

5. Dot-Chain Selection

Two commands for extending the current selection across dot-chained identifiers:

• Extend Forward Selection !!! — appends .nextToken to the right edge of the selection
• Extend Backward Selection !!! — prepends previousToken. to the left edge of the selection

If there is no active selection, the word at the cursor is selected first.

6. Smart Select

Smart Select performs intelligent, context-aware selection on the current line and copies the result to the clipboard:

When the right edge reaches the end of the line, the algorithm falls back to smartExtendLeft, which walks backward using the same boundary rules. Each invocation copies the result to the clipboard and flashes the selected text in the VS Code status bar.

7. Copy File Path

Copy Filename !!! copies the full absolute path of the active file to the system clipboard and shows a confirmation notification.

Commands & Context Menu

All commands are available via the Command Palette (Cmd/Ctrl+Shift+P). Most also appear in the editor right-click context menu, filtered by file extension:

Tech Stack

Runtime dependencies

Dev tooling

External CLI integrations

Architecture

User Input (Command Palette / Context Menu / Keybinding)
        |
        v
VS Code Extension API  (activation: onLanguage:apex, onCommand:*)
        |
        v
Command Dispatcher  (src/extension.ts — activate())
        |
   +----------+--------------------+------------------+
   |          |                    |                  |
   v          v                    v                  v
Text Editor  Babel AST Pipeline   Terminal Manager   Clipboard API
Operations   (parser/traverse/    (sf CLI / Jest)
(multi-       generator)
 cursor)
   |          |                    |
   v          v                    v
Document    Code                 Process
Edits       Generation           Output

Key design decisions

Module breakdown

src/extension.ts — central hub, exports activate() / deactivate(). Contains all command handlers: log insertion, log removal, bulk AST logging, deploy, Jest, selection helpers, Smart Select.

src/logger.ts — TypeScript compiler API utility for single-function log insertion (cursor-position based, used for targeted in-function logging).

For full design details see ARCHITECTURE.md.

Development

Prerequisites

• Node.js 18+
• VS Code 1.75+

Install dependencies

npm install

Compile

npm run compile      # one-shot build → out/
npm run watch        # incremental watch mode

Run in development

1. Open this repo in VS Code.
2. Press F5 to launch an Extension Development Host window.
3. Open an Apex (.cls) or JS/TS file.
4. Right-click in the editor or open the Command Palette (Cmd/Ctrl+Shift+P) to run any command.

Run tests

npm test

Package as VSIX

npm run package
# outputs: apex-lwc-debug-helper-<version>.vsix

Install the generated .vsix locally via Extensions: Install from VSIX... in the Command Palette.

Publish to the Marketplace

npx vsce login <publisher>   # one-time, requires an Azure DevOps Personal Access Token
npx vsce publish

See the VS Code publishing guide for creating a publisher and PAT.

Notes

• Best used in Salesforce projects containing Apex classes (.cls) and LWC JS/TS files.
• Deploy and Jest commands require the relevant CLI tools installed and available in PATH.
• The TEMP_LOG marker is intentionally distinctive — use Remove Log !!! to strip all temporary logs before committing.

License

MIT