Professor X Extension for Firefox

// June 19th, 2006 // Web Design Software

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

Professor X Preview

18 Responses to “Professor X Extension for Firefox”

  1. links from Technorati Look inside the head element with Professor X A Firefox extension that lets you see the contents of an HTML document’s head element without viewing source. Look inside the head element with Professor X [IMG permanent link] 03 aug at 15:15 by Roger

  2. Vision says:

    links from Technorati– Iphone, Ruby on Rails development IDE , It is Eclipse plugin, CEO former JRun creator web development tools professor-x x-ray: view CSS, HTML source on same page: – both tools together are great if you have 2 screens side by side -http://www.designmeme.com/2006/06/19/professor-x-extension-for-firefox/Selenium is a test tool for web applications. Selenium tests run directly in a browser, just as real users do. And they run in Internet Explorer, Mozilla and Firefox on Windows, Linux, and Macintosh. No other test tool covers such a wide array of

  3. pickupjojo says:

    Very nice extension, good job ! :)

  4. Thanks. :-)

    Professor X will now work with the Flock Browser as well.

  5. [...] Ever wanted to look into the <head> section of a web page without having to constantly view the source? Well, good news folks – Stuart Robertson has released a new Firefox extension named Professor X because it gets into your head! [...]

  6. [...] The new version of X-Ray adds support for displaying tags for table, tr, script and a few other elements! The update also improves compatibility with the new Professor X Extension—also available for both Firefox and Flock. [...]

  7. Chris Granger says:

    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. :)

  8. Markus says:

    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.

  9. Look inside the head element with Professor X…

    A Firefox extension that lets you see the contents of an HTML document’s head element without viewing source….

  10. Nate says:

    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.

  11. HeadY says:

    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 ;)

  12. [...] I’m gonna tell you what I really think I like about Mondays. I have one class. It’s at 1:30pm. And it’s Web Design. Oh man. We were talking about Technorati today. Technorati! There are only like 4 friends of mine who know what Technorati is, none of whom go to Gumber. The guy teaching the course, Stuart Robertson, is the U of G webmaster, writes Firefox extensions and has had an article posted to the front-page of Digg. Pretty cool. [...]

  13. Forchheim says:

    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

  14. MMWeb says:

    All in all great extension. Good looking and useful.

    One bug: can’t select the headers and copy them

  15. berbs.us says:

    My Favorite Firefox Extensions…

    One of my friends recently asked me what I’m using for extensions in Firefox 2, then suggested I share my list with the world. So, that’s exactly what I’m doing here. I’ll split them up by category so you can……

  16. [...] Professor X and X-Ray, both commonsensical web development plugins that let you see either head or body tag information/structure without leaving the page. [...]

  17. dezign says:

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