JAVAFX / WebView / WebEngine FireBugLite or Some other debugger?

Question

I am developing an app and need to run a debugger on the WebView/WebEngine part of the application so I can better debug my application. But the code I found across the internet to inject Firebug Lite is not working for some reason.

The Javascript code itself works fine if I run it on the Firefox Console, but not when the same code is executed through the JavaFX webview/webengine. The netbeans console doesn't throw any errors others... so I am not sure why the FirebugLite UI is not rendering/loading.

What could be causing this, any other alternatives?

I'm using JavaFX 2.2

// Doesn't work....

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

Answer 1

I was able to fix the problem. It seems like the current stable version of FirebugLite works well for traditional browsers but something is different that makes it fail for an application viewed by the JAVAFX WebView.

I was able to add Firebug to my application by using an uncompressed version of FirebugLite

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

The solution came from: Testing IE6 with Firebug Lite

Answer 2

The command you provided in your question works for me (well mostly).

Perhaps you are not waiting until the WebView has loaded a document before trying to trigger Firebug.

For example, the following code will launch Firebug Lite for me (JavaFX 8b103, OS X 10.8).

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import org.w3c.dom.Document;

public class WebViewWithDebugger extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage primaryStage) {
    final WebView webView = new WebView();
    final WebEngine engine = webView.getEngine();
    engine.load("http://docs.oracle.com/javafx/2/get_started/animation.htm");
    engine.documentProperty().addListener(new ChangeListener<Document>() {
      @Override public void changed(ObservableValue<? extends Document> prop, Document oldDoc, Document newDoc) {
        enableFirebug(engine);
      }
    });
    primaryStage.setScene(new Scene(webView));
    primaryStage.show();
  }

  /**
   * Enables Firebug Lite for debugging a webEngine.
   * @param engine the webEngine for which debugging is to be enabled.
   */
  private static void enableFirebug(final WebEngine engine) {
    engine.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');}"); 
  }
}

Firebug Lite itself doesn't seem particularly great at debugging web pages (at least under WebView for me). The console, html, css and dom panels seemed to be fine, as well as the inspect option. So some useful info there. The script portion showed the scripts but I didn't see anyway to set breakpoints, watches, etc in the scripts.

Answer 3

I found with the JavaFX Webview that the best way of quickly debugging javascript was to do the following:

webView.getEngine().setOnAlert(new EventHandler<WebEvent<String>>() {
    @Override 
    public void handle(WebEvent<String> event) {
        System.out.println(event.getData());
    }
});  

That pipes through all your alert("whatever"); pieces of code so you can see what's going on.