Source
One of my New Year’s resolutions was to create an “interesting script, plugin, extension, or widget.†I didn’t think I’d write a Firefox Extension only six days into 2006, but after writing about using the CSS :before and :after pseudo elements to create CSS Curly Quotes, it got me thinking about other uses for that technique. I thought that wrapping the elements on a page with the actual tags from the sourcecode might be a good tool for learning and debugging, but wasn’t sure how to go about creating an extension. Fortunately, I found a great tutorial at roachfiend.com and with a little trial and error, I’ve finished my first extension.
The X-Ray Firefox Extension let’s you see the tags on a page without viewing the sourcecode.
Install X-Ray Extension for Firefox
One installed the X-Ray command is available by right-clicking as well as in the Tools menu. When applied to a page it can help you see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser. Is that list made of li dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what’s beneath the surface of the page.
While I create webpages all the time, there’s something about writing a piece of code you have to install that’s very satisfying. Even better was finding that it was actually something I’d find helpful myself.
For version 0.5 the current list of supported tags is: h1, h2, h3, h4, h5, h6, p, ol, ul, li, dt, dd, font, div, span, blockquote, pre, a, b, i, strong, em. If some other people find this extension useful, I’ll probably add support for more tags, and possibly experiment with adding some other enhancements as well.
Update
By request from the nice folk at digg.com here’s a screenshot of the extension in use:
One of my New Year’s resolutions was to create an “interesting script, plugin, extension, or widget.†I didn’t think I’d write a Firefox Extension only six days into 2006, but after writing about using the CSS :before and :after pseudo elements to create CSS Curly Quotes, it got me thinking about other uses for that technique. I thought that wrapping the elements on a page with the actual tags from the sourcecode might be a good tool for learning and debugging, but wasn’t sure how to go about creating an extension. Fortunately, I found a great tutorial at roachfiend.com and with a little trial and error, I’ve finished my first extension.
The X-Ray Firefox Extension let’s you see the tags on a page without viewing the sourcecode.
Install X-Ray Extension for Firefox
One installed the X-Ray command is available by right-clicking as well as in the Tools menu. When applied to a page it can help you see how the document was constructed without having to go back and forth between the sourcecode and the page in your browser. Is that list made of li dd or p elements? Is that an h3 tag or just some bolded text? X-Ray shows you what’s beneath the surface of the page.
While I create webpages all the time, there’s something about writing a piece of code you have to install that’s very satisfying. Even better was finding that it was actually something I’d find helpful myself.
For version 0.5 the current list of supported tags is: h1, h2, h3, h4, h5, h6, p, ol, ul, li, dt, dd, font, div, span, blockquote, pre, a, b, i, strong, em. If some other people find this extension useful, I’ll probably add support for more tags, and possibly experiment with adding some other enhancements as well.
Update
By request from the nice folk at digg.com here’s a screenshot of the extension in use:
