This is actually kind of old news, but it’s something that never really got released. Valerio and I spent a few weeks a while back putting together a bookmarklet that would give you a Firebug-style JavaScript console for browsers without Firebug (IE, Safari, etc).

It supports console.log statements in the various formats that Firebug supports (“console.log(‘foo: %s, bar: %o’, foo, bar);”) and is really useful for debugging your code in non-Firebug browsers. I like to use it in conjunction with X-RAY to solve layout issues, too.

To use it, all you need to do is drag the link on the bookmarklet page into your bookmarks and then click it on any page to bring up the console (I.E. you have to right click and choose “Add to Favorites”).

You can see it in action on the test page.

Note: If you have Firebug installed and enabled, it doesn’t do anything.

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.

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.

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.

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.