Debug Marker Map

Debug Marker Map is a VS Code extension designed to create, track, and manage structured debug log/alert markers (e.g., [DM.LOG][#0001]) in JavaScript and TypeScript projects — specifically engineered for massive files (50,000+ to 500,000+ lines of code).

✨ Features

• 🏷️ Automatic Sequential ID Tagging: Assigns unique, padded IDs (#0001, #0002) to every marker for seamless identification and tracking.
• 🎯 Context-Aware Scope Detection: Automatically detects and embeds the enclosing Function, Method, or Class name into markers (e.g., [DM.LOG][#0001][UserService.getUser]). Powered by VS Code's Language Server AST — works instantly on files of any size (50,000+ lines) with zero performance impact. Includes a heuristic fallback for files without Language Server support.
• 🌲 Visual TreeView Sidebar: Lists all markers sorted by line number with distinct states for Active vs Commented-out markers (grayed out), optional Scope tag display, and dynamic Activity Bar badge indicator.
• 🧠 Smart Code Analysis & Safe Placement:
  • Auto-extracts complex property chains (user.info.name), optional chaining (?.), array indices (items[0]), and cross-line property expressions.
  • Automatically identifies statement boundaries: inserts markers after function calls, inside if blocks, or before return/throw statements without breaking code syntax.
• ⚡ Large File Optimization (50,000+ Lines):
  • Fast String Pre-filter ([DM.): Ignores 99.9% of non-marker lines before running regex, boosting scan speeds by 100x.
  • Save-Only Refresh Mode: Eliminates typing lag by updating the sidebar only when saving (Cmd + S).
• 🔍 Instant Search & Filter: Quickly filter markers by ID, variable name, or function/scope name via the Search button (input box). Cancelling does nothing; clearing the query restores the previous expand/collapse state.
• 📂 Show All Open Files (opt-in): Enable debugMarkerMap.showAllOpenFiles to list markers from every open JS/TS tab, grouped by file in tab order. Files show (count) filename, the active file has a green dot icon, other files a blue file icon with a blue name. Expand/Collapse state is remembered per file, with Expand All / Collapse All toolbar buttons.
• 👁️ Show Plain Console/Alert (opt-in): Toggle debugMarkerMap.showPlainLogs (via Sidebar eye icon, Quick Settings, or VS Code Settings) to also detect, navigate, comment, uncomment, and remove plain console.log/info/warn/error/debug and alert() statements (including multi-line statements) alongside [DM.] markers.
• 📋 Copy to Clipboard: Copy pre-formatted marker statements to clipboard without indentation for quick pasting.
• ✂️ Smart Paste & Auto-increment: Automatically detects pasted markers; preserves IDs for Cut-Paste / non-conflicting IDs, and auto-increments IDs (maxId + 1) to eliminate duplicates.
• 🛠️ Batch & Individual Utilities: One-click Comment All, Uncomment All, Remove All, and Duplicate ID detection.
• ⚙️ Sidebar Quick Settings Menu: Instant 1-click toggle menu directly on the Sidebar Toolbar ($(gear)) to switch Scope Detection, Include Class Name, Show Scope in TreeView, Insert Empty Lines, Show All Open Files, Show Plain Console/Alert, or open Full Settings without leaving your code.
• ⚙️ Customizable Context Menu: Hide or show individual commands on the editor right-click menu.

⚙️ Highlighted Settings

Customize extension behavior via the ⚙️ Quick Settings button on Sidebar ($(gear)) or VS Code Settings (Cmd + , ➔ search for @ext:huynhduong91.debug-marker-map):

• debugMarkerMap.includeContext (Default: false)
  Automatically detects and includes the enclosing Function, Class, or Method name in marker tags (e.g., [DM.LOG][#0001][getDetail] data: ...).
• debugMarkerMap.includeClassName (Default: false)
  Toggle whether to include the enclosing Class or Object Container name in the detected scope tag (e.g., [ProductService.getDetail] when true, or just [getDetail] when false). Quick toggling available in the Quick Settings menu.
• debugMarkerMap.showScopeInTreeView (Default: true)
  Displays the Function/Scope name alongside marker ID and variable in the Sidebar Tree View.
• debugMarkerMap.showAllOpenFiles (Default: false)
  Show markers from all open JS/TS editor tabs grouped by file in tab order (active file expanded, others collapsed). When false, only the active file is shown. Toggle in Quick Settings.
• debugMarkerMap.showPlainLogs (Default: false)
  Show and operate on plain console.log/info/warn/error/debug and alert() statements (without [DM.] format) in the Sidebar Tree View. Toggle via the Sidebar eye button or Quick Settings.
• debugMarkerMap.plainLogTypes (Default: ["log", "info", "warn", "error", "debug", "alert"])
  Select which plain console/alert types to detect when showPlainLogs is enabled.
• debugMarkerMap.refreshOnSaveOnly (Default: true)
  Updates the sidebar only when saving the file (Cmd + S). Essential for zero-latency editing in 50,000+ line files.
• debugMarkerMap.insertEmptyLines (Default: false)
  Automatically inserts an empty line above and below inserted markers for cleaner visual separation.
• debugMarkerMap.show* (Default: true)
  Individual toggle settings (showInsertLog, showCopyLog, etc.) to customize which commands appear in your right-click context menu.
• debugMarkerMap.markerSeparator (Default: : )
  Customizes the separator between variable name and value (e.g., : vs =>).
• debugMarkerMap.idPadding (Default: 4)
  Sets the zero-padding length for marker IDs (4 ➔ #0001).
• debugMarkerMap.autoIncrementPastedMarker (Default: true)
  Automatically increments marker ID on paste if duplicate ID is detected, while preserving IDs for Cut-Paste.

📄 License

MIT