Debugging FiveM NUI with Chromium devtools
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.
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
- 1Start FiveM and join your development server.
- 2In Chrome or Edge, open
http://localhost:13172/. - 3Click the page for your resource (its URL contains
cfx-nui-<resource>). - 4Alternatively, type
nui_devToolsin 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:
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. Only focus, input and in-game rendering need the real client.
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.
Common 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.
Want a loading screen you never have to debug?
Build it in the browser, export once, and edit it whenever — no HTML, no re-uploads.
Start free