Debugging JavaScript in Chromium Embedded Framework

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?

Eido95 · Accepted Answer · 2018-09-06T08:47:35.927

54

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

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

edited Sep 06 '18 at 08:47

answered Feb 22 '16 at 18:11

Eido95

1,313
1
15
29

why i dont see this function before? Is it still exist in the latest version @Eido95? – gumuruh Sep 19 '19 at 15:00
@gumuruh yes, it is. – Abdullah Akçam Apr 07 '20 at 07:48
1

You need to add `using CefSharp;` to have this method as it is an extension method if you can't see it. – Măcelaru Tiberiu May 29 '22 at 12:18

Sga · Answer 2 · 2015-03-18T15:11:00.837

42

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)

edited Mar 18 '15 at 15:11

answered Mar 18 '15 at 14:11

Sga

3,608
2
36
47

1

Thanks for your answer! Unfortunatly CefSettings is not found in my application. I have the following usings: using CefSharp; using CefSharp.Wpf; Did I forgot anything? – stefan Mar 18 '15 at 14:48

score 30 · Answer 3 · answered Jul 23 '15 at 02:17

30

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.

answered Jul 23 '15 at 02:17

craftworkgames

9,437
4
41
52

1

You should mark it as an answer or @Sga should edit his to yours. – Eido95 Feb 21 '16 at 21:43
3

Only the OP can mark it as an answer I believe. No matter, upvotes will sort it out eventually. – craftworkgames Feb 21 '16 at 22:26

score 6 · Answer 4 · answered Apr 29 '19 at 19:52

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

This should be the answer, think you for saving my time. – Peter-Yu Jan 14 '22 at 15:41 — Peter-Yu, Jan 14 '22 at 15:41

score 3 · Answer 5 · answered Feb 02 '20 at 19:51

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

score 0 · Answer 6 · answered Apr 13 '22 at 07:51

0

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)

answered Apr 13 '22 at 07:51

jean-charles DULAS

1

Debugging JavaScript in Chromium Embedded Framework

6 Answers6

Linked