JavaScript debugging in the Chromium Embedded Framework

Question

I have a WPF application that uses CEF to display web content. My question is, is there a way to debug Javascript / web parts inside a WPF application?

Answer 1

Enabling remote debugging in the application:

C # (CefSharp)

CefSettings.RemoteDebuggingPort = 8088; 

C ++

 CefSettings settings; settings.remote_debugging_port = 8088; 

then run the application and specify the browser http://localhost:8088/ to access the Chromium developer console (the same as in Chrome with Ctrl + Shift + j )

Answer 2

You can also use ShowDevTools() extension ( source )

 ChromiumWebBrowser browser = new ChromiumWebBrowser(); browser.ShowDevTools(); // Opens Chrome Developer tools window 

Answer 3

While the accepted answer is correct, it lacks details.

I got this working in CefSharp using the WinForms control in a WPF application. (WinForms management seems to have better performance). The code for remote debugging is likely to be very similar to a WPF control.

 var settings = new CefSettings { RemoteDebuggingPort = 8088 }; Cef.Initialize(settings); WindowsFormsHost.Child = new ChromiumWebBrowser(url); 

Then go to http://localhost:8088/ in your browser.

Answer 4

To use ShowDevTools (), you need to first check if the browser is initialized. Example solution:

 //Add an event to check ChromeBrowser.IsBrowserInitializedChanged += ChromeBrowser_IsBrowserInitializedChanged; //Declare the event method to be called private void ChromeBrowser_IsBrowserInitializedChanged(object sender, IsBrowserInitializedChangedEventArgs e) { if (e.IsBrowserInitialized) { ChromeBrowser.ShowDevTools(); } }