How to enable remote debugging with dcef3

Question

I am using dcef3 to embed a browser in my Delphi app. I would like to enable remote debugging in order to inspect the javascript code running in the embedded browser.

I have tried to enable the remote debugging port when the parent form containing the TChromium control is shown, but I am not sure how to proceed in order to actually access the debugger:

procedure TMapViewSingleSector.FormShow(Sender: TObject);
begin
   CefRemoteDebuggingPort := 9000;
   ChromeView.Load('http://localhost:8080/');
end;

However, when I try to access localhost:9000 from another chrome browser, the page fails to load.

Edit: I moved CefRemoteDebuggingPort initialization to the form initialization section (before it was in the form show). Now, when I point google chrome to port 9000, I can see the webcomponents. However I have another error:

inspector.js:10392 Uncaught TypeError: Object.observe is not a function
    at WebInspector.Main._createSettings (inspector.js:10392)
    at WebInspector.Main._gotPreferences (inspector.js:10384)
    at WebInspector.InspectorFrontendHostStub.getPreferences (inspector.js:1352)
    at WebInspector.Main._loaded (inspector.js:10383)
    at windowLoaded (inspector.js:677)

Note: The versions of my chrome browser is not the same as DCEF3.

Do you have cef.pak and devtools_resources.pak in the directory where you have the binary file? I've managed easily to use the debugger — RBA, Jun 13 '17 at 12:41
@RBA yes both cef.pak and devtools_resources.pak are located in the binary directory. Note that I can successfully open the debug tools within the form (what I want to do is enable remote debugging). Is there a specific procedure to enable remote debugging? — BigONotation, Jun 13 '17 at 13:28
Take a look at - https://stackoverflow.com/questions/29117882/debugging-javascript-in-chromium-embedded-framework — RBA, Jun 13 '17 at 13:50
@RBA OK I have some progress :) So basically I moved the initialization of the debug port to the form initialization section (before it was in the form show). When I point google chrome to port 9000, no I can see the webcomponents. However I have another error now (see edit). — BigONotation, Jun 13 '17 at 14:12
_"I would like to enable remote debugging in order to inspect the javascript code running in the embedded browser."_ Well, why don't you simply open dev. tools by calling `ShowDevTools` method of the browser control then? — Victoria, Jun 13 '17 at 14:44
@Victoria yes that's probably what I will end up doing. The only problem is that then I have to add a dedicated button or menu option in the UI to display the devtools. — BigONotation, Jun 13 '17 at 15:01
`{$IFDEF DEBUG}ChromeBrowser.ShowDevTools;{$ENDIF}` could be enough then. Or have a hidden button that you show by that conditional. Or you can e.g. navigate to a "fake" site and in a before browse event open dev. tools by that method. — Victoria, Jun 13 '17 at 15:04
@Victoria OK that sounds goods. So the idea would be to navigate to a pseudo site, and trap that navigation event in order to display dev tools (but you would still need to stay on the current html page so you would have to somehow cancel the actual navigation). If you provide your solution with a quick sample code as an answer I will accept it. — BigONotation, Jun 13 '17 at 15:08

score 2 · Accepted Answer · answered Jun 13 '17 at 15:45

I would simply open the developer tools console from code. There is the ShowDevTools method to do so. For that you can use a dedicated button or e.g. create a fake link inside a HTML page and in the OnBeforeBrowse event cancel the navigation and show the console. For example when having this fake link:

<html>
  <body>
     <a href="ShowDevTools.fake">Show console</a>
  </body>
</html>

You can write something like this in your app.:

procedure TForm1.Chromium1BeforeBrowse(Sender: TObject;
  const browser: ICefBrowser; const frame: ICefFrame;
  const request: ICefRequest; isRedirect: Boolean; out Result: Boolean);
const
  UrlShowDevTools = 'ShowDevTools.fake';
begin
  { if the user clicked link and URL equals to the fake one }
  if (Request.TransitionType = TT_LINK) and (Request.Url = UrlShowDevTools) then
  begin
    { cancel navigation }
    Result := True;
    { show the developer tools console }
    TChromium(Sender).ShowDevTools;
  end;
end;

How to enable remote debugging with dcef3

1 Answers1