Debugging Bloom HTML

Using a browser

The simplest way to something that is going on in Bloom's embedded browser is to right-click the page and choose "Open Page in Firefox". You can then use all of Firefox's debugging tools. You can also copy the URL and paste it into another browser (we often find Chrome's debugger works better).

Debugging in VSCode

Make sure your root folder is src/BloomBrowserUI. This will activate some debugging tools the team has configured (in src/BloomBrowserUI/.vscode/launch.json). Won't work with any other root folder (unless you copy it there).

Go to the debug tab in VSCode (4th icon in the black bar on the left). In the debug toolbar you should see a green triangle and next to it a combo box. If all is well it should contain options like "Launch in Firefox" and "Launch in Chrome". These will open a new window with the same contents as the current page showing in Bloom. You should be able to set breakpoints in VSCode, and generally use its tools.

Hints

If you change pages in Bloom while debugging, the url you get from Open Page in Firefox will no longer be valid, so Refresh will stop working. As long as Bloom is on the same page, you can use Refresh to load a new version of code etc. If you need to do something that is activated by a C# button, you can usually figure out what JavaScript the C# uses to start the process, and execute that in a console window. For example, to get the Add Page dialog to come up, run FrameExports.showAddPageDialog(false). A search through all C# files for invocations of RunJavaScript() will often reveal the command you need.