Wednesday, June 02, 2010

Very cool Javascript debugging trick (Firefox, Javascript)

I'm working along on a page, an interface for some configuration data.  I have a javascript validation routine that runs upon hitting save.  I had all my various dynamic HTML elements exactly like I wanted them, and didn't want to hard reload the page, yet again, to get the new Javascript code.

In Firefox, I opened Firebug, went to the "Console" tab, and pasted a whole new copy of the function into the console line.  After pasting a multiline piece of code into the small console line, a larger side window popped up to allow better editing, also available from the small icon to the bottom right of that section:

I proceeded to hit my "Save" button to begin my validation and, volia!, my new function worked correctly with the bug fix in place.  And I didn't have to refresh the entire page and start from scratch.  Not a bad little trick!

- Will Belden
Wednesday, June 2, 2010