Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to stop a javascript with Firebug without using breakpoints?

Is it possible with Firebug to stop a javascript with a press of a button or a keyboard shortcut instead of stopping it by setting a breakpoint?

Why would I like to do this? We have a very dynamic website with lots of animations. It would be a great help if I could just stop the scripts at the moment the animation is doing something I want to inspect. That would be a lot faster than fiddling with the breakpoints.

like image 704
Sandra Avatar asked Apr 13 '10 16:04

Sandra


3 Answers

This is how I did it, from the web console (not the scratchpad), run:

window.addEventListener("keydown", function() {debugger;})

Then go back to the debugger tab. When you focus the document and press a key, the browser will pause JS.

like image 100
Eric Avatar answered Nov 15 '22 12:11

Eric


There is a pause button in Firebug. Clicking on that is what you are looking for.

like image 27
Kasturi Avatar answered Nov 15 '22 13:11

Kasturi


Firebug has different ways to stop the script execution without setting breakpoints at specific lines. These options are called Break On features.

In your case I see two relevant options:

  1. Break the JavaScript on the next executed line
    The Script panel has a Break On Next button (*Break On Next* button), which allows you to stop the script execution at the next executed JavaScript statement. This feature can also be enabled via the keyboard shortcut Ctrl+Alt+B.

    So, just hit the keyboard shortcut once the animation is at the point when you want to inspect it.

  2. Break on HTML mutation
    The HTML panel has a Break On Mutate button (*Break On Mutate* button), which allows you to stop the script execution at the next HTML mutation.
    There are also more fine grained options to stop at the mutation of a specific element, which are available within the context menu of the elements. Those options are:

    • Break On Attribute Change: Stops the script execution when an attribute of the element is added, changed or removed.
    • Break On Child Addition or Removal: Stops the script execution when a child node is added or removed.
    • Break On Element Removal: Stops the script execution when the element itself is removed.

    In your case Break On Attribute Change may be the right choice in case the animation changes the CSS within the style attribute of the element.

like image 34
Sebastian Zartner Avatar answered Nov 15 '22 14:11

Sebastian Zartner