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
Wednesday, March 26th, 2008
Category: Debugging, Utility
Thierry Parent has released a new version of TraceTool, his open source tracer program, with a JavaScript client.
The javascript TraceTool API is a cross browser (tested under Internet Explorer 6, Internet Explorer 7, Firefox 2 and Opera for mobile) and cross domain tracing solution (maybe the first one). The viewer can be installed on any windows PC (localHost for example) while you are displaying a page from another server. Debuging a Web page from your mobile is very easy. Just configure the TraceTool JavaScript client to use the viewer on the network.
To allow sending traces to another server as the original page (Cross domain communication), the API does not use Ajax (Single domain) but dynamic script creation. Traces are encoded and passed in parameter to the viewer. Large trace messages are split into multiple scripts.
With this API , you can send simple traces, objects , dump, call stack, manipulate traces (sub traces, delete, append,...) and more.
An ideal complement to firebug and a great enhancement to IE debugging with one API for Java, JavaScript, .Net, Delphi, C++ and ActiveX.
Thursday, March 6th, 2008
Category: Debugging
Jan Odvárko "missed two movie nights" to create cookie support in Firebug. His Firebug plugin, Firecookie, gives you access to view, search, create, remove, and manage the permissions of a cookie, all from within a Firebug tab.
Firecookie creates a log entry every time when a cookie is created, changed, deleted or rejected (an option you can change).
Jan is looking for comments.
He has also written a nice tutorial on extending Firebug. It is great to see sub-plugins for Firebug such as YSlow, Firecookie, etc. Do you know of any other good ones?
NOTE: There are, of course, separate Firefox plugins for cookie management.
Wednesday, February 6th, 2008
Category: Debugging, Firefox
John J Barton has been working hard on Firebug 1.1, but the work has been in the dark a little unless you are paying attention.
He has been putting releases up, and Kris Zyp has been kind enough to host
I have talked to a few people recently who keep Firefox 2 around just "because Firebug needs it" but the latest beta works great in Firefox 3 (which I find to be a huge leap on the Mac).
The beta features:
- eval() debugging,
- external editor interface,
- browser-generated event handler debugging,
- executable lines marked with green line numbers,
- user-controlled naming of eval() buffers,
- Stack side panel on "Script" panel for callstack,
- Supports Firefox 3,
- "better" debugging icons,
- CSS errors report against source lines,
- bug fixes (incl. issues 8, 69, 218, 230, 239, 249, 269, 314, 321, 345)
- Internal firebug debug output
I raise a drink to John for keeping Firebug going strong!
Monday, January 28th, 2008
Category: Debugging, JavaScript, Tip
Paul Irish saw the following graceful degradation of Firebug code in the Yahoo! media player:
JAVASCRIPT:
-
-
// code yanked from the Yahoo media player. Thanks, Yahoo.
-
if (! ("console" in window) || !("firebug" in console)) {
-
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group"
-
, "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
-
window.console = {};
-
for (var i = 0; i <names.length; ++i) window.console[names[i]] = function() {};
-
}
-
I would love to see a window.console API based on Firebug standardized so it can just be there. But then this code will still be around for pre-browsers.
Friday, January 25th, 2008
Category: Debugging, Safari, Utility
We all talk about Firebug, which is a fantastic tool for debugging, but there are some others out there. WebKit comes with Drosera, which until now has been hard to get going on Windows (you could build from source).
Now Drosera is in WebKit nightlies on Windows as Kevin McCullough of Apple told us:
Our JavaScript debugger Drosera is available in the Windows nightlies, and I would love to get some help testing and finding issues. Drosera will not work with the Safari beta, but should automatically connect to the nightly it's downloaded with. Simply use the run-drosera script that's now included. I'm excited to bring Drosera to Windows and I hope it becomes a go-to tool for your Windows JS investigating, testing, and development.
Do you care? Are you on Windows and have been jealous of the Apple debugging love?
Tuesday, November 13th, 2007
Category: Debugging, Firefox, Performance
Firefox used to be the lean mean fast browser. Well, definitely fast. People flocked to it, in part, due to its speed. These days it seems like it is falling back and people are jumping on WebKit nightly, Opera, and even IE 7 as faster alternatives.
Mozilla is a little flummoxed by the birds memory appetite, and is going on a crusade to hunt down the issues, which are even more of an issue in mobile.
Stuart Parmenter, a Moz developer, has been doing some painful hard work for us. He started out discussing the memory fragmentation issue:
I've been doing a lot of work trying to figure out why after loading a lot of pages much of your memory seems to disappear. I've tested all sorts of things -- disabling extensions, plugins, images, etc. I've run leak tools over and over looking for things we might be leaking. Occasionally I'll find something small we're actually leaking but more often than not I don't see any real leaks. This lead me to wonder where our memory went. Firefox has a lot of caches internally for performance reasons. These include things like the back/forward cache (which helps speed up loading pages when you hit back), the image cache (keeps images in memory to help load them faster), font cache, textrun cache (short lived, but used to cache computed glyph indicies and metrics and such), etc. We also introduced in Gecko 1.9 the cycle collector which hopes to avoid cycles in XPCOM objects that we might hit. We've also got the JS garbage collector. All of these things mean we could be holding on to a bunch of objects that could be taking up space so we want to eliminate those from the picture. I released the RAMBack extension earlier this week which clears most of these things.
So, if it is none of these things, what is going on? Why after a while do we end up using more memory than we should be if we aren't leaking and our caches are clear? At least part of it seems to be due to memory fragmentation.
At this point he tests the browser by opening up the browser on certain sites and taking them off. He then takes a peek at the heap:
He just followed up this post with another on Windows Low Fragmentation Heap which has some surprising results.
Knowing that someone is actively working on the issue is psychologically huge, so kudos to Stuart for sharing some of his initial findings, and good luck hunting!
Category: CSS, Debugging, IE
Jean-Fabrice Rabaute, author of Companion.JS, has put out a new DebugBar as he aims to get IE developer tools on par to Firebug.
In this new version, on a selected element in the DOM Tree, the DebugBar can now display source code, applied style (with css details), computed style, layout, and attributes.
Thursday, October 4th, 2007
