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 mand hidden or private somehow, or not initialized?

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 mand hidden or private somehow, or not initialized?

• javascript
• debugging
• firefox-addon
• watch
• firefox-developer-tools

• Have you checked the development tools in Firefox 25 (Firefox Nightly), this might contain the stuff you want. I also highly remend you to use FireBug because it has a lot of usefull features, also the one you're searching for. – Tim Visée Commented Jul 1, 2013 at 22:34
• @TimVisee Thanks, but I couldn't even get as far as adding a watch like in the screenshot above, in Nightly. Are you saying the highlighter api in robcee's answer is available, or soon to be available in 25? – NoBugs Commented Jul 2, 2013 at 3:17
• @TimVisee Where is that feature in the soon-to-be-released Firefox 25? – NoBugs Commented Oct 19, 2013 at 6:04
• You can use an alpha version if you'd like, you should give Firefox Nightly a try. Make sure you know that this version might be a bit unstable, I personally use it as my main browser and I don't have much problems though. Anyways, you can find a download on this page: nightly.mozilla. Once you've downloaded and started Nightly (You can't start nightly and firefox at the same time!) you have to use the firefox menu, then you'll see a developer menu with lots of features included. Hope this helps! – Tim Visée Commented Oct 19, 2013 at 10:07
• I didn't see the inspected-object's element highlighting in Nightly when I used it recently. How do you activate that? – NoBugs Commented Oct 19, 2013 at 14:42

2 Answers 2

You can't really use the highlighter from the Debugger directly yet. We have a bug open (https://bugzilla.mozilla/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 mand 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 uping 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/2014/03/box-model-highlighter-web-console-improvements-firefox-os-hud-more-firefox-developer-tools-episode-30/

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 mand 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..