Debugging with DevTools

Open Firefox DevTools to inspect the DOM, styles, requests, and performance of the UI running inside Unity.

Embedded UI console.log, console.warn, console.error, and uncaught errors also appear in the Unity Console with a [Browser] prefix. Start there when you only need logs.

Open DevTools

1. Enter Play mode in Unity.
2. Wait for the UI to load.
3. Run:

Tools > Loom > Open Browser DevTools

Loom opens Firefox’s remote debugging page. Add 127.0.0.1:6080 under Network Location, select it in the sidebar, and choose Inspect next to the Loom page.

What to inspect

• Inspector: DOM structure, CSS rules, layout, computed styles.
• Console: frontend errors, logs, rejected action promises.
• Network: loaded scripts, CSS, fonts, images, and failed requests.
• Performance: frontend rendering and scripting cost.

Debug bridge state

Log bridge state from a component while developing:

import { createEffect } from 'solid-js';
import { useBridge } from '@loomgui/bridge';

const bridge = useBridge();

createEffect(() => {
  console.log('screen', bridge.currentScreen);
});

Debug actions

Actions return promises. Wrap expected failures:

try {
  await bridge.startGame();
} catch (error) {
  console.error('startGame failed', error);
}

If an action does not run, check both consoles: DevTools may report a JavaScript error, while the Unity Console may report a C# exception.

When DevTools will not open

Check that Enable Dev Tools is on in the LoomUI Inspector. Loom applies this setting the first time the UI starts after you open the Unity Editor, so after turning it on, quit and reopen Unity, then enter Play.

DevTools listens on port 6080. If another process is using that port, stop it and reopen Unity.

Also run Loom Doctor to verify Firefox is available.