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 application that renders fine in Firefox and Chrome, but does not render correctly inside a WebView. It really could be any number of things, but without some debugging tools I don't know how to track down the root cause.

Thanks.

score 33 · Accepted Answer · answered Feb 23 '12 at 01:10

33

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.

answered Feb 23 '12 at 01:10

jewelsea

150,031
14
366
406

4

You need to make sure that you wait for the document to load before starting Firebug. See jewelsea's answer here for how to do that: http://stackoverflow.com/a/18396900/633107 – Splaktar Nov 01 '13 at 19:17
@ZiglioNZ please ask new questions as new questions. – jewelsea Jun 15 '15 at 17:12
1

The url does not work any more. Also see https://stackoverflow.com/questions/58521474/how-to-include-firebug-light-without-access-to-http-getfirebug-com – Stefan Oct 23 '19 at 11:08

score 10 · Answer 2 · edited May 29 '16 at 04:32

10

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:

runnable javaFXWebKitDebugger.jar
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

edited May 29 '16 at 04:32

Aleksandr Dubinsky

22,436
15
82
99

answered Dec 23 '15 at 22:39

Bosko Popovic

157
2
9

I really like what you have achieved there, but it seems you are using some deprecated APIs. – mohamnag Mar 05 '16 at 23:12
1

Please place this piece of code on github instead of Google Drive. Also please release it under some open source license. – Leonel Mar 21 '16 at 12:02
@bosko-popovic could you please solve the mystery of this code's license? I just republished your code on GitHub for better usage and I'm getting request to define a license for it, but this is actually your decision to respond to. take a look here: https://github.com/mohamnag/javafx_webview_debugger/issues/1 – mohamnag Apr 11 '16 at 11:50
1

This code has open source license dependency. I am glad that I can help someone with this, since I spent days trying to include debugger. – Bosko Popovic Apr 12 '16 at 19:51
webEngine.impl_getDebugger() appears to be deprecated, and I am getting class not found exception for javafx.servlet.Servlet when attempting to run the program. Any updates on this? – Pasha Skender Aug 01 '16 at 05:23

score 6 · Answer 3 · answered Feb 23 '12 at 00:21

6

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/

answered Feb 23 '12 at 00:21

Sergey Grinev

34,078
10
128
141

score 4 · Answer 4 · edited May 23 '17 at 12:34

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

Now that `import netscape.javascript.JSObject;` is deprecated in java 9 and `import jdk.nashorn.api.scripting.JSObject;` was removed from the JDK in Java 15 what is the current solution to getting a `JSObject`? — abulka, Jul 06 '23 at 05:27

Html/Javascript debugging in JavaFX WebView

4 Answers4

Linked