Allowing JS to access Firefox’s Inspector dev tool

I would like to be able to access the Inspector dev tool in Firefox (It may only be in Aurora right now) via javascript. It’s already a great way to debug your DOM, but in a sense, this could also become a new input type from the visitor of the page.

If you are not sure what the inspector is, here is a screen shot of it in use:

Screen_shot_2012-01-20_at_11

In that shot, the inspector is activated, and I’m acting as a dev debugging an element of the DOM. As I move the mouse over the page, elements become selected, the P tag in this case. There are tools that appear at the bottom of the page that allow me, as a developer, to interact with the element.

But this would be nice if I could access it via Javascript as a visitor input mechanism. Here is a scenario.

What if Wikipedia decided to allow people to create their own little mini wiki’s, containing only the information they wanted. Here is an example:

Inspect_1

In the above shot, we have a small panel at the bottom of the page that the user is populating with content only important to them. The can click the “Add Content” button and that might do something like this:

var element = select() # this is the API that launches the selector; if(element){   # we now have the element as if   # we did a querySelect. we can   # do something with the element   # and it's children. }else{   # nothing was selected }

The first line of that code would open the inspector, much like calling prompt() or confirm(), but instead of a dialog popup, the selector shows without the additional dev tools that would appear if I launced it myself:

Inspect_2

Now, when something is clicked on, I get back an element as if I used a querySelector. And I can then do something with that, such as add it to their clips.

Inspect_3

Maybe not a tool that could be used by everyone, but if the functionality is in the browser now (not relying on Firebug) why not make it accessible by the page?

Just an idea.

Advertisements