Thursday, January 8th, 2009
Category: Debugging
Rob Campbell posted on the 1.3 final release of Firebug, the stable release for the Firefox 3 world:
Release notes are here. As mentioned previously, this version will not be compatible with Firefox 3.1 (Shiretoko) and up. For that you’ll need a Firebug 1.4 alpha, soon to be dubbed beta available on getfirebug.com’s releases directory. Notes are on the releases page.
If I can babble a bit for a second, I’d like to say that I’m pretty proud of this release. Honza has made some fantastic improvements to the Net panel. John Barton has improved the Script panel and debugging features as well as tweaking the console. Maybe more significantly were some of the changes under the covers. The new Tracing panel (FBTrace) for debugging Firebug itself during development is a huge improvement over the previous console-based system. We’re starting to get some unittest coverage through John Resig’s and Honza’s FireUnit. And I think community involvement is at an all-time high with some excellent testing and bug reporting coming from all corners of the world. The message is getting out that Firebug is a great project to be involved in and that community contribution can really help move it forward.
So, thanks to everybody who helped out with this release. I think it’s the best Firebug yet.
The team seems to be gelling together and really doing some great work. I am looking forward to see more in 1.4 and above.
Wednesday, January 7th, 2009
Category: Canvas, Debugging
Ben was cursing at a bug in some canvas code that he was playing with, where the rendering was off. One piece of his UI was blurred instead of crisp.
The debugging exersize was fun, and he shares it with you on his personal blog.
The moral of the story is: watch out for that zoom feature in today's browsers!
Along the way, I got to learn that canvas supports fractional coordinates:
My first thought was that it would be due to fractional coordinates. I have years of experience with drawing APIs that force integer coordinates, so I’m used to relying whacking off the fractional part of a coordinate and making up the difference when necessary in a second pass. Canvas, on the other hand, supports fractional coordinates, which I’m told is the fancy thing to do these days. (How the fraction is converted to an actual pixel is depenendent on whatever drawing system is doing the heavy lifting somewhere down the stack.) When your coordinates are fractional, you can get this kind of fuzziness.
Because the interface I’m working with involves a few layers of rendering code, ensuring that integers ruled the roost took some time. But after quite a bit of poking around, I found no evidence of fractional coordinates. It was around this time I saw Vlad (Mozilla’s graphics guru) walking around the office and asked for some help.
We started looking for evidence of transforms that would introduce fractional coordinates–but ultimately came up empty handed. As we went through this process, he pointed out that the <canvas> context instances are reused, so it’s a really good idea to save() and restore() when obtaining a canvas to avoid polluting the context:
JAVASCRIPT:
-
-
var ctx = canvas.getContext("2d");
-
ctx.save();
-
// painting here
-
ctx.restore();
-
I had assumed each call produced a fresh, stateless context, so this was welcome news indeed.
But, user error was the true case:
And that’s when we noticed that I had zoomed in a click using Firefox 3’s fancy full page zoom feature. And that was causing the image the be scaled up, and the blurriness.
Monday, January 5th, 2009
Category: Debugging
Alvaro Videla has a fun post on extending the WebKit Web Inspector with something a little strange.... a game:
Alvaro walks through how to take some JavaScript/CSS/HTML and plug it into the inspector world (normally hidden somewhere like /Applications/WebKit.app/Contents/Frameworks/10.5/WebCore.framework/Versions/A/Resources/inspector) and adding panels (e.g. see the new game panel here:)
JAVASCRIPT:
-
-
this.panels = {
-
elements: new WebInspector.ElementsPanel(),
-
resources: new WebInspector.ResourcesPanel(),
-
scripts: new WebInspector.ScriptsPanel(),
-
profiles: new WebInspector.ProfilesPanel(),
-
databases: new WebInspector.DatabasesPanel(),
-
game: new WebInspector.GamePanel()
-
};
-
Thursday, December 18th, 2008
Category: Debugging, Firefox
John Resig and Jan Odvarko have announced something pretty darn cool, FireUnit.
FireUnit provides a simple JavaScript API for doing simple test logging and viewing within a new tab of Firebug.
The example given shows the API nicely:
JAVASCRIPT:
-
-
// Simple true-like/false-like testing
-
fireunit.ok( true, "I'm going to pass!" );
-
fireunit.ok( false, "I'm going to fail!" );
-
-
// Compare two strings - shows a diff of the
-
// results if they're different
-
fireunit.compare(
-
"The lazy fox jumped over the log.",
-
"The lazy brown fox jumped the log.",
-
"Are these two strings the same?"
-
);
-
-
// Compare a string using a regular expression
-
fireunit.reCompare(
-
/The .* fox jumped the log./,
-
"The lazy brown fox jumped the log.",
-
"Compare a string using a RegExp."
-
);
-
-
// Display the total results
-
fireunit.testDone();
-
-
// -- browser events
-
-
// You can also simulate browser events
-
var input = document.getElementsByTagName("input")[0];
-
fireunit.mouseDown( input );
-
fireunit.click( input );
-
fireunit.focus( input );
-
fireunit.key( input, "a" );
-
-
// -- Run batches
-
-
// Or run multiple pages of tests:
-
fireunit.runTests("test2.html", "test3.html");
-
-
// Place at the end of every test file in order to continue
-
fireunit.testDone();
-
Tuesday, December 2nd, 2008
Category: Debugging, Utility
Greg Salisbury has released a new JavaScript debugger called XBug that "currently runs on the Windows XP/Vista platform, but, it can also be used to debug webpages on Windows or Linux servers. It's cross-browser compatible, and works with Chrome, Firefox 2/3, IE 6/7, and Safari 3. After selecting your web page, you can then trace or step through your javascript code in real-time. Set breakpoints, and watchpoints in a separate code window, see a trace log while your code is executing, inspect variables, and even get an indexed list of the functions/methods in your scripts."
Fancy a try? Grab the msi and get to it.
Monday, November 24th, 2008
Category: Debugging, JavaScript, iPhone
KUMAGAI Kentaro has created a JSCocoa based interactive console for the iPhone:
I’ve been struggling with transform property of UIView for long time. at last, I’ve decided to create UIMonkey that allows to manipulate the variables by trial and error through HTTP in Javascript with SpiderMonkey. Few days after I’ve started the project, I found JSCocoa through John Resig's article and I abandoned my project and rewrited my codes on JSCocoa.
Now it works on the top of JSCocoa. It’s very helpful while inspecting the hierarchy of the view tree or size of the views etc.
Very cool stuff as you can run code on the fly and see it all change in the emulator. His article explains how you set it up, and gives you some fun examples.
Tuesday, November 11th, 2008
Category: Debugging, Dojo
Tom Trenka has a nice posting on Dojo and Firebug Tricks for Development where he shares two of his own:
Trick #1: using window.location.search to enable Firebug Lite on the fly
With the Dojo Toolkit, I find this trick indispensable. The basic concept is to use the original version of the djConfig variable—the object-based one—using a boolean to enable or disable debugging.
In a single line of code, here’s the trick:
JAVASCRIPT:
-
-
var djConfig = { isDebug: (window.location.search.indexOf("debug")>-1) };
-
Trick #2: setting up a simple HTML file that just enables the console
Once you drop in the simple HTML file below, you can bookmark it, load up your Dojo world, and then start to use Firebugs "Run" command to access Dojo-ness.
Start with this:
HTML:
-
-
-
-
<title>Dojo Console Testing
</title>
-
-
src="dojo/dojo.js" djConfig="isDebug: true">
-
</script>
-
</head>
-
-
-
This is a quick and dirty file you can use
-
to do console-based development.
-
</p>
-
</body>
-
</html>
-
And then "Run" something like this:
JAVASCRIPT:
-
-
dojo.require("dojox.xml.DomParser");
-
-
var xml='<?xml version="1.0"?>'
-
+ '<root><node>My first node</node>'
-
+ '<node>My second node</node>'
-
+ '</root>';
-
var doc=dojox.xml.DomParser.parse(xml);
-
console.log(doc);
-
What tips and tricks do you have?
Thursday, October 2nd, 2008
Category: Debugging, PHP
Alvaro Videla just wrote in to tell us about Firesymfony, a Firebug extension that provides an alternative to Symfony's built-in web debug toolbar.
sometimes the toolbar position makes impossible to use some features of the layout of our website, like a link menu on the top right corner. It also happens that while we display a small popup with the resize functionality disabled it’s turns hard to access all the data displayed by the toolbar.
The solution I’ve came up with is to move all the data from the toolbar to Firebug, actually, to port the symfony web debug toolbar as a Firebug extension. This will remove the toolbar from the page html and will show it in a convenient place that almost every web developer is used to.
Taking advantage from the cool new features of symfony 1.2 I started a project to develop a symfony plugin to send the data to the Firebug extension. The later has been smartly called FireSymfony.
Alvaro has another blog post that talks more about the first release.
Tuesday, August 26th, 2008
Category: Debugging, Firefox
John has announced the Firebug 1.2 final release. As well as just supporting Firefox 3, there are some quality improvements:
The Script panel (the JavaScript debugger), the Net panel (network monitoring), and Console panel have all seen considerable updates. They're all much more performant and have a huge number of bug fixes.
Specifically the Console panel has seen a number of security improvements. We'll be discussing the specific nature of these changes once everyone has had enough time to upgrade to Firebug 1.2.
A list of all the bug fixes can be found in the full release notes.
Who enabled me?
Taking in to consideration the above performance points (namely the fact that enabling the Console, Script, or Net panels have the potential to incur a global overhead on all browser tabs) a feature was added to help you minimize your use of the panels in errant tabs.
If you position your mouse over the Firebug icon, in the Firefox tray, a tooltip will pop up telling you two things: The version of Firebug that you're using and which tabs have some Firebug panels enabled in them.
It should be noted that the Firebug will be a gray color if no tabs currently have a Firebug panel enabled at all.
Using the above tooltip you can now go in and selectively disable any panel usage that you are no longer utilizing.
Suspend/Resume Firebug.
Of course, when using the above tooltip (or seeing that the Firebug icon is lit up), you'll just want to suspend all use of Firebug panels straight out without having to poke-around each individual tab.
A new Suspend/Resume menu option has been added that will suspend/resume all active panels. This is a one-click way to keep Firebug in check.
Suspend/Resume Firebug.
Friday, August 8th, 2008
Category: Debugging
Steve Souders hosted the Firebug Working Group meeting at Google last week, and after seeing how detailed his notes are I wish I could hire him as my personal assistant ;)
Highlights
Firebug 1.2 is nearing final beta. After testing it’ll be promoted to stable. The main focus for the next release is going to be performance, stability, and testing. Some new features are on the todo list, such as adding new CSS rules, viewing bound DOM event handlers, and exporting CSS changes. More details are available in my notes from the meeting. It’s very exciting to have Mozilla more involved, and bodes well for the future of Firebug.
Friday, July 25th, 2008
Category: Debugging, Performance
Steve Souders gave a talk at OSCON yesterday where he demonstrated the new Firebug Lite 1.2.
Today Firebug Lite 1.2 was released. This new version was built by Azer Koçulu, creator of pi.debugger. Azer joined the Firebug Working Group, morphed the GUI to look Firebug, and added it to the Firebug code base.
Firebug Lite is a subset of Firebug that can be used in IE, Opera, and Safari. The previous version provided console.log functionality. In Firebug Lite 1.2, Azer added the ability to inspect DOM elements, track XHRs, and navigate HTML, CSS, and JavaScript. You can embed it in your pages and enable debugging. I prefer creating a Firebug Lite bookmarklet that I can launch on any web page. Instructions and more information are available on the main Firebug Lite page.
If you like a little Firebug love when you debug non-Firefox browsers, check out the very much improved version!
Monday, July 21st, 2008
Category: Debugging, Plugins
Adam DuVander over at WebMonkey has compiled a list of their five favorite Firebug extensions. The ever-popular YSlow tops the list, but to that they add:
- Firecookie for easy access to cookie information
- FirePHP to integrating server-provided PHP debugging information with the Firebug UI
- Pixel Perfect for overlaying mock-ups on top of the real thing to ensure you've got a good implementation
- Rainbow for JavaScript syntax highlighting
Nice list!
Friday, July 18th, 2008
Category: Debugging
Great news for all Web developers out there (that be you!). Firebug is going to get a shot in the arm. Joe Hewitt has had to slow down his work on the tool, and thus the Firebug Working Group was created, to try to make the tool continue to thrive.
The work has been mainly done recently by John J Barton of IBM, and Jan Odvarko. They will now be joined by 50% of a John Resig:
I've got a mini-announcement. Starting this week about half of my time at Mozilla is going to be spent driving the direction of the brand-new Mozilla Firebug team. I'm, understandably, quite excited about this proposition. Like all web developers I've found Firebug to be an invaluable tool for web development.
We're in a very primordial stage right now - we're meeting at the Firefox Summit at the end of the month and again at the beginning of August for the Firebug Working Group. We'll be setting some major goals for post-Firebug 1.2 development. I highly suspect that we'll be doing some exploratory Firebug extension development as well.
Also, Rob Campbell (Mozilla hacker, tester, and tool developer) will be joining them.
This is at a time that Firebug really needs this shot in the arm, so I can't wait to see what happens next. If you have ideas on what you want to see, let them know.... they are listening.
Wednesday, July 9th, 2008
Category: Debugging
Jan Odvarko, a member of the Firebug Working Group, has kicked out a set of tutorials on extending Firebug.
If you have some functionality that fits into the performance world, instead of creating a new plugin, you can embrace and extend Firebug as other great tools such as YSlow have done.
To learn more, read up on:
Tuesday, June 3rd, 2008
Category: Debugging, Dojo
Mike Wilcox has posted on Firebug Lite for Dojo and shows how he has taken it beyond console.log().
I was most excited about the DOM inspector:
Yes, I did say that a DOM inspector would imitate existing tools. However, I implemented this for a colleague who was struggling with a particularly nasty IE 6.0 bug one day (more like one month), as he expressed a wish to view the dynamic DOM to verify hover states in IE6 — the one browser without this tool. Because Firebug Lite already had some nice formatting built in with the dirxml() method, it was just a matter of grabbing the current event target from the onmousemove event, and displaying the result in its own section. The current target is outlined, and clicking on it makes it “stickâ€.
As much as everyone loves Firefox, the Dojo team is committed to the Open Web, which means encouraging competition amongst browsers. One way of fostering that competition is through debugging tools, such as Firebug Lite. We are trying to make it as easy as possible to code for large user-base browsers like Internet Explorer, or preferred browsers, like Safari or Opera, or… [your favorite browser here].
