Enable this script and it will add every page element's ID to it's title. The title is usually shown in a little "tool-tip" pop-up.

For example:
<h1 id="head">
becomes
<h1 id="head" title="[ H1 id="head" ]">
and
<input id="login" title="enter login name">
becomes
<input id="login" title="[ INPUT id="login" ] enter login name">

This is mostly helpful for Stylish users, you can quickly id parts of the page you want to change, or you can search the source of large pages easier if you know the id you're looking for.

- v0.2
You can change the var attribute = "id"; to any other attribute. For example you can change it to var attribute = "style"; to show the inline style of any element.
You can edit the script on your computer.

- v0.3
The title tool-tip now shows the tag name and attribute name, in HTML the tag name is always upper case.
The original title text, if any, will be on the second line.

Note that this script shows the DOM element attribute value, which may not be exactly the same as the document source, for example style="color:#FFFFFF" is converted to style="color: rgb(255, 255, 255);". This is actually very helpful for XPath expressions.

2 fans