Ajaxian has a post up this morning on Jiffy, a Firebug plugin “that adds a new tab showing fine grained performance data. You want to know the time between the onunload of the previous page, the first rendering, time until onload, time after, and more.”
The Ajaxian article has a nice overview, and the post by Bill Scott (Rico, ex-Yahoo, now @ Netflix) is really detailed and worth reading. Good stuff.
I’ve been putting off upgrading to FF3 only because I know it’ll mean that at least some of my stuff won’t work. Whether it’s a web site I use often or a plugin (like Firebug), my official policy is to wait a month or two until I start using a new browser.
Given that it’s rather difficult to run multiple versions of browsers side by side (why do they do this? certainly the developers of these things have to be able to switch around from one version to another, right?), this often means using a virtual machine for my testing.
Well, not anymore (for OSX users at least): MultiFirefox
I’ve been doing a lot of testing lately with the impending release of our library for MooTools 1.2, and testing in all the versions of IE is a pain. Well, maybe not anymore:
via Ajaxian:
Testing your sites on different versions of Internet Explorer has always been notoriously difficult mainly due to the fact that Microsoft prevents you from running to different versions of the browser in Windows. Sure there have been solutions to get around this limitation but in my experience, they’ve always caused unexpected results and instability for the operating system or required you to run a VM. Not ideal.
Jean-Fabrice RABAUTE, the man behind the IE debugger DebugBar, has come up with a nice solution he’s called IETester. This free tool allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.
via Ajaxian:
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.
I use Eclipse at home (I run Ubuntu), but I can’t say that this plugin excites me terribly. I use the debugging in firebug for a lot of different things (with our own debugging wrapper: dbug.js) and I don’t know that I want all that stuff diverted into my editor… Still, it’s cool and I’ll probably install it just to see if it’s more useful than firebug on its own. I don’t really get all the mileage out of Eclipse that I could, so maybe this is just another instance of me not getting it entirely. To you Eclipse users out there, what do you think?
Note: the comments on ajaxian imply that this plugin isn’t quite ready for prime time as of this posting.
via ajaxian, via Dean Edwards…
John J. Barton has released a new open source framework named Fireclipse that enables nice coupling of Firefox and Eclipse for debugging purposes, working on top of Firebug.
- Fireclipse routes error messages from Firefox’s
Javascript Console to Eclipse’s console.- Fireclipse positions an Eclipse editor on the source line reported by Firefox.
- Calls to
dump()end up on the Eclipse console- Fireclipse adds an Eclipse panel to Firebug
- Extensions to Firebug include:
- debug
eval()code.- debug event handlers
- route error messages to eclipse
- executable line numbers marked
Take a peak at the page of screenshots to see it setup in Firefox and Eclipse.
( via Dean Edwards )
via ajaxian:
John Allsopp, who authored XRAY, has a new tool for us to play with. MRI is a bookmarklet that fires up a tool allowing you to query items on the page using CSS selectors. As you put in your queries you will see the items on the page that match. You can also click on areas of the page to show some selector queries that would find that area.
via ajaxian:
VentureBeat is reporting that Google has updated their popular Google Analytics service to begin tracking Ajax and Flash-based requests:
The new additions reflect a growing feeling on the web that pageviews are a less important metric than they used to be. Google Analytics is opening a feature for beta testing that tracks user engagement with elements that have become common with Web 2.0 services, including Javascript, Ajax and Flash applications, widgets and gadgets, and downloadable pages.
With many sites reliant on selling advertising based on page views, this update will allow developers to leverage Ajax, JavaScript and/or Flash without the worry of losing valuable stats data:
While small web companies will be the primary beneficiaries of the new features, the move could also prove meaningful for online advertising. Experts have suggested for some time that advertising rates should reflect elements beyond the simple standard used so far, page views.
Full article here.
Something that’s long been on my list is to do a write up on firebug. It’s such an indispensable tool that I can’t imagine my day without it. It’s like trying to understand how people did anything before the internet. Anyway, over at Ajaxian there’s a post about one that Phil Rees wrote up. If you don’t use Firebug (and if you’re reading this blog, you probably do), or if you feel like you’re not getting everything out of it, you should dig through this.
Phil Rees has written up a nice introduction to Firebug, showing us how you can use Firebug to:
- Inspect custom stylesheets included by Google Mashup Editor
- Modify in-memory stylesheets to see the changes reflected immediately
- Place watches and breakpoints into running JavaScript
- Execute arbitrary JavaScript in the context of your running application
- Monitor Ajax calls, showing response times, posted content, and results
- Profile JavaScript functions to help you identify bottlenecks and optimize your application.
The article walks through all of these points using Phil’s DanceMaps mashup using the Google Mashup Editor.
Today on Ajaxian:
We had a great response for XRAY, the “free cross browser tool that lets you see the box model in action for any element, letting you see beneath the skin of any web page.”
The number one question was “but what about IE???” and now we have the answer. The latest release supports IE6 and above, and “displays information about an element’s borders, and allows you to move around the document with arrow keys. Use the up, down, left and right key to XRAY the currently selected element’s parent, first child, and previous and next siblings.”
Here’s a nice little bookmarklet that Mark Bult (of Webshots here at CNET) sent my way: Xray. Here’s what Ajaxian had to say about it when they posted on it last week:
John Allsopp has developed XRAY, a bookmarklet that launches a tool to visualize the web page that you are on (a little like features in Firebug and Firefox). The look and feel is great, and the margin popups look like the new Safari/Webkit search functionality (mmm orange).
What is XRAY
XRAY is the first in hopefully a suite of free cross browser tools for helping web designers and developers better visualize what their code is doing in a browser. XRAY is designed to help you get beneath the skin of your web page.
XRAY let’s you see the box model for any element on a page in action – where is the top and left of an element, how big is each margin, how big is the padding, how wide and high is the content box?
What platforms and browsers is XRAY available on?
XRAY currently has been tested on Safari 2 and 3 on Mac OS X, Webkit nightly builds, and Mozilla based browsers (Firefox, Camino and so on) on Mac OS X and Windows. At present it won’t work on Internet Explorer (XRAY uses the canvas element, but plans are afoot to adapt it for Internet Explorer), and has not been adapted for Opera. We hope to have versions for Opera shortly, and Internet Explorer on Windows in the not too distant future. XRAY works in Safari 3 on Windows, but clicking a bookmark does not fire any Javascript it contains. To use XRAY on Safari 3 for windows at present, you’ll need to paste the XRAY link into the address field and hit return.
