CODEWITHSUNDEEP
javascriptjquerydebuggingfirefoxfirebug
Ritchie
Ritchie

Reputation: 535

Firefox Firebug Extension - Freeze Javascript Feature?

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?

Upvotes: 10

Views: 8563

Answers (5)

Arsen Zahray
Arsen Zahray

Reputation: 25287

not exactly firefox function, but appears close enough (at least in the way I understand the question):

  1. Get CheatEngine
  2. Open firefox process
  3. Check "enable speedhack"
  4. Set speed to 0
  5. Apply
  6. All scripts are now effectively paused

You can test this on a javascript clock here.

I'm kind of dissapointed that noone has created a plugin for firefox, which would do the same.

Upvotes: 2

Conley Owens
Conley Owens

Reputation: 9163

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.

Upvotes: 6

Julien
Julien

Reputation: 5779

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.

Upvotes: 0

Dan Lew
Dan Lew

Reputation: 87420

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.

Upvotes: 6

pian0
pian0

Reputation: 847

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."

Upvotes: 0

Related Questions