Html/Javascript debugging in JavaFX WebView

Question

Are there any ways to debug javascript and html that is executed within a Javafx WebView? Something similar to Firebug or Chrome\'s developer console?

I have an app

Answer 1

Here is some Java code to make use of Firebug Lite in a JavaFX WebView without modifying the html of the target page.

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');}"); 

You can trigger the code using a JavaFX Button or any other mechanism you wish.

Answer 2

Maybe a bit late to answer, but I think this way is quite simple.

add javascript listener in java

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

Then create the JS listener class in java.

JSListener java:

public class JSListener { 

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

add javascript in html file

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;

If you want to load html from the outside, you can not to change it, you can use code like this.

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

but first you need to add setCreatePopupHandler in java, to make it you can see here: webview not opening the popup window in javafx

Answer 3

You can try Firebug Lite, which can be incorporated into any web-browser. See http://www.makeuseof.com/tag/install-firebug-for-browsers-other-than-firefox/

Answer 4

I am debugging JavaFx WebView with chrome DevTools and safari Web Inspector.

I created minimal project to help people debug with DevTools. Get it on GitHub. You can find there:

1. runnable javaFXWebKitDebugger.jar
2. source code of created javaFXWebKitDebugger.jar

The sample opens WebView and enables WebSocket Servlet. When you run javaFXWebKitDebugger.jar open Chrome browser and load: dev tools url