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