JavaFX and Firebug Lite in web page inspector mode

Question

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?

You're obviously talking about Firebug Lite. Please note that Firebug Lite and Firebug are two different tools. — Sebastian Zartner, Apr 10 '15 at 10:08

score 1 · Answer 1 · answered Apr 09 '15 at 12:13

Just put it in a variable:

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

The actual type of the returned value depends on the result of executing the Javascript, and you can just downcast to the appropriate type. For exapmle, if you know it's a String, you can do

String result = (String) engine.executeScript(...);

The documentation explicitly lists how different Javascript types are mapped to the Java type that is returned.

Thank James_D,I had already tried to extract the method return with a string. In particular, the script before returns undefined in a string variable. But the script is only for start firebug. It should run another script? the script that runs directly the action of inspector ... you could help me out please? thank you — FTSoft, Apr 09 '15 at 12:40
It looks like your question is not answered yet, so you should undo the acceptance of this answer. — Sebastian Zartner, Apr 10 '15 at 10:10

score 0 · Accepted Answer · answered Apr 10 '15 at 12:15

0

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.

answered Apr 10 '15 at 12:15

Sebastian Zartner

18,808
10
90
132

Many many thanks Sebastian. What I wanted to create is a kind of inspector automated: a analyzer of elements of a web page but frontend. Over the opening of a web page (a simple browser in JavaFX), the mouse moves on the page in a grid of points (x; y) by launching the inspector (Firebug Lite inspector is already enable and active) and getting the various elements that make up the page. – FTSoft Apr 10 '15 at 18:08
The points that I need to clarify are the following: - For each point (x, y) of the grid that I create, I have to run the script that you have shown me? - If I use mousedown, means I'm clicking the point (x, y), I would run the script to the simple passage at that point with the mouse, how do I change it? - The return is the element at the specified position (x,y): When the mouse is over a TextNode element, the returned object is the parent element of the TextNode. Correct? – FTSoft Apr 10 '15 at 18:09
Sebastian, you could help me out for the things that I wrote? – FTSoft Apr 16 '15 at 08:10
You only need to execute the script once after the page is loaded. Then the listener is called everytime you inspect an element through the Firebug Lite UI. The main question is, do you use the Firebug Lite UI to inspect the element or do you want to programmatically trigger the events? What is your actual use case behind your question? – Sebastian Zartner Apr 16 '15 at 08:35
What I will do is both things that you ask me. I'd like to programmatically control the firebug inspector. 1) take the coordinates (X, Y) of the webpage. 2) run the script the inspector in the coordinates (X, Y) and get the return item. 3) Repeat the loop, changing the coordinates; end when I found all visible objects of the webpage. It's possible? – FTSoft Apr 27 '15 at 08:31
If your actual goal is to programmatically get all visible elements within the viewport, you don't need Firebug Lite at all. You can achieve that with the JavaScript function [`document.elementFromPoint(x, y)`](https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint) as [described in an answer to another question](http://stackoverflow.com/a/905341/432681). And yes, using that function you have to loop over all coordinates of the page. – Sebastian Zartner Apr 29 '15 at 21:42

JavaFX and Firebug Lite in web page inspector mode

2 Answers2

Linked