-
Notifications
You must be signed in to change notification settings - Fork 51
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");
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.
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
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