Attributes Inspector (for developers)

[Infocatcher]

Author: Infocatcher
Install: attrsInspector.html
Source code and development version: github.com/Infocatcher/Custom_Buttons/tree/master/Attributes_Inspector

Shows tooltip with with all attributes and allow open DOM Inspector for current node

Usage:

• (Left-click on button to start)
• Use middle-click or Ctrl + left-click to inspect node in DOM Inspector
  (additionally hold Shift key to enable pupup locker)
• (Hold Shift key to show and don't hide tooltips and popups

Hotkeys:

• Escape – cancel or disable popup locker
• Ctrl+Up, Ctrl+Down – navigate to parent/child node
• Ctrl+Left, Ctrl+Right – navigate to previous/next sibling node (since v. 0.6.1pre)
• Ctrl+Shift+C – copy tooltip's contents
• Ctrl+Shift+W – inspect node's window object in DOM Inspector

Screenshot:

[makondo]

Thanks for posting it!
(it works fine) I'm just marking my spot here for future searches

[morat]

Great button!

★★★★★

Remember the button works in other windows like the Tools > Options prefwindow. It took me awhile to notice this.

@Infocatcher

Sometimes the tooltip shows a lot of empty space on the top. Is this a known bug?

http://i33.tinypic.com/4ih4pt.jpg

Custom Buttons 0.0.5.6pre5
Attributes Inspector 0.6.0
Firefox ESR 17.0.5 with a fresh profile
Windows XP SP3

[slbgz]

Sometimes the tooltip shows a lot of empty space on the top. Is this a known bug?

Yes, here is a fixed code for Attributes Inspector button:

https://github.com/Infocatcher/Custom_B ... 89c842ee0a

[morat]

Thanks slbgz. This change works for Attributes Inspector 0.6.0.

Code: Select all

  tt.textContent = "";
+ tt.removeAttribute("width");
+ tt.removeAttribute("height");

  var df = tt.ownerDocument.createDocumentFragment();

[mikedl]

This is, indeed, a great button!
Thanks, Infocatcher and slbgz!

[darkmatter]

Brilliant!!!

Makes an already great tool even better!

( ...and has become my new favorite toy! )

@slbgz
&
@morat

Works like a charm... Thanks!

[Infocatcher]

Attributes Inspector 0.6.2 (2013-08-15)
x Fixed hotkeys handling (#11, #12).
+ Added warning, if DOM Inspector isn't installed.
+ Added displaying of margins (#14).

[morat]

Does the button still work with content documents?

If I try to inspect the <p class="author"> element in this post, then the button opens the tabbrowser element id="content" in the chrome document.

* left click button to start
* select "by morat" in this post
* middle click to inspect element

Attributes Inspector 0.6.2
Custom Buttons 0.0.5.6
DOM Inspector 2.0.14
Firefox ESR 24.1.0 with a fresh profile
Windows XP SP3

[Infocatcher]

Does the button still work with content documents?

Strange, works fine for me with the same configuration on Windows 7 and on Windows XP SP3 (through Windows Virtual PC).
Any errors in error/browser console?

Also you may try to change

Code: Select all

var _showFullTree = 2; // 0 - current frame, 1 - top frame, 2 - topmost frame

as a workaround.