Debugging with DevTools

Loom can expose the running UI to browser DevTools. Use this to inspect DOM, styles, console logs, network requests, and frontend performance.

Open DevTools

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

Loom -> Open Browser DevTools

Loom opens Firefox attached to the live UI.

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);
});

Remove noisy logs before shipping.

Debug actions

Actions return promises. Wrap expected failures:

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

If an action never appears to run, check the Unity Console as well as DevTools. The call crosses into C#, so either side can report the useful error.

When DevTools will not open

Check LoomUI inspector settings:

• Enable Dev Tools should be on.
• Devtools Port should not conflict with another process.

Also run Loom Doctor to verify Firefox is available.