tech.agilitynerd.com

scratching that itch... 
Tags


Filed under

firefox addon

 
July 25, 2010
 

Firediff: track and save CSS edits in Firebug

When I'm making fiddly changes to a web page I like to tweak the CSS using the Firefox Firebug plugin. It has the advantage of letting you try changes quickly and see the effect. The downside has always been that you had to then change the source CSS file to include your changes. Which increases the risk that you forget to include a change.

I was thinking about that recently when I changed the color scheme on my AgilityNerd blog and went searching for a way to at least identify the changes. Turns out there is a nice plugin that provides exactly that functionality. The Firediff plugin not only tracks changes to the CSS it also allows you to save those changes for overwriting or diff'ing into you CSS file(s).

Like other firebug related extensions you need to enable this feature per page by clicking on the arrow next to the new Changes tab.

Here is a screenshot of the plugin in action:

You can see I've changed the line-height attribute - it shows the previous and final values. A right mouse menu lets you save those changes to a file or revert them.

Another feature that can be configured in the Changes menu is whether to track changes made by other JavaScript to the page. This is an interesting feature if you were wondering how a JQuery or other JavaScript modified the page for a given effect.

This is a great plugin that I'll continue to use regularly.

Loading mentions Retweet
Filed under  //   css   firefox addon   web development  

Comments [0]

December 29, 2008
 

Firefox Web Developer Add-on AJAX NON-Caching Problem

I ran across some "interesting" behavior of the Firefox Web Developer Add-on today. When editing JavaScript code I normally leave Web Developer set to "disable cache". This causes all images and, significantly for my purposes, the JavaScript files to be downloaded from the server on every page request. But I ran into a unexpected problem with this setting that cost me a couple hours today.

I was working on a legacy page today that uses an AJAX POST and the response is sent to an IFRAME. The POST was successful, the results were valid and present in the IFRAME. The problem was as soon as the content of the IFRAME was eval'd() a GET was being sent to the server for the URL of the page. This GET was a problem because it had a side effect of clearing the session data (which contained the POSTed AJAX data) for the current page. So when the page's FORM was finally POSTed the server couldn't find the data in the session.

After trying numerous code changes including disabling event handlers and events, it finally occurred to me that the cache disable feature of the add-on might be causing the unexpected GET. Sure enough, once I re-enabled caching the GET stopped being sent.

It was strange that the eval() caused the GET to be requested. All the other code around processing the IFRAME's data didn't trigger it, only the eval. Strange but true.

So just something to keep in mind when strange behavior occurs on AJAX pages where session data is being used.

Loading mentions Retweet
Filed under  //   ajax   firefox   firefox addon   web development  

Comments [0]