Inspector Client

Use the debugger to pause execution and step through the code that you're running on the device or to evaluate expressions in the console. If you debug with the Chrome DevTools inspector client, you can use advanced features such as heap snapshots.

When MagicScript applications run in debug mode, an internal websocket server is started that exposes the V8 inspector protocol. Set up port forwarding by default using the magic-script run command or manually through Magic Leap Device Bridge (MLDB) to allow remote debugging of apps with any client that uses this protocol. Two common clients are Chrome Developer Tools and Visual Studio Code.

Starting the Server

The magic-script build command sets the debug flag in the digest file by default. This flag is required to enable runtime debugging.

The magic-script run command runs the process on the device with mldb launch and watches the output of mlbg log for a line specifying the debug port on the device.

Once the debug port is identified, the magic-script run command calls mldb forward <port number> to forward the port to the host machine.

Starting with a Fixed Port

The port is randomly selected by the operating system on the device, but can be manually specified via the INSPECTOR_PORT environment variable when launching the process.

You cannot set the port using magic-script run at this time, but you can use mldb directly.

For example, launch your app with mldb launch -v INSPECTOR_PORT=9229 --auto-net-privs $APPNAME to use the same debug port as node.js. Then run mldb forward tcp:9229 tcp:9229 the first time to setup the port forward to the host.

Connect to an Inspector Client

To debug with the inspector client that's part of the Google Chrome™ browser or Visual Studio Code, you first have to connect to the inspector client.

To connect to the Chrome DevTools inspector client:

  • Copy the URL returned by magic-script run and paste it into the address bar. This is the default workflow.

  • If you started the server with port 9229, you can enter chrome://inspect in the address bar, and click Open dedicated DevTools for Node. Only one app can be debugged at a time on this port.

    magicscript-debug-devtools-9229

    Note that while the DevTools UI displays Node.js, MagicScript is running on the device. MagicScript uses the same debugging protocol and the same port (9229).

To connect to the Visual Studio Code inspector client:

It it also posssible to debug in VSCode. Add the following content to .vscode/launch.json

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach to MagicScript",
"address": "localhost",
"port": 9229,
"protocol": "inspector",
"localRoot": "${workspaceFolder}",
"remoteRoot": "/"
}
]
}
  1. Ensure the port number matches the port number either returned from the magic-script run command or the port number you set with MLDB.

  2. With your project open in Visual Studio Code, launch the debugger.

Debug with Inspector

Inspector clients have more features than can be covered here. See the JavaScript and memory sections in your inspector client documentation for more details. Topics related to HTML, CSS, or browser networking does not apply to MagicScript debugging.

View console logs

MagicScript's runtime includes a global print function that writes its arguments to the log read by MLDB.

Alternatively, you may use console.log(), and the results appear in the inspector's console pane.

Live Edit Code

Depending on your inspector client, you may be able to live edit your MagicScript app. The V8 inspector protocol includes limited, built-in support to live edit your code.

To verify if you can live edit code, change the update handler to log the delta. If you can live edit code, logs print out.

This does not persist changes back to your source files and is only for the current application session.