Using VS Code's debugger with Obsidian, and setting up to attach it to an existing Chrome instance.

Running VS Code's Debugger

Visual Studio Code (VS Code) has some debugging tools built into it that are very similar to some of the developer tools built into your browser. By using these debugging tools, you gain access to breakpoints within the editor, making debugging that little bit easier.

To run the debug tools in VS Code for Obsidian code, make sure you have opened the Rock.code-workspace workspace in VS Code. The workspace will include configurations for debugging (among other things), so if you (1) click the Run and Debug icon on the action bar, then (2) click the dropdown to choose which debugger configuration to use, then click the green arrow to start running it.

Start the debugger

There are currently 4 different configurations listed:

We currently need to have separate debuggers for the Obsidian Framework and for the Obsidian Blocks projects. In addition to needing to choose the project you're debugging, you can choose between starting a new browser and debugging there, or attaching to an existing browser with tabs already opened to their local Rock instance.

Note: attaching to an existing browser requires that the browser has been started with remote debugging on, which doesn't happen by default. There is a section below that describes how to set up your system so that it always starts Chrome with the remote debugger port open.

Using the Debugger

To create breakpoints, click to the left of the line number of the line.

In the sidebar and the bottom panel, you'll find familiar tools: in-scope variables, watch, call stack, loaded scripts, breakpoints, a console, and step controls.

If you have questions about how any of these work, the best place to look is probably the VS Code documentation.

Set Up Chrome for Remote Debugging

In order to run Chrome with the remote debugger port open, you need to edit the properties of the shortcut you use to open your browser. If you're running Windows 11, you can't directly edit the shortcut on your taskbar. Instead, you'll need to edit a different shortcut, run Chrome from that shortcut, then pin the open Chrome to the taskbar.

If your shortcut is on the desktop, jump to the paragraph right after the next picture. Otherwise, if your only non-taskbar shortcut(s) to Chrome is in the start menu, then you'll need to right-click on the shortcut and click "Open file location". If you're inside "All apps", you'll find that option under the "More" submenu.

While viewing the folder or the desktop, right-click the shortcut and click Properties. On Windows 10, you can also do this to your taskbar shortcut if Chrome is closed and you Shift + Right-Click and then click Properties.

Inside the properties window, open the "Shortcut" tab. Then, inside the Target box, append the following to the end: --remote-debugging-port=9222 -- "%1" (make sure to include the space at the front).

Click OK, and now when you run Chrome via that shortcut, you'll be able to attach remote debuggers to it. As mentioned earlier, once Chrome is running, you can pin it to your taskbar to have a taskbar shortcut that can start Chrome with these options.