How to open devTools for CEF? (WebUI plugin)

[anonymous_user_92094c76]

Hello!

We are working on a project where we use the WebUI plugin for developing the user interface with React. We are currently facing some problems and it would be nice to be able to debug our app. It’s running perfectly in Chromium but when loaded in Unreal with WebUI its not working as intended.

As far as I understand, WebUI is using the internal Chromium Embedded Framework in UE4, which should have a debugger tool that can be opened on localhost:port.

If so, how do we know which port it’s using? Is it possible to define that port?

Thanks in advance!

[LiangLiangCD]

1. Clicking any web element
2. Press Shift + Ctrl + I to open devTools, the same as in Chrome

[Annie_Working]

when i press Shift + Ctrl + I in runtime mode, the devtool dose not open. Besides, when I press Ctrl , camera moves down.

[YogurtExplosion]

Please Bump.
There is still not a working solution for this Problem.
On Windows on the CEFBrowser Implementation, I could track down the CTRL+SHIFT+I
To a private method call “FCEFBrowserHandler::ShowDevTools” here however it just calls OnBeforePopup and passes a URL and Frame String which resolve to:

CefString TargetUrl = “chrome-devtools://devtools/devtools.html”;
CefString TargetFrameName = “devtools”;

There is no documentation about what to do with this neither on Unreal side nor on CEF side.
From what I understand CEF enables remote debugging with the flag “remote-debugging” and then you can use the provided URL “chrome-devtools://devtools/devtools.html” with query parameters such as “remotehost=localhost:xxxx”. When I check the CEFSubprocess in Unreal none of the listed processes listen to any port, so this is also not possible. Why does the method return an incomplete URL?

I hit my head against a wall for 8 Hours straight, and I ran out of options.
Is there some really trivial option somewhere that I am missing?

What is the Intended behavior when pressing CTRl+SHIFT+I ?
What I expect:

1. Either a new window popping up like the one when I right click > show source
2. A debug URL that links to the devtools session that can be opened in a new browser (WebBrowserWidget or something else).

None of these expected behaviors work.

I Attached an image: on the left side the not working page opened as a session in one browser widget, on the right my window rendering the popup handled by OnPopup.

[iktomi]

It’s not documented (of course not, classic Epic move) but there’s an unreal editor command line argument cefdebug=<port_number> which corresponds to the the CEF command line option remote-debugging-port.

[iktomi]

Btw you’ll also find cef log output in cef3.log alongside the unreal editor logs

[iktomi]

FYI i also tried to make this code from CEFBrowserHandler work:

Browser->GetHost()->ShowDevTools(WindowInfo, NewClient, BrowserSettings, Point);

Don’t waste your time with it, it crashes the app and never worked apparently. Just use remote debugging.

[yucheb]

Add two lines in FCEFBrowserApp::OnBeforeCommandLineProcessing

CommandLine->AppendSwitchWithValue("remote-debugging-port", "port");
CommandLine->AppendSwitchWithValue("remote-allow-origins", "http://localhost:port");

Then open localhost:port in browser to debug the WebUI

[keremikzz]

cannot write it on MyCharacter.cpp and cant include “CEFBrowserApp.h” can you please help

[yucheb]

If you are using a engine built from source, you can use the solution I came up with.
But if you are using a release version, here are the steps you can debug your web:

1. Add -cefdebug=port to commad line before you start your project.
   Note: If your unreal engine version is 4.27.2, the default port is 8088. And in version 5.3.1, there is no default port, so you must add commad line when you want to debug web.
   
   
2. Create webwidget in your level
3. Open Chrome(Edge), and open chrome://inspect(if you use edge, open edge://inspect)
4. Add the localhost:port to Discover network targets
   
   
5. Wait for several seconds, you can find your web can be inspected.