3. How can I debug Sema?

This page suggests some utilities and workflow conventions for debugging Sema.

You may setup VS Code built-in debugger to interactively inspect the execution flow and call stack through breakpoints (see below). The exception is debugging the audioEngine maxi-processor (i.e. the AudioWorklet processor) which is limited to the exception catching set on the side of the audio engine AudioWorklet node's messaging port and typical console.log.

A useful convention for logging to the console is to message DEBUG:class:method:

// console.log("DEBUG:il.worker:onmessage:catch");

VS Code's built-in debugger configuration (launch.json)

If you want to use the handy VS Code's built-in debugger with Sema (breakpoints, inspection)

"debug.allowBreakpointsEverywhere": true to the VS Code global settings.json

and here's the config for the debuggers {} launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/"
    }
  ]
}

In case you have problems with breakpoints check the following resources

https://github.com/Microsoft/vscode-chrome-debug#general-things-to-try-if-youre-having-issues

https://github.com/Microsoft/vscode/issues/52763

https://github.com/sveltejs/sapper-legacy.svelte.dev/issues/37

these will fix the "Breakpoint set but not yet bound" on the Svelte components hierarchy.

Svelte-devtools

Chrome extension for the Svelte javascript framework. It allows you to inspect the Svelte state and component hierarchies in the Chrome Developer Tools.

https://chrome.google.com/webstore/detail/svelte-devtools

Install this on the Chrome instance spawned by the VS Code debugger

Web-audio-inspector

Chrome extension adds a panel to Chrome Developer Tools that for inspecting the live web audio graph of a web page. This might be useful to inspect the connection of different WAAPI nodes such as the inputs, audio analysers or destination. There is a shortcoming though as there is no wrapper for AudioWorklet nodes.

https://chrome.google.com/webstore/detail/web-audio-inspector

Install this on the Chrome instance spawned by the VS Code debugger