# Debugging FiveM NUI with Chromium devtools

> Debug FiveM NUI and loading screens with the built-in Chromium devtools: localhost:13172 and the nui_devTools command, reading console errors, inspecting elements, watching NUI callbacks in the network tab, testing in a normal browser with mock messages, and a dev-server workflow.

Source: https://fam-tools.com/guides/fivem-nui-devtools-debugging · FAM Tools · published 2026-09-11 · updated 2026-09-11 · about 9 min

**Short answer.** With the game running, open `http://localhost:13172/` in a Chromium-based browser and pick your resource’s page, or run `nui_devTools` in the F8 console (developer mode required). Use Console for errors, Elements for layout, Network for NUI callbacks and missing files. Develop most of the UI in a normal browser with mocked messages, and test in game at the end.

## Key points

- Devtools: **http://localhost:13172/** while FiveM runs.
- Or `nui_devTools` in F8 (developer mode).
- JS errors appear only in the devtools console, not in F8.
- 404s in the Network tab usually mean a file missing from `files`.
- Build in a normal browser with mock messages; verify in game.

When a NUI page shows nothing, JavaScript errors are invisible in game and in the F8 console. The fix is the same devtools you use for websites: FiveM exposes Chromium’s remote debugging while the game runs, so you can see the console, inspect elements and watch every callback.

## Opening the devtools

1. Start FiveM and join your development server.
2. In Chrome or Edge, open `http://localhost:13172/`.
3. Click the page for your resource (its URL contains `cfx-nui-<resource>`).
4. Alternatively, type `nui_devTools` in F8 with developer mode enabled.

## What each tab tells you

| Tab | Use it for |
| --- | --- |
| Console | JavaScript errors, `console.log` output, running code against the live page |
| Elements | Why something is hidden, mispositioned or unstyled |
| Network | Missing files (404), NUI callback requests and their responses |
| Performance | Animations and scripts that cost frames |

## Sending test messages from the console

You do not need Lua to test a UI state. In the devtools console, dispatch the same message Lua would send:

*devtools console*

```js
window.dispatchEvent(new MessageEvent('message', { data: { action: 'open', balance: 12500 } }));
```

## Developing in a normal browser

Most UI work is faster outside the game: run your dev server (Vite, Next.js) in Chrome, mock NUI messages with a small debug panel, and mock callback responses with a helper like the one in [NUI callbacks with fetch](https://fam-tools.com/guides/fivem-nui-callbacks-fetch). Only focus, input and in-game rendering need the real client.

> **Hot reload in game** — During development you can point `ui_page` at your dev server URL (for example `http://localhost:5173`) so the in-game UI reloads as you save. Switch back to the built files before release.

## Common NUI problems and where to look

| Problem | Look at |
| --- | --- |
| Blank page | Console for a JS error; Network for a 404 on the script |
| Images missing | Network 404 → add the file to `files` |
| Fonts look wrong | Network → font file loaded? correct `@font-face` URL? |
| Click does nothing | Network → did the callback request go out? did it get a response? |
| UI works in browser but not in game | Features the embedded browser handles differently, like `backdrop-filter` |

Lua-side errors still appear in F8 and the server console — see [the F8 console guide](https://pityus.net/guides/fivem-f8-console-and-server-errors).

## Questions

### How do I open NUI devtools in FiveM?

Open `http://localhost:13172/` in a Chromium browser while the game runs, or type `nui_devTools` in F8 with developer mode on.

### Why do I not see my JavaScript errors in F8?

Page errors go to the Chromium devtools console, not F8.

### Can I debug the loading screen?

Yes — while the game is loading, the loading screen page can be inspected through the same devtools.

### How do I test UI states without Lua?

Dispatch a `message` event from the devtools console with the same data Lua would send.

## Related

- https://fam-tools.com/guides/fivem-nui-basics
- https://fam-tools.com/guides/fivem-nui-callbacks-fetch
- https://fam-tools.com/guides/fivem-nui-focus-and-cursor
- https://fam-tools.com/guides/fivem-loading-screen-performance