Before Firefox 3 was released I wrote about exclusive Firefox userChrome.css hacks got a TON of responses and requests. So in the spirit of "teaching a man to fish", I’m providing a tutorial on how to use Firefox’s DOM Inspector add-on to tweak whatever you want.

Suppose we want to remove that bookmark star on the right side of the URL bar. I’ll show you a simple way to do this and then generalize the technique for use with anything.

Setup

If you didn’t get the DOM Inspector when you downloaded Firefox, you’ll obviously want to do that first. Open it up by hitting Tools > DOM Inspector or key in Ctrl+Shift+I (default). You’ll want to start out by going to File > Inspect a Chrome Document and choosing the first option which is your Firefox window.

Find your target

The easiest way to check it out is to inspect it by clicking the button and clicking on the star. The DOM Inspector is helpful here because it will highlight the block containing the star with a big red border and show you the markup in the browser document with the XML element highlighted. Continue reading →

UPDATE: You’ll want to check out the updated post with new code, tests, and compatibility.

Chances are that if you’ve done any significant Javascript work, you’ve run into a situation where part of the debugging process could be much improved if you just had the function call stack.

I’m going to give you some ways of doing this with and without the popular Firebug extension and have some examples of their uses.

Without Firebug and friends? Using IE?

Sometimes s**t only happens in other browsers. Here’s how to create/log your own stack trace. Put this code in an accessible place in your Javascript file(s) and call the printStackTrace() function inside any function.

I’m going to give you some ways of doing this with and without the popular Firebug extension and have some examples of their uses.

Without Firebug and friends? Using IE?

Sometimes s**t only happens in other browsers. Here’s how to create/log your own stack trace. Put this code in an accessible place in your Javascript file(s) and call the printStackTrace() function inside any function. Continue reading →

We will learn about the sed delete (d), read (r) and write (w) commands today to round out your sed toolbox. Obviously, I won’t be covering everything about sed. I literally have a book on sed that I keep handy because there is so much to it. The major parts I am covering should help you through 99% of the cases where sed is your best option.

Soon we’ll be looking at awk and other tools to continue the quest for command-line fluency. If you haven’t already, install Cygwin and check out part 1 and part 2.

Tutorial

One of the best ways to crank out code quickly is by using templates. Using the Stream EDitor, you can streamline the use of templates.
Continue reading →