CODEWITHSUNDEEP
wpfdebuggingchromium-embedded
stefan
stefan

Reputation: 718

Debugging JavaScript in Chromium Embedded Framework

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?

Upvotes: 33

Views: 43675

Answers (6)

jean-charles DULAS
jean-charles DULAS

Reputation: 1

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)

Upvotes: 0

Caleb Seadon
Caleb Seadon

Reputation: 724

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

Upvotes: 4

Eduardo Gadotti
Eduardo Gadotti

Reputation: 71

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();
        }
    }

Upvotes: 6

Eido95
Eido95

Reputation: 1383

You may also use ShowDevTools() extension method (source)

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

CEFSharp Developer Tools window

Upvotes: 55

craftworkgames
craftworkgames

Reputation: 9957

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.

Upvotes: 30

Sga
Sga

Reputation: 3658

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)

Upvotes: 43

Related Questions