如何使用 dcef3 启用远程调试答案

【问题标题】：How to enable remote debugging with dcef3如何使用 dcef3 启用远程调试
【发布时间】：2017-06-13 12:18:25
【问题描述】：

我正在使用 dcef3 在我的 Delphi 应用程序中嵌入浏览器。我想启用远程调试以检查在嵌入式浏览器中运行的 javascript 代码。

当显示包含 TChromium 控件的父窗体时，我尝试启用远程调试端口，但我不确定如何继续以实际访问调试器：

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

但是，当我尝试从另一个 chrome 浏览器访问 localhost:9000 时，页面无法加载。

编辑：我将CefRemoteDebuggingPort 初始化移至表单初始化部分（在表单显示之前）。现在，当我将 google chrome 指向端口 9000 时，我可以看到 webcomponents。但是我还有另一个错误：

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)

注意：我的 chrome 浏览器版本与 DCEF3 不同。

【问题讨论】：

二进制文件所在的目录下是否有cef.pak和devtools_resources.pak？我已经很容易地使用了调试器
@RBA 是的，cef.pak 和 devtools_resources.pak 都位于二进制目录中。请注意，我可以在表单中成功打开调试工具（我要做的是启用远程调试）。是否有启用远程调试的特定程序？
看看-stackoverflow.com/questions/29117882/…
@RBA 好的，我有一些进展 :) 所以基本上我将调试端口的初始化移到了表单初始化部分（在表单显示之前）。当我将 google chrome 指向端口 9000 时，我看不到 webcomponents。但是我现在有另一个错误（请参阅编辑）。
{$IFDEF DEBUG}ChromeBrowser.ShowDevTools;{$ENDIF} 可能就足够了。或者有一个隐藏的按钮，由该条件显示。或者你可以例如导航到“假”站点并在浏览前事件中打开开发。这种方法的工具。

标签： delphi

【解决方案1】：

我会简单地从代码中打开开发者工具控制台。有ShowDevTools 方法可以做到这一点。为此，您可以使用专用按钮或例如在 HTML 页面内创建一个假链接，并在 OnBeforeBrowse 事件中取消导航并显示控制台。例如当有这个假链接时：

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

你可以在你的应用中写这样的东西。：

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;

【讨论】：