Search code examples
javascriptjavafxfirebug-lite

JavaFX and Firebug Lite in web page inspector mode


I created a simple browser with JavaFX using WebView. I have also added Firebug Lite to inspect the website. To enable Firebug Lite I used a WebEngine and the method executeScript():

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

How can I intercept the return value (a string I suppose) of the function of Firebug Lite's inspector in JavaFX?


Solution

  • I don't have any experience with JavaFX, though I know that Firebug Lite does not expose the element you inspected with it nor does it trigger any events related to that by itself. So you can't access that information directly. See the related source code.

    What Firebug Lite basically does is to create a <div> as overlay for the highlighter and to set two event handlers for mousemove and mousedown for it to process the mouse clicks, which you can also listen to for your purposes.

    To get the element inspected via Firebug Lite via JavaScript you can use this code:

    document.addEventListener("mousedown", function(e) {
      if (e.target.id === "fbInspectFrame") {
        var inspectedElement = Firebug.browser.getElementFromPoint(e.clientX, e.clientY);
    
        // Here goes the code, which processes the inspected element
      }
    });
    

    Explanation:

    To get the inspected element, you have to listen to the mousedown event. But the action should only happen when the inspector is enabled, which is true when the inspected element is actually the overlay <div> called 'fbInspectFrame' Firebug Lite injects while inspecting.

    To get the actual inspected element (note that it's an object, not a string) Firebug Lite offers a function called Firebug.browser.getElementFromPoint(), which is called with the mouse coordinates from the event.

    This JavaScript element then needs to be accessed by your JavaFX code.