Debugging JavaScript in Chromium Embedded Framework - wpf

Question

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

Answer 1

You may also use ShowDevTools() extension method (source)
ChromiumWebBrowser browser = new ChromiumWebBrowser();
browser.ShowDevTools(); // Opens Chrome Developer tools window

Answer 2

Enable remote debugging in your application:
C# (CefSharp)
CefSettings.RemoteDebuggingPort = 8088;
C++
CefSettings settings;
settings.remote_debugging_port = 8088;
then run your app and point your browser to http://localhost:8088/ to access the Chromium developer console (the same you have in Chrome with Ctrl+Shift+j)

Answer 3

While the accepted answer is correct, it doesn't really have enough detail.
I got this working in CefSharp using the WinForms control in a WPF application. (the WinForms control seems to have better performance). The code for remote debugging will probably be very similar for the WPF control though.
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 will need first verify if the browser is initialized.
An 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();
}
}

Answer 5

To open the Chromium Dev-Tools window you can do the following:
CefBrowser.GetBrowser().GetHost().ShowDevTools();
This is similar to Eido95's answer, but it doesn't require the extension methods, which essentially just wrap these method calls.
NOTE: The control needs to be initialized before calling this method can be called. If you're wiring-up and F12-like functionality this shouldn't be a problem. If you're trying to do this when the app is starting you will need to listen for the ChromiumWebBrowser.IsBrowserInitializedChanged event

Answer 6

An alternative can be to launch cef with --enable-chrome-runtime.
You'll have the fully featured debugger (link files on disk and edit them from the debugger)