How to get the target tracking element of a Firefox debugger?

Question

I am trying to add a highlighting function to the Firefox DevTools debugger, so it will highlight the element and not show [HTMLAnchorElement] or similar. I know this is possible, since you can set someElement.style.border='1px solid blue' or similar as a clock, and it highlights the element. So, why not let it save the current border and show it when you hover with element.style.border='1px solid blue' and restore it to the mouse?

While debugging in Firefox devtools, I noticed that the element in the right pane of the clock has lines with variable names, which are actually given odd identifiers like "46439" under the parent element with "document.getelementsbytagname ('a') 36" I would. What do these identifiers mean? Can they map a display element to its target element on the page? I tried window.DebuggerView.WatchExpressions.getItemForElement from Venkman, but it returns null. Is there any other function from this source file that will let the target debugger item look?

Ideally, I should be able to “watch” elements such as document.getElementsByTagName('a') , or a local variable in the debugging context, and highlight elements on the page, such as Chromium / Firebug. However, I'm not sure how to add this feature from the Firefox extension.

Update

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

Answer 1

You cannot use the token from Debugger yet. We have a bug ( https://bugzilla.mozilla.org/show_bug.cgi?id=653545 ) to make the marker more accessible for our other tools.

If you have a unique selector, you can use the command line (Shift-F2 to open the developer toolbar) to check the item with:

 inspect unique-selector 

We intend to make DOM objects vibrant in all future versions of Firefox Developer Tools.

edit - this function has landed and now works from the variable view and the console. Landed in March 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 effort into the built-in debugger,

to debug javascript you must use firebug its best tool

This link is for the firebug addon, download and install the add-in a little less than 2 MB, and then you will like debugging .. :)

---

Edit: Selector in debugger

I searched for the answer to your specific question and found out about it

Web Console Method

Now you can debug, get items and get detailed information about the selector. (See Basic Usage )

You can directly access the variables defined on the page:

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

Please refer to the above link for more details ..

If the native console is not available, refer to this link , it says

On Microsoft Windows, you also need to start Firefox with the following command in order to have your own console:

firefox.exe -console

to enable firefox to run from the console.

Edit: log To register a checked item -> refere, this link is pprint () in this regard, which will also behave the same.

Also, the Console API refers to console.log

Hope this helps ..