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.
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.
Related posts:
- Announcing Version 1.1 of CodeBurner: the Reference Tool for Firebug A new version of the SitePoint Reference Tool for Firebug,...
- New Release: CodeBurner for Firefox. Grab the Extension, Get a FREE eBook! Firefox users rejoice! We're very excited to announce CodeBurner for...
- Introducing the NEW SitePoint CSS, HTML & JavaScript Online References When we first released our popular HTML and CSS Reference...
- Developing CodeBurner — An Exercise in Exploratory Programming When building CodeBurner, the new Firefox plugin that displays HTML...
- The CodeBurner Family Welcomes Three New Babies! Today sees the launch of a major upgrade to CodeBurner,...
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. :)
January 27th, 2009 at 5:41 pm
Glad you like it Jarryd — James has done some pretty amazing work here that’s for sure
January 27th, 2009 at 5:44 pm
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.
January 27th, 2009 at 6:24 pm
Firescope is fantastic! Thank you so much.
January 27th, 2009 at 7:07 pm
Very nice – installed!
January 27th, 2009 at 7:33 pm
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.
January 27th, 2009 at 8:42 pm
Dude, this looks totally awesome! An incredibly valuable set of data added to firebug, thx a million :)
January 27th, 2009 at 8:45 pm
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.
January 27th, 2009 at 8:54 pm
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.)
January 28th, 2009 at 12:18 am
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.
January 28th, 2009 at 4:20 am
I meant (FireScope) HeHe sorry guy’s.
January 28th, 2009 at 4:22 am
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.
January 28th, 2009 at 6:11 am
Love it! Awesome work guys.
January 28th, 2009 at 6:42 am
I don’t really use Firebug all that much. I use the Developer Toolbar much more.
January 28th, 2009 at 7:05 am
Very cool!
January 28th, 2009 at 9:54 am
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?
January 28th, 2009 at 11:26 am
Very foxy logo, I must say. :)
January 28th, 2009 at 1:42 pm
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
January 28th, 2009 at 3:39 pm
I get an empty Reference panel in Firebug. Any suggestions?
January 28th, 2009 at 6:45 pm
I love you guys!
January 28th, 2009 at 7:25 pm
great! thanks for a very useful tool.
how about a link-up to your javascript reference? or is that a bridge too far?!
January 28th, 2009 at 7:36 pm
Love FireScope! Thanks!
How about a FireScope-plugin for Dreamweaver? That would be really handy!
January 28th, 2009 at 7:39 pm
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.
January 28th, 2009 at 8:03 pm
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.
January 28th, 2009 at 8:48 pm
I love how this is implemented inside of Firebug. Great job! I mentioned it on my site.
January 28th, 2009 at 11:23 pm
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?
January 29th, 2009 at 3:03 am
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.
January 29th, 2009 at 3:55 am
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?
January 29th, 2009 at 4:09 am
Sorry, must’ve been a buggy restart by Firefox yesterday because it’s working fine today after restarting the PC.
January 29th, 2009 at 7:24 am
Love it —
suggestion: why not put include a summary of possible valid values for attributes in there?
January 29th, 2009 at 7:47 am
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
January 29th, 2009 at 11:17 am
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.
January 29th, 2009 at 5:28 pm
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.
February 12th, 2009 at 11:25 am
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
February 16th, 2009 at 8:56 am
Hi
Perhaps a silly question but can someone please explain how to install this extension?
Many thanks
Sam
February 19th, 2009 at 7:14 pm
Just visit the FireScoope homepage using Firefox, click on the “Install Now” link, and follow the instructions.
February 20th, 2009 at 3:43 am
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.
February 20th, 2009 at 8:29 am
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
February 20th, 2009 at 10:55 pm
Would be nice if you will deliver an inteliJ Idea and Eclipse plug in’s.
February 22nd, 2009 at 6:07 pm