Experiments with the SPIKE App Debug Mode

A few months ago while doing several experiments I did a more thorough analysis of the SPIKE Prime app itself. Generally, I am more than interested in how other developers design software architecture and also have a few hobby projects in mind where knowing the bits and bolts is essential.

This is how I learned about the SPIKE App Debug Mode, which also works in the Robot Inventor App – working with both hubs, the LEGO Mindstorms Robot Inventor (51515) and the SPIKE Prime (45678) hubs.

Quick architecture overview

The applications follow a modern application design pattern: the app itself was coded using React.js framework using JavaScript (TypeScript) and is rendered in a browser, like the one you are reading this post in. The trick is that the app logic itself is packaged into an executable that is downloaded from the respective appstore, like Microsoft AppStore for my Windows laptop. The Electron framework that enables this is also widely used – such as the pandemic superstar Microsoft Teams application or Slack.

For a long time, this HTML5 app as an executable concept had a caveat with functionalities that the browser itself cannot accomplish, such as direct hardware (e.g. USB or Bluetooth) access. There are multiple approaches to circumvent including a precompiled binary such as WebAssembly (wasm). There are new standards for direct browser BLE access, yet last time I have checked LEGO used the Electron callout for binary access to precompiled dotnet dll’s. That is a perfect solution as well.

Enabling the Debug Mode

Warning: we will be tweaking directly with internal files – use it on your own risk as you might change things that would prevent the app from starting.

Head to the Roaming directory of the installed app and open the settings.json file in a text editor. Make sure the app is not running.

• C:\Users\user\AppData\Local\Packages\LEGOEducation.SPIKELEGOEducation_by3p0hsm2jzfy\LocalCache\Roaming\SPIKE\
• C:\Users\user\AppData\Local\Packages\TheLEGOGroup.LEGOMINDSTORMSInventor_m36angppq0g76\LocalCache\Roaming\MINDSTORMS_ROBOTINVENTOR\

Change the line or create a new if there is no such line for ui.debug key and set it to true.

Start the app and the chocolate factory of Willy Wonka will open for you, showing up an extra Debug menu with 3 functions and a debug toolbar with 14 functions in the bottom.

The debug functions allow you to look behind what is running on your favourite LEGO platform.

Debug Functions in order of my choice

Menu: Toggle Developer Tools

Opens up the standard Chrome Developer tools, that enables full inspection of the DOM tree, React component explore if extension is installed and debug console.

In the debug console, the compiled pyton code is logged once you start downloading the app to the hub.

Footer: Open url in browser

The application itself runs in an Electron container – Mac or Windows executable of a browser without gadgets like an url bar. Still behind there is a web server -probably a node- that makes sure that react app runs smoothly.

I was wondering for a while whether this is really necessary as both the node server and the “frontend” uses the same chrome engine, still for sake of simplicity and development time, I would chose the same approach.

This enables you to open up the app core outside of the Windows/Mac app in a regular web browser, while the app is running and access most of the functionalities. Rather a nice to have, still might be a good starting point later.

Menu: Reload and Menu: Force Reload

Is a neat developer option that has probably less importance as the app in the released state is quite stable. Reloads the app within the Electron container to clean up state.

Footer: Toggle Canvas Background

Toggles the background dot pattern of the app canvas – useful for screenshot purposes.

Footer: Download to SVG

Useful for exporting the SVG graphics directly from the canvas. Can only be used if you open a separate chrome window.

Footer: Dump canvas to clipboard, Dump program XML to clipboard, Export block IDs in toolbox

The app itself uses the MIT Scratch framework, so a developer can access directly the blocks here.

I really appreciate this function as I was experimenting with this awesome toolkit and library in the EV3TreeVisualizer project as well.

Footer: Check for content updates

Content (lessons) check – probably useful if you change the content channel to a non-official one.

Footer: Dismiss all toasts

Probably the developers had quite a lot of issues with stuck notification (toast) messages.

Footer: Change log level

You can check in the developer tools window what actions are performed. In the console the the app regularly adds debug information. You can manually set what level of information you are interested in – Error, Warning or Info.

Footer: Connect with web BLE

Interesting one – could not get it working. Probably a future direction to use the browser bluetooth access instead of the native binary support LEGO had to include.

Footer: Change selected product

Manual switch between SPIKE Prime and SPIKE Essential and all.

Footer: Show doodle blocks

Rather nice one.

Doodle blocks do not generate code, yet are used for lesson tutorials. An awesome way to create your own education content using the doodle blocks for pseudocoding.

Footer: Log line graph data

Opens the line graph ware.

Footer: Mock platform

Lets you change which platform the browser thinks it runs on. Could not find the relevance.

Conclusion

Happy hacking and take care!

Let me know if you find any new options or make good use of this.

LEGO is continuously trying to create new and better ways to code their programmable bricks and with the SPIKE Essential – Prime intercompatibility finally started to move towards the LEGO learning continuum I am waiting for quite a while.

Great job LEGO!