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].
Thursday, May 22nd, 2008
Category: Debugging, Firefox
Firebug 1.2 beta is in the wild. The latest beta of the bug your FF3RC will love features:
Enablement UI
- Disable always: when the Firebug UI is not active on any page, the debugger is disabled (minimal overhead)
- Instant on: when the Firebug UI is active, HTML, CSS, DOM views activate (minimal overhead)
- Script panel user-activation: initially disabled or enabled always
- Net panel user-activiation: initially disabled or enabled always
- Bug Icon gray unless some page has Script or Net panel activation
- No Allowed-sites/Disable for Site: no longer needed. The UI for this feature is being refined; overhead tests have not been completed. We are interested in feedback on this UI change.
Javascript Debugging
- Written/cleaned up eval support
- Performance on eval better, easier to support. This feature is complete; Bug reports on javascript debugger welcome.
Net Panel
- Net timing more accurate
- Only real network requests displayed.
- Limit for number of requests (configurable in preferences).
- Additional columns for: request method, status response + text
- Cache tab has expiration time in Net panel
Console
- Redesigned to use events/attribute passing.
tests/console/joes-original/test.html mostly passes
Command Line
- Redesigned to avoid using evalInSandbox.
tests/console/commandLineObjects.html mostly passes
commandLineAPI functions, ok.
DOM Panel
- Works for FF3pre after about 2008041406 (https://bugzilla.mozilla.org/show_bug.cgi?id=425139)
Bug away!
Simon Willison also recently pointed out the command line API that lets you "set a breakpoint at the start of a function with “debug(fn)†and log all calls to it with “monitor(fn)â€."
Tuesday, May 6th, 2008
Category: Debugging, Opera, Utility
Opera has posted what looks like a great new Web debugging tool Opera Dragonfly which is released in alpha.
Debug JavaScript, inspect CSS and the DOM, and view any errors – Opera Dragonfly makes developing using Opera easier than ever, both on your computer and mobile phone.
Shawn Lauriat has a nice write-up that tells the story:
It offers most of the familiar tools for DOM inspection (along with a nice DOM editing capability), error logging (with the same granularity as before wrapped in a more polished UI), a JavaScript debugger that rivals WebKit's Drosera, a JavaScript thread logger, and a lot more that I haven't explored yet.
Time will tell whether Dragonfly can get enough developers to use Opera and keep them there, and how much the developers behind the new developer tools listen to the community in the coming iterations, but so far this looks extremely promising.
Features
- Reach breaking point step by step: Opera Dragonfly's fully featured JavaScript debugger makes building sophisticated Ajax applications easier than ever. Step through your code line by line, setting break points along the way. This allows you to make sure your application and scripts are acting as you designed them.
- Redefine your style: Its not just the DOM you can inspect. Check out what CSS rules apply to which element, and what rules are inherited or set by browser defaults. Overridden rules are highlighted so you can see what styles are or aren't applied. Support for editing CSS rules will be added in an upcoming version.
- Spot your errors: An improved error console allows you to see, filter and log any errors in your scripts, pointing to the exact position the error occurred. Use this in combination with the other tools to hunt down and fix your site’s bugs.
- Debug the DOM: View source isn’t much use if you use DOM Scripting to alter the DOM. Opera Dragonfly allows you to inspect the updated DOM and all it's properties. Support for editing the DOM will be added in an upcoming version.
The features that are not there yet, but are upcoming, include support for editing of CSS, JavaScript and the DOM, a single window mode, improved JavaScript thread handling, XHR and HTTP monitoring, improved keyboard navigation, and translation into a number of languages.
Have you checked it out? How do you like it?
Wednesday, April 30th, 2008
Category: Browsers, Debugging, Showcase
PPK has published new event compatibility tables that test the event registration models (traditional, W3C and Microsoft) as well as event bubbling and capturing.
There is a lot of data here on the quirks of the various browsers.
Tuesday, April 8th, 2008
Category: Debugging
Azer Koçulu has added to pi.comet with a new cross browser debugger pi.debugger.
The look is inspired by Firebug:
Check out the open source project.
Monday, March 31st, 2008
Category: Browsers, CSS, Debugging, jQuery
Mario Heiderich of Ormigo has created a jQuery based code snippet/bookmarklet that is capable of detecting floating errors and adding a dotted orange border to elements which should be cleared - but aren't.
It saved me a huge bunch of time debugging complex layouts for all browsers - especially IE6. If jQuery isn't already loaded on the page it can easily be fetched with the several jQuerify approaches.
Snippet
JAVASCRIPT:
-
-
(function(){
-
function checkNext(element, floating) {
-
if(element.css('clear') != 'none') {
-
var clearing = true;
-
} else {
-
if(element.next().length !== 0) {
-
var clearing = false;
-
checkNext(element.next(), floating);
-
} else {
-
console.log(element);
-
element.css({border:'2px dotted orange;'})
-
}
-
}
-
}
-
$('body *').each(function(){
-
var element = $(this);
-
if(element.css('float') !== 'none' && element.next().length !== 0) {
-
checkNext(element.next(), element.css('float'));
-
}
-
eval('');
-
});
-
})();
-
Bookmarklet
JAVASCRIPT:
-
-
javascript:eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(3(){3 5(a,b){4(a.2(\'p\')!=\'9\'){6 c=h}d{4(a.1().7!==0){6 c=o;5(a.1(),b)}d{n.m(a);a.2({l:\'j i k;\'})}}}$(\'g *\').f(3(){6 a=$(e);4(a.2(\'8\')!==\'9\'&&a.1().7!==0){5(a.1(),a.2(\'8\'))}q(\'\')})})();',27,27,'|next|css|function|if|checkNext|var|length|float|none||||else|this|each|body|true|dotted|2px|orange|border|log|console|false|clear|eval'.split('|'),0,{}))
-
Category: Debugging, Firefox
There are some bleeding edge releases in the world of the Firebug.
A new alpha version of Firebug 1.2 is available for testing. It has several performance improvements, and some new UI. Give it a go and report any issues.
Also, ChromeBug takes Firebug into the world of debugging full Firefox extensions. It depends on the alpha of Firebug 1.2 and once installed you can boot it up via:
firefox.exe -chrome chrome://chromebug/content/chromebug.xul -firefox
