Introducing CodeBurner: the SitePoint HTML & CSS Reference Tool for Firebug

Tweet

A new version of CodeBurner has been released. This release does not rely on Firebug — it’s a standalone extension, and for a limited time comes bundled with a free book! Grab yours now.

To coincide with the launch of the redesigned SitePoint Reference websites, we’re very excited to be launching a new browser extension we’ve developed — one that puts our reference data right in your test environment.

FireScopeCodeBurner is a new add-on for Firebug, the popular web development tool, that extends it with reference material for HTML and CSS. Using data directly from our reference sites, the tool provides the most accurate and up-to-date information on usage and browser compatibility, and it’s all right there in your browser!

FireScope CodeBurner’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties. The tool also hooks into context-menus in the HTML and CSS panels, the DOM crumbtrail, and the Inspector, adding options to look up a selected item (ie. search for it in the Reference panel) or to view a code example. For more information, screenshots and to download the extension, please visit the FireScope CodeBurner homepage.

A screenshot of CodeBurner, showing the Reference tab open in its default view

Written by yours truly, FireScope CodeBurner adds to the already-impressive range of tools available in Firebug, to further confirm its place as the single most useful development tool available to web developers.

But what about other browsers…? Well, for users of Internet Explorer, there’s the SitePoint Web Slices and Accelerator for IE8. And if there’s sufficient demand, we may develop other tools as well — such as toolbars for Internet Explorer and Opera, or maybe a standalone version for Firefox that doesn’t rely on Firebug. Would that be useful to you? Please do let us know!

We’re very interested to hear what you think of FireScope CodeBurner — the things you like about it, the things you don’t care for so much, or any new features you think it should have. Please do comment below, or if you’d prefer to make your views more privately please email us at support@sitepoint.com

Most of all we really hope you enjoy using FireScope CodeBurner as much as we’ve enjoyed putting it together. We’ll be writing about the development process in the near future.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Jarryd

    A very nice add-on for Firebug indeed. Makes a handy tool along side Firebug’s usual functionality and I will definitely be using the reference a lot.

    I like how the search is ‘on-the-fly’, type one letter and away you go! Also clicking more doesn’t load up in your current window, it loads in a separate tab in the background.

    Genius. :)

  • http://www.sitepoint.com ShayneTilley

    Glad you like it Jarryd — James has done some pretty amazing work here that’s for sure

  • Uri Sharf

    Seems like after you look up extended information on the SitePoint Reference website, you just can’t get rid of the page (inside FireBug), or go back… I don’t see any refresh option, or navigation options… and the SitePoint site is present in all the panles, regardless… unless you popout firebug into a float.

  • kennethjaysone

    Firescope is fantastic! Thank you so much.

  • http://www.cemerson.co.uk Stormrider

    Very nice – installed!

  • http://www.patricksamphire.com/ PatrickSamphire

    Very nice work. I’m definitely going to be installing this.

    And clever marketing, too. An excellent way to drive visitors to the site. This kind of marketing might be worthy of a case study for the marketing part of the site.

  • http://www.clearwind.nl peach

    Dude, this looks totally awesome! An incredibly valuable set of data added to firebug, thx a million :)

  • http://www.clearwind.nl peach

    I just installed the plugin and its great but there is one stupid thing that really bothers me.

    Because when working on complex layouts, 30% of the time is spent making things work in ie6… the way I imagined I would be using this plugin is by inspecting elements, then in the reference overview I would see which CSS properties on this element are poorly supported in ie6, but ie6 is missing! It starts with ie7.

  • sathomasga

    Very nice!

    I recognize the chances are slim, but it sure would be sweet to have this integrated into Safari’s Web Inspector. (For most sites, I prefer Web Inspector to Firebug.)

  • http://www.blakeanthonydesign.com BlakeAnthony

    Wow, this is a major advancement for sitepoint. Thank you very much for programming this addon tool. How GREAT! It’s amazing I can click anywhere on a page and I can look at my ‘Sitepoint Reference sheet’ (FireScope) and it will tell me what every element is when I click on it. I think this is as good as Firebug (Personaly) Widerbug is pretty neat as well check that out. http://www.command-tab.com/2008/01/19/widerbug-widescreen-firebug/

    James, you must have been up hour and hour’s developing this platform. Great Job. I woke up this morning saying to myself. This is going to take Sitepoint to the top. Congradulation’s and Good Job on the new release of (Firebug) and the Javascript Reference Page.

  • http://www.blakeanthonydesign.com BlakeAnthony

    I meant (FireScope) HeHe sorry guy’s.

  • http://www.richarddavies.us RichardDavies

    Wow! This is great! I haven’t had time to really start using it yet (except for following along with the examples on the FireScope home page) so I don’t have any specific complaints or suggestions yet. But so far it looks wonderful—a first class plugin that should be a must for any web designer/developer.

  • tjk

    Love it! Awesome work guys.

  • http://altoonadesign.com halfasleeps

    I don’t really use Firebug all that much. I use the Developer Toolbar much more.

  • dev_cw

    Very cool!

  • http://www.brothercake.com/ brothercake

    Thanks for all the feedback guys, very glad to hear that it’s proving useful :)

    Peach — it was a tricky choice of which browsers to include in the support summary; in the end we chose IE7 because it’s likely to be more future proof; as IE6 useage drops, fewer and fewer people are going to need that information. Nevertheless, IE6 support information is there in the main online reference.

    Uri Sharf – I’m afraid I don’t understand your comment. Can you clarify what you mean?

  • foxfire

    Very foxy logo, I must say. :)

  • Paul

    Thank you for this wonderful tool, I installed it this morning and I’m already in love with it.

    Thanks,
    Paul
    http://www.minnowwebdesign.com

  • http://aveco-service.be wvanelderen

    I get an empty Reference panel in Firebug. Any suggestions?

  • Gerald

    I love you guys!

  • sadara

    great! thanks for a very useful tool.
    how about a link-up to your javascript reference? or is that a bridge too far?!

  • Bas

    Love FireScope! Thanks!

    How about a FireScope-plugin for Dreamweaver? That would be really handy!

  • Paul C.

    I received the email announcement for FireScope and in downloading/installing I saw the ubiquitous “Author not verified” alert. (Firebug, NoScript, and Web Developer get it also.) Is it a lot of work or money to get verified? Is it of any value? Of my eight add-ons, I see WOT (Web of Trust), McAfee SiteAdvisor, and Netcraft Toolbar list authors.

    Always looking for secure best practices in ‘net interactions.

  • http://www.tyssendesign.com.au Tyssen

    The search function doesn’t work for me. Typing into the search field does nothing and neither does pressing enter. Right-clicking an element and choosing Look up selection returns me to the search pane but without the search input filled in. Choosing Show code examples works OK though. I’m guessing it’s an extension conflict.

  • MesmerLab

    I love how this is implemented inside of Firebug. Great job! I mentioned it on my site.

  • http://www.brothercake.com/ brothercake

    Paul C. — afaik you can’t have extensions verified, the only way to avoid that warning is to install it from the mozilla add-ons directory, which you can do at https://addons.mozilla.org/en-US/firefox/addon/10273 The only issue there is it’s still sandboxed, so you’ll need a login to download and install it from there.

    To those who it doesn’t work for – any information the JS console that might indicate where the conflict is?

  • Suma

    This is to reply from the e-mail I was sent concerning FireScope. Near the end of the e-mail, it was mentioned that you may release the add-on in different flavors.

    I would like to see a stand alone application version. I use TopStyle as my web authoring program, and this type of reference material would be great when creating the page(s).

    As always, greatly enjoy the many SitePoint e-mails and services.

  • http://www.clearwind.nl peach

    brothercake @ January 28th, 2009 at 11:26 am — Well, looking at my complex layouts I see that my ie7fixes.css file is usually only around 20 lines while my ie6fixes.css files is more like 60 lines on average, with much more trickery. So I would definitely put them both in, I usually use a whole, or half 1600×1200 monitor just for firebug so I definitely don’t see a space problem. Is there any source code where I can change this?

  • http://www.tyssendesign.com.au Tyssen

    Sorry, must’ve been a buggy restart by Firefox yesterday because it’s working fine today after restarting the PC.

  • aaron_w

    Love it —

    suggestion: why not put include a summary of possible valid values for attributes in there?

  • Andrew Gardner

    We’ve received quite a few queries about licensing with Firescope, basically here’s the deal.

    “The license that comes with it is about how you can redistribute the extension, not how you can use it yourself.

    Once you’ve installed it in your version of Firebug you can use it however you want – there’s no restriction on what kind of projects you can use it with.

    However, what you can’t do is redistribute it as part of a commercial project. For example, a commercial gecko-based browser that bundled Firebug by default could not bundle this extension as well.”

    Hope that clears up any uncertainty :)

    Thanks,

    Andrew

  • http://loadaveragezero.com/app/wp/ dwclifton

    A FireBug reference plugin with no JavaScript integration? A brand new SitePoint Reference section on JavaScript and no links to it? Hmmm… Nice work otherwise.

  • leva

    Thanks for making great addon. I find out this is useful and thoughtful when I install and use it.

    So, I translate it into Japanese(I’m Japanese), but having problems with following reasons..

    [1] Document is hardcoded.
    Thanks for nice work, I can translate notation of GUI, however main document files in chrome/content/examples/ isn’t prepared for internationalized.
    Please adjustment it to be able to translate multiple language.

    2. style for support-level table is disabled when translated.

    (This is small problem) Once I translated notation of support levels in locale/lang/lang.properties, style name of table showing support-level is also translated (therefore, style of them are disabled.)
    please distinguish between support notation and style-name of it.

  • http://www.brothercake.com/ brothercake

    Wow, thanks for this :)

    The changes you suggest are all do-able. I think the best thing is if you contact me by email at cake@brothercake.com then I can send you a development version for you to work with, which we can then schedule in for the next version update along with your translation :)

    cheers

  • Sam

    Hi

    Perhaps a silly question but can someone please explain how to install this extension?

    Many thanks

    Sam

  • http://www.brothercake.com/ brothercake

    Just visit the FireScoope homepage using Firefox, click on the “Install Now” link, and follow the instructions.

  • tiggsy

    The thing is, currently Firebug is disabled – because it’s not compatible with FF 3.0.6, the current version. In ubuntu, reverting to a previous version is very difficult, so it’s not really an option. So far as I recall, Firebug hasn’t worked for quite some time.

  • http://www.brothercake.com/ brothercake

    I’m running Firebug in Firefox 3 and it works just fine. Are you sure you’re running the latest version of Firebug? I suggest visiting http://getfirebug.com/ and grabbing the latest

  • Anonymous

    Would be nice if you will deliver an inteliJ Idea and Eclipse plug in’s.