Advanced Debug Mode

by mnaoumov
5
4
3
2
1
Score: 55/100

Description

Category: Coding & Technical Tools

The Advanced Debug Mode plugin extends Obsidian's native debugging capabilities by enabling easier toggling of debug mode and preserving detailed, long stack traces, even for asynchronous operations. It enhances error visibility, helping users trace complex execution flows across timers, promises, and events. The plugin also introduces DevTools access for mobile users, enables easier management of debug namespaces, and provides the ability to disable timeouts during long debugging sessions.

Reviews

No reviews yet.

Stats

33
stars
3,766
downloads
0
forks
379
days
31
days
64
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
2
total issues
0
open issues
2
closed issues
0
commits

Latest Version

README file from

Github

Advanced Debug Mode

Buy Me a Coffee GitHub release GitHub downloads

This is a plugin for Obsidian that enhances Obsidian debug mode.

Features

Obsidian Debug mode

The plugin adds an easy way to switch Obsidian debug mode on/off. When active, inline source maps will not be stripped from loaded plugins.

Long stack traces

Error stack traces are usually very limited and stack frames for function like setTimeout or addEventListener are usually not included, so sometimes it's difficult to find the root cause of the error.

The plugin tries to preserve long stack traces as much as possible.

Long stack traces

function foo1() {
  setTimeout(foo2, 100);
}

function foo2() {
  const intervalId = setInterval(foo3, 100);
  setTimeout(() => {
    clearInterval(intervalId);
  }, 150);
}

function foo3() {
  queueMicrotask(foo4);
}

function foo4() {
  requestAnimationFrame(foo5);
}

function foo5() {
  process.nextTick(foo6);
}

function foo6() {
  setImmediate(foo7);
}

function foo7() {
  Promise.resolve().then(foo8);
}

function foo8() {
  Promise.reject(new Error('Error from Promise')).catch(foo9);
}

function foo9() {
  Promise.resolve().finally(foo10);
}

function foo10() {
  const div = createDiv();
  div.addEventListener('click', foo11);
  div.click();
}

function foo11() {
  throw new Error('Error from foo11');
}

foo1();

Without the plugin you get the error in the console

Uncaught Error: Error from foo11
    at HTMLDivElement.foo11 (<anonymous>:47:9)
    at foo10 (<anonymous>:43:7)
    at <anonymous>

With the plugin you get

Uncaught Error: Error from foo11
    at HTMLDivElement.foo11 (<anonymous>:47:9)
    at foo10 (<anonymous>:43:7)
    at <anonymous>
    at --- addEventListener --- (0)
    at foo10 (<anonymous>:42:7)
    at --- Promise.finally --- (0)
    at foo9 (<anonymous>:37:28)
    at --- Promise.catch --- (0)
    at foo8 (<anonymous>:33:56)
    at --- Promise.then --- (0)
    at Immediate.foo7 (<anonymous>:29:21)
    at --- setImmediate --- (0)
    at foo6 (<anonymous>:25:3)
    at --- process.nextTick --- (0)
    at foo5 (<anonymous>:21:11)
    at --- requestAnimationFrame --- (0)
    at foo4 (<anonymous>:17:3)
    at --- queueMicrotask --- (0)
    at foo3 (<anonymous>:13:3)
    at --- setInterval --- (0)
    at foo2 (<anonymous>:6:22)
    at --- setTimeout --- (0)
    at foo1 (<anonymous>:2:3)
    at <anonymous>:50:1
Async long stack traces

Async long stack traces are the traces for async functions.

async function foo() {
  await bar();
}

[!WARNING]

The plugin adds async long stack traces only on desktop. Adding it to mobile is impossible due to the current JavaScript Engine limitations.

Async long stack traces might contain some duplicates.

When async long stack traces are enabled, the autocompletion in DevTools console stops working. It seems to be a bug in Electron.

Async long stack traces

function foo1() {
  setTimeout(foo2, 100);
}

function foo2() {
  const intervalId = setInterval(foo3, 100);
  setTimeout(() => {
    clearInterval(intervalId);
  }, 150);
}

function foo3() {
  queueMicrotask(foo4);
}

function foo4() {
  requestAnimationFrame(foo5);
}

function foo5() {
  process.nextTick(foo6);
}

function foo6() {
  setImmediate(foo7);
}

function foo7() {
  Promise.resolve().then(foo8);
}

function foo8() {
  Promise.reject(new Error('Error from Promise')).catch(foo9);
}

function foo9() {
  Promise.resolve().finally(foo10);
}

function foo10() {
  const div = createDiv();
  div.addEventListener('click', foo11);
  div.click();
}

function foo11() {
  barAsync1();
}

async function barAsync1() {
  await sleep(50);
  await barAsync2();
}

async function barAsync2() {
  await sleep(50);
  throw new Error('Error from barAsync2');
}

foo1();

Without the plugin you get the error in the console

Uncaught (in promise) Error: Error from barAsync2
    at barAsync2 (<anonymous>:58:9)
    at async barAsync1 (<anonymous>:52:3)

With the plugin you get

Uncaught (in promise) Error: Error from barAsync2
    at barAsync2 (<anonymous>:58:9)
    at async barAsync1 (<anonymous>:52:3)
    at --- async --- (0)
    at barAsync2 (<anonymous>:57:9)
    at barAsync1 (<anonymous>:52:9)
    at --- async --- (0)
    at enhance.js:1:13289
    at --- async --- (0)
    at barAsync1 (<anonymous>:51:9)
    at HTMLDivElement.foo11 (<anonymous>:47:3)
    at foo10 (<anonymous>:43:7)
    at <anonymous>
    at --- addEventListener --- (0)
    at foo10 (<anonymous>:42:7)
    at --- Promise.finally --- (0)
    at foo9 (<anonymous>:37:28)
    at --- Promise.catch --- (0)
    at foo8 (<anonymous>:33:56)
    at --- Promise.then --- (0)
    at Immediate.foo7 (<anonymous>:29:21)
    at --- setImmediate --- (0)
    at foo6 (<anonymous>:25:3)
    at --- process.nextTick --- (0)
    at foo5 (<anonymous>:21:11)
    at --- requestAnimationFrame --- (0)
    at foo4 (<anonymous>:17:3)
    at --- queueMicrotask --- (0)
    at foo3 (<anonymous>:13:3)
    at --- setInterval --- (0)
    at foo2 (<anonymous>:6:22)
    at --- setTimeout --- (0)
    at foo1 (<anonymous>:2:3)
    at <anonymous>:61:1

DevTools for mobile app

The plugin adds DevTools for the mobile app. This helps to debug the plugins without connecting mobile to the desktop.

DevTools

Debug namespaces management

Some plugins use debug library to conditionally show/hide console.debug messages.

The plugin adds an ability to manage those debug namespaces from the UI.

For more details, refer to the documentation.

Timeout long running tasks

There are some default timeouts for long running tasks. Sometimes those timeouts are being hit while you are debugging some code and staying on the breakpoint for too long.

The plugin allows to temporarily disable those timeouts to keep debugging.

Installation

The plugin is available in the official Community Plugins repository.

Beta versions

To install the latest beta release of this plugin (regardless if it is available in the official Community Plugins repository or not), follow these steps:

  1. Ensure you have the BRAT plugin installed and enabled.
  2. Click Install via BRAT.
  3. An Obsidian pop-up window should appear. In the window, click the Add plugin button once and wait a few seconds for the plugin to install.

Support

My other Obsidian resources

See my other Obsidian resources.

License

© Michael Naumov

Similar Plugins

info
• Similar plugins are suggested based on the common tags between the plugins.
Terminal
3 years ago by polyipseity
Integrate consoles, shells, and terminals.
Pieces for Developers
3 years ago by Pieces For Developers
Pieces' powerful extension for Obsidian-MD that allows users to access their code snippets directly within the Obsidian workspace
Open in Terminal
4 months ago by ChenFeng
Open your vault in a new terminal window or launch Claude Code, Codex CLI, or Gemini CLI from Obsidian
Logstravaganza
3 years ago by Carlo Zottmann
A simple Obsidian plugin that proxies `console.*()` calls and copies log messages and uncaught exceptions to a file in your vault.
HK Code Block
3 years ago by Heekang Park
Obsidian plugin developed by Heekang Park; Make code block looking good on reading view
Divide & Conquer
4 years ago by pseudometa
An Obsidian plugin that provides commands for bulk enabling/disabling of plugins. Useful for debugging when you have many plugins.
vConsole
2 years ago by Zhou Hua
Integrate vConsole for developers to facilitate the debugging of mobile plugins.
GitHub Integration
a year ago by Kirill Zhuravlev
Plugin that fetch your github stars into notes
Notice logger
2 years ago by @gapmiss
An Obsidian.md plugin for logging all notices to the developer console, with optional prefix & timestamp.
Plugin REPL
a year ago by readwithai
An in-note Read Evaluate Print Loop to execute JavaScript within Obsidian
YouTrack Fetcher
a year ago by Forketyfork
Obsidian plugin for creating notes out of YouTrack issues
GH Links Shortener
6 months ago by David Barnett
Obsidian plugin to set shortened link text for pasted GitHub URLs