JavaFX WebView 中的 Html/Javascript 调试

Posted 2023-02-26

【中文标题】JavaFX WebView 中的 Html/Javascript 调试

【英文标题】：Html/Javascript debugging in JavaFX WebView

【发布时间】：2012-03-13 00:31:31

【问题描述】：

有什么方法可以调试在 Javafx WebView 中执行的 javascript 和 html？类似于 Firebug 或 Chrome 的开发者控制台的东西？

我有一个应用程序可以在 Firefox 和 Chrome 中正常呈现，但在 WebView 中无法正确呈现。这确实可能是任何数量的事情，但如果没有一些调试工具，我不知道如何追查根本原因。

谢谢。

【参考方案1】：

这里是一些 Java 代码，用于在 JavaFX WebView 中使用 Firebug Lite，而无需修改目标页面的 html。

webView.getEngine().executeScript("if (!document.getElementById('FirebugLite'))E = document['createElement' + 'NS'] && document.documentElement.namespaceURI;E = E ? document['createElement' + 'NS'](E, 'script') : document['createElement']('script');E['setAttribute']('id', 'FirebugLite');E['setAttribute']('src', 'https://getfirebug.com/' + 'firebug-lite.js' + '#startOpened');E['setAttribute']('FirebugLite', '4');(document['getElementsByTagName']('head')[0] || document['getElementsByTagName']('body')[0]).appendChild(E);E = new Image;E['setAttribute']('src', 'https://getfirebug.com/' + '#startOpened');"); 

您可以使用 JavaFX 按钮或您希望的任何其他机制来触发代码。

【讨论】：

您需要确保在启动 Firebug 之前等待文档加载。请在此处查看 Jewelsea 的答案以了解如何做到这一点：***.com/a/18396900/633107

@ZiglioNZ 请作为新问题提出新问题。

网址不再起作用。另见***.com/questions/58521474/…

【参考方案2】：

我正在使用 chrome DevTools 和 safari Web Inspector 调试 JavaFx WebView。

我创建了最小的项目来帮助人们使用 DevTools 进行调试。 Get it on GitHub。你可以在那里找到：

可运行的 javaFXWebKitDebugger.jar 创建的javaFXWebKitDebugger.jar的源代码

示例打开 WebView 并启用 WebSocket Servlet。当你运行 javaFXWebKitDebugger.jar 打开 Chrome 浏览器并加载：dev tools url

【讨论】：

我真的很喜欢您在那里取得的成就，但您似乎使用了一些已弃用的 API。

请将这段代码放在 github 而不是 Google Drive 上。也请在一些开源许可下发布它。

@bosko-popovic 你能解开这个代码许可证的奥秘吗？我刚刚在 GitHub 上重新发布了您的代码以便更好地使用，并且我收到了为其定义许可证的请求，但这实际上是您做出回应的决定。看看这里：github.com/mohamnag/javafx_webview_debugger/issues/1

此代码有开源许可依赖。我很高兴能在这方面为某人提供帮助，因为我花了几天时间尝试包含调试器。

webEngine.impl_getDebugger() 似乎已被弃用，并且在尝试运行程序时出现 javafx.servlet.Servlet 的 class not found 异常。有这方面的更新吗？

【参考方案3】：

您可以尝试 Firebug Lite，它可以集成到任何网络浏览器中。见http://www.makeuseof.com/tag/install-firebug-for-browsers-other-than-firefox/

【参考方案4】：

可能回答有点晚了，不过我觉得这个方法很简单。

在java中添加javascript监听器

Java：

webengine.getLoadWorker().stateProperty().addListener(new ChangeListener<State>() 
            @Override
            public void changed(ObservableValue<? extends State> observable,
                    State oldValue, State newValue)  
                     JSObject jsobj = (JSObject) webengine.executeScript("window");                      
                     jsobj.setMember("java", new JSListener());  
            
        );

然后在java中创建JS监听类。

JSListener java:

public class JSListener  

        public void log(String text)
    System.out.println(text);
 

在 html 文件中添加 javascript

Javascript：

var javaReady = function(callback)
    if(typeof callback =='function')
        if(typeof java !='undefined')
            callback();
         else 
            var javaTimeout = 0;
            var readycall = setInterval(function()
            javaTimeout++; 
                if(typeof java !='undefined' || javaTimeout > 1000)
                    try
                        callback();
                     catch(s);
                    clearInterval(readycall);
                
            ,1);
        
    
;

            var errorlistener = function(msg, url, line) 
            javaReady(function()
            java.log(msg +", url: "+url+ ", line:" + line); 
            ); 
        ;

      //overide onerror 
        var onerror = errorlistener;

如果你想从外部加载html，你可以不改变它，你可以使用这样的代码。

var testsss =  window.open("http://testError.com");  
testsss.onerror = errorlistener;  

但首先你需要在 java 中添加 setCreatePopupHandler，你可以在这里看到：webview not opening the popup window in javafx