Page 1 of 5

Attributes Inspector (for developers)

PostPosted: Sun Apr 21, 2013 10:35 pm
by 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:
Image

Re: Attributes Inspector (for developers)

PostPosted: Sun Apr 21, 2013 11:08 pm
by makondo
Thanks for posting it!
(it works fine) I'm just marking my spot here for future searches Image

Re: Attributes Inspector (for developers)

PostPosted: Tue Apr 23, 2013 4:30 pm
by 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

Re: Attributes Inspector (for developers)

PostPosted: Tue Apr 23, 2013 4:55 pm
by slbgz
morat wrote: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

Re: Attributes Inspector (for developers)

PostPosted: Tue Apr 23, 2013 6:38 pm
by 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();

Re: Attributes Inspector (for developers)

PostPosted: Wed Apr 24, 2013 10:26 pm
by mikedl
This is, indeed, a great button!
Thanks, Infocatcher and slbgz!
Image

Re: Attributes Inspector (for developers)

PostPosted: Fri May 03, 2013 10:50 pm
by darkmatter
    Brilliant!!! 8-)
Makes an already great tool even better!

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

    @slbgz
    &
    @morat

Works like a charm... Thanks!

Re: Attributes Inspector (for developers)

PostPosted: Thu Aug 15, 2013 1:39 pm
by 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).

Re: Attributes Inspector (for developers)

PostPosted: Sat Nov 16, 2013 8:40 am
by 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

Re: Attributes Inspector (for developers)

PostPosted: Sat Nov 16, 2013 12:36 pm
by Infocatcher
morat wrote: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.