Professor X Extension for Firefox

June 19th, 2006

My second Firefox extension is ready for download today! Professor X let’s you see inside a page’s head without viewing the sourcecode. This is the companion extension to X-Ray which reveals the underlying code within a page’s body, although either extension can be installed and used on its own.

Once installed the Professor X command is available by right-clicking as well as in the Tools menu. When applied to a page it will display the contents of the page’s head element, including Meta, Script and Style content. This can help you see how a website was constructed without having to go back and forth between the sourcecode and the page in your browser.

Professor X was created with a little bit of JavaScript, and a lot of CSS 3, to display and style elements in the head of the document. CSS 3 selectors and CSS generated content helped make this a more visually pleasing tool than I had originally planned (If people are interested I’ll post some more details about how the code works). Special thanks to Mark James for his outstanding Silk Icons!

Just like the X-Ray extension (which will be updated very soon), Professor X was developed to help my students learn how web pages are constructed. However, since developing the first test-version I’ve found it helped me quickly spot errors between the head tags on pages I’d looked at dozens of times before. I hope other web designers will find it a useful extension to add to their toolbox as well.

If you find either of these extensions useful, please consider making a small donation to support future development work. Thanks!

Preview

Tags: development, extension, web
Posted in tools, web design | 18 Comments »

18 Responses to “Professor X Extension for Firefox”

Feed for this Entry Trackback Address

1 pickupjojo Jun 19th, 2006 at 10:54 am

Very nice extension, good job !
2 Stuart Robertson Jun 20th, 2006 at 9:31 am

Thanks.

Professor X will now work with the Flock Browser as well.
3 Chris Granger Jul 30th, 2006 at 8:26 am

On sites with a lot of meta tags and so forth, it fills more than one screen’s worth but there are no scrollbars… Might need a tweak there. Otherwise, very handy.
4 Markus Aug 3rd, 2006 at 5:11 am

Good Job!
I love this Tool already, but there is one thing missing, it’s the http response code that would be nice to have in this extension.
5 Nate Aug 3rd, 2006 at 12:50 pm

I’d like to put in a second request for the http response header. I mean it’s available in the web dev toolbar, but the format you made here is so much nicer.
6 HeadY Aug 28th, 2006 at 6:22 pm

Whould be nice if the .js Files are clickable…
Thats the main reason for me to stealth into other ppl header´s.
Thx for the next update
7 Forchheim Sep 30th, 2006 at 5:39 am

I´d like to have the opinion of another background-color or just have a lighter grey for the text to get a better contrast.
The rest is fine !

Yours Forchheim
8 MMWeb Oct 31st, 2006 at 9:32 am

All in all great extension. Good looking and useful.

One bug: can’t select the headers and copy them
9 dezign Jan 8th, 2008 at 6:48 pm

What a fabulous!! tool for web developers, designers & educators …
thank you sooo much !