Global Regular Expression Print is a staple of every command-line user’s toolbox. As with find, it derives a lot of power from being combined with other tools and can increase your productivity significantly.

Following is a simple tutorial that will help you realize the power of this simple and most useful command. If you are on Windows and haven’t already, download and install Cygwin. If you are also new to regular expressions (regex), here is a great regular expressions reference to get you started.

Tutorial

Suppose we want to search for duplicate functions in all of our JavaScript files. Let’s start basic and work up to it. This technique can be used to search for a TON of duplicate items like:

• Duplicate HTML IDs
• Check how many times a CSS class is used
• Duplicate java classes
• many, many more…

# Search JS files in this directory for "function"
grep function *.js

The above command will print the lines containing "function" in all JavaScript files in the current directory (NOT subdirectories). Printing out line contents would be much more helpful if we knew what files they come from and their line numbers:

# Print filenames, line #s, and lines that start with "(white space)function"
grep -EHn "^\s*(function \w+|\w+ \= function)" *.js

Depending on how you format your JavaScript files, something like this will omit comments, anonymous functions, and also words like "functionality" giving you better results.

# Print a list of: function <function-name> and sort it
grep -Eho "^\s*function \w+" *.js | sort

-o prints only the part that matches the regular expression. -E options gives me extended regex and -h suppresses printing of the file name. I am then piping to sort which just sorts the output so it a list of function <function-name>. If you don’t have a lot of files/functions to go through, you can just scan the list and then note the duplicate function names you see. Let’s go a step further for those that DO have a big list:

# Print only duplicate function names
grep -hEo "^\s*function \w+" *.js | sort | uniq -d

There we go! That will list only the duplcated functions. I know that we can expand this with awk or other stuff and get the file names and line numbers of the duplicates, but I don’t want to explaining the details of awk ;). I actually had it in this article and then removed it so leave a comment or contact me if you want the code for that.

Other Examples

# Count the number of functions in all JS files
grep -c function *.js

# Print lines that DO NOT have "function"
grep -v function *.js

# List processes that match "pidgin" (non-Windows)
ps -ef | grep pidgin

Conclusion

grep is one of the most used command-line tools, often piped to for filtering output. Understanding it is essential to increasing productivity on the command-line. There is so much more to grep than what I’ve shown here, and it would be cool to see your best uses in the comments!

You already know that Firebug is quite possibly a web developer’s best friend. You also know that you can edit pretty much anything with it and see results immediately. We can add one more thing to that list today.

You may not have known that you can also edit the values in the layout pane as well! (You can find it on the right side of the HTML tab) This makes it even easier to adjust the layout of a block and see the results. As a bonus, if you press the up and down arrow keys while editing a value the pixel value will adjust by one pixel in that direction. One note on this though, you can’t specify values in anything other than pixels (sorry fluid layouts).

If you haven’t already, you might want to check out 10 more things you may not know about Firebug.

For those of you who haven’t seen this in the news lately, there is a new kid in web-development-tools town. A new extension for Firebug called Firecookie that allows you to Create, Read, Update, and Delete your stored cookies for the site you are viewing. I know there are other tools out there but even at version 0.0.4 I think that this one is one to watch.

Features

Firecookie adds a new tab to Firebug with a list of cookies for the current site. You can go to Tools > Show All Cookies… for a window allowing you to search all of your cookies and view their values. Right-click on a cookie and select Edit Cookie to get a dialog to edit the cookie. You can log all cookie changes to the console by turning on Options > Show logs in console. Finally, you can copy and paste cookies by right-clicking as well.

Other things I’d like to see in this extension

There are a couple bits I think would improve the UX of this extension:

• The Show All Cookies… dialog should allow you to edit cookies
• Cookie names should become links on mouseover and the cursor should change to a pointer. It would just be a nice visual aid for the user
• Console entries for cookies should also link to their respective cookies in the Cookie tab

Conclusion

I am excited about what the future holds for this extension. I hope that this opens the door for more Firebug extensions. Go get Firecookie and try it out!
You also might be interested in 10 things you didn’t know about Firebug.