How do I get Firefox debugger watch's target element?

Question

I've been trying to add the highlighting feature to the Firefox DevTools debugger, so it will highlight the element instead of only showing [HTMLAnchorElement] or similar. I know it's possible, since you can set someElement.style.border='1px solid blue' or similar as a watch, and it hightlights the element. So why not let it store current border, and show it on mouseover using element.style.border='1px solid blue', and restore it on mouseout?

While debugging in Firefox devtools, I noticed the element in the right watch panel has rows with the variable names, which are actually given odd ids like "46439", under parent element with "document.getelementsbytagname('a')36" id. What do these ids signify? Can they map a display element to its target element in the page? I tried window.DebuggerView.WatchExpressions.getItemForElement from Venkman but it returns null. Is there another function from this source file that will give the target element of debugger watch?

Ideally, I should be able to 'watch' items such as document.getElementsByTagName('a'), or local variable in the debug context, and highlight the items in the page like Chromium/Firebug. Yet I'm not sure how to add this feature from a Firefox extension.

Update:

After further work, it would seem to be possible to use the DebuggerView.StackFrames.evaluate to run code while stopped at a breakpoint, like what chrome://browser/content/devtools/debugger-controller.js is doing with watches. Unfortunately when stopped at a breakpoint I run this code, and DebuggerView.StackFrames.evaluate is [void] void in Venkman. Is this evaluate command hidden or private somehow, or not initialized?

Answer 1

You can't really use the highlighter from the Debugger directly yet. We have a bug open (https://bugzilla.mozilla.org/show_bug.cgi?id=653545) to make the highlighter more generally-available to our other tools.

If you have a unique selector, you can use the command line (Shift-F2 to open the Developer Toolbar) to inspect an element via:

inspect unique-selector

We intend to make DOM objects highlightable everywhere in upcoming versions of the Firefox Developer Tools.

edit - This feature has been landed and now works from the Variables View and the Console. Landed in March of 2014 in Firefox 30.

https://hacks.mozilla.org/2014/03/box-model-highlighter-web-console-improvements-firefox-os-hud-more-firefox-developer-tools-episode-30/

Answer 2

I think you are putting too much efforts in inbuilt debugger,

to debug javascript you must use fireBug its best tool,

This Link is for the addon of firebug, download and install the add-on its hardly 2 MB and then you will enjoy debugging.. :)

---

Edit: Selector in Debugger

I was searching answer for your specific question, and found out this

Web Console Method

Now here you are able to debug, get element and get selector details too.. (Refer Basic Usage)

You can directly access variables defined on the page:

> $ function(selector, context){
   return new jQuery.fn.init(selector,context);
}

please refer the above link for more details..

If native console is not available refer this link, this says,

Under Microsoft Windows you additionally need to start Firefox via the following command to have a native console :

firefox.exe -console

so that will enable firefox to start with console..

Edit: Log To log the element tested>> refere this link in that refer pprint() that will also behave in the same way.

Also Console API there refer console.log

I hope this will help..