How can I freeze Javascript in firebug so that i can inspect the changes made by it in the html? If for example i have a jQuery rollover effect and i want to inspect the html code in that point in time.
I believe Dreamweaver CS4 has this feature titled freeze javascript and live code. Is there a free equivalent either in Firebug or another Firefox extension?
In the Script tab of Firebug, you can set break points in Javascript that will allow you to step through code, set watches, and do other things you would in other debuggers. You can also switch to the HTML tab and see what changes have been made while Javascript is "frozen."
By "freeze" I assume you mean debugging, and yes, Firebug definitely has that.
First you have to go into the Script tab on Firebug. If Script is disabled on the site, enable it.
Now, go to the dropdown and select which JavaScript file you want to debug. This is typically either the page itself with inline JavaScript, or a linked page. Find the line of code you want to freeze on, and click to the left of the line numbers. You'll see a red dot appear - this dot denotes that the code will freeze there during execution. Once the code is there, you can access the current HTML by going to the "HTML" tab. You'll also see the icons in the top-right corner of Firebug's Script pane light up, allowing you to either continue execution, step over, step into, or step out of each line of code, observing HTML changes for each line executed.
Note that Firebug lets you step through code line-by-line, which means that minimized JavaScript files (wherein all the code is compacted onto one line) are absolutely awful for debugging, because you can't tell where Firebug is. So for debugging purposes, I highly recommend getting the non-minimized versions of files.
If you need more help, I suggest checking out the Firebug documentation, which has some good guides.
In Firebug, go to the script tab. On the top, you can see:
Inspect | all | <filename>
Click on to choose the file that contain the javascript you want to track. Once you have selected your file, click on a line number to put a brea kpoint (a big red dot will appear).
You can put several break points in different files. The break point will not disappear if you refresh the page (F5).
This tutorial should help you as well.
Break on mutate (the pause button when the html tab is selected) is the closest thing I can find to this feature. It will pause the next time something is changed. It's just one off of what you want, but could be useful.