在 Chromium 嵌入式框架中调试 JavaScript

Question

我有一个使用 CEF 显示 Web 内容的 WPF 应用程序。我的问题是，有没有办法在 WPF 应用程序中调试 Javascript/Web 部分？

Answer 1

在您的应用程序中启用远程调试：

C# (CefSharp)

CefSettings.RemoteDebuggingPort = 8088;

C++

CefSettings settings;
settings.remote_debugging_port = 8088;

然后运行您的应用并将浏览器指向 http://localhost:8088/ 以访问 Chromium 开发人员控制台（与在 Chrome 中使用 Ctrl+Shift+ j)

Answer 2

虽然接受的答案是正确的，但确实不够详细。

我在 CefSharp 中使用 WPF 应用程序中的 WinForms 控件实现了这一点。（WinForms 控件似乎有更好的性能）。不过，远程调试的代码可能与 WPF 控件非常相似。

var settings = new CefSettings { RemoteDebuggingPort = 8088 };
Cef.Initialize(settings);
WindowsFormsHost.Child = new ChromiumWebBrowser(url);

然后在浏览器中转到 http://localhost:8088/。

Answer 3

您也可以使用 ShowDevTools() 扩展方法 (source)

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

Answer 4

要使用 'ShowDevTools()'，您需要先验证浏览器是否已初始化。示例解决方案：

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

Answer 5

要打开 Chromium 开发工具 window，您可以执行以下操作：

CefBrowser.GetBrowser().GetHost().ShowDevTools();

这类似于 Eido95 的答案，但它不需要扩展方法，扩展方法本质上只是包装这些方法调用。

注意: 控件需要初始化后才能调用该方法。如果您正在连接和类似 F12 的功能，这应该不是问题。如果您在应用程序启动时尝试执行此操作，则需要监听 ChromiumWebBrowser.IsBrowserInitializedChanged 事件

Answer 6

另一种方法是使用 --enable-chrome-runtime 启动 cef。您将拥有功能齐全的调试器（link 磁盘上的文件并从调试器编辑它们）

在 Chromium 嵌入式框架中调试 JavaScript

Debugging JavaScript in Chromium Embedded Framework

debugging

wpf

chromium-embedded