CODEWITHSUNDEEP
delphi
BigONotation
BigONotation

Reputation: 4538

How to enable remote debugging with dcef3

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.

Upvotes: 1

Views: 1159

Answers (1)

Victoria
Victoria

Reputation: 7912

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;

Upvotes: 2

Related Questions