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.

I have worked with a lot of web development tools, but Firebug blew me away. Firebug is an extension for Firefox used for debugging and optimizing CSS, JavaScript, HTML…and more.

There are a few things that a lot of developers don’t know about Firebug that I would like to share with you today.

1. You can monitor the load time of your JavaScript by going to the “Net” tab. Bonus: Firebug colors requests that are served from your cache in a lighter gray so you can optimize your cache use.
2. Right click on a breakpoint to add a condition.
3. Using console.log to print messages to the console is great, but did you know you can group messages by calling ‘console.group(”groupname”)’ and ‘console.groupEnd()’?
4. Use console.profile() and console.profileEnd() to report on time spent in each function hit, or you could just use the Profiler.
5. If you mouse over a color in the CSS tab, it shows you a swatch of that color!
6. Not only can you see the HTML of your page change in real-time, you can change it whenever you want.
7. If you are using a very high resolution and Firebug is hard to read, just click on the bug and select ‘Text Size > Increase Text Size’
8. You can use the command ‘debugger;’ within your JavaScript to have Firebug stop execution at that point in the code and bring up the Firebug panel.
9. You can log calls to specific function by simply right clicking the function name in the Script section and choosing: ‘log calls to “myFunction”‘.
10. And FINALLY…you can use Firebug in IE, Opera, and Safari (limited functionality) by downloading Firebug Lite!!

Now if you still don’t intend to use Firebug, then you must have spent a lot of money on something that probably isn’t much better.