10

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?

1
  • 2
    This was the feature i was referring to: tv.adobe.com/?promoid=DRHWV#vi+f1500v1436 from 1:36 they start talking about live code and pausing javascript for a rollover. Is there a keyboard shortcut key to pause javascript in firebug rather than going through the code and making a breakpoint?
    – Ritchie
    Commented May 12, 2009 at 20:24

5 Answers 5

6

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.

3
  • Specifically, Justin Palmer's tutorial on Firebug JavaScript debugging is very nice: is.gd/gCtT Commented May 12, 2009 at 20:03
  • 2
    It works but not quite the exact functionality i was looking for, thanks for the answer though.
    – Ritchie
    Commented May 12, 2009 at 22:11
  • 4
    The problem with this answer is that it's not always easy to find the right place in the JS (let alone the right file!) to pause execution. The use case if often that the user is a designer, who just wants the HTML to stop changing long enough to see its structure!
    – joachim
    Commented Sep 16, 2013 at 14:46
6

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.

0
2

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.

0

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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.