18

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.

Sandra
  • 765
  • 3
  • 10
  • 20

10 Answers10

8

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.

Eric
  • 1,689
  • 15
  • 12
  • Uhh, nice :-/ ... btw, it's just javascript, so it can be used (injected) in many ways, not just from console, right?. Thank you. – m3nda Nov 24 '16 at 06:29
  • certainly, but you must be in the same javascript context as the document, which is why the scratchpad wouldn't work. You can definitely include it in the javascript of the document itself though. – Eric Nov 24 '16 at 13:35
4

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

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
Kasturi
  • 3,335
  • 3
  • 28
  • 42
3

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.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
  • Thank you for both options, i'll try absolutely everything i found about to get my preferred way. I must debug few javascript scripts and wondering how much will i suffer :-) thank you. – m3nda Nov 24 '16 at 06:31
  • Note that these options only work in Firebug and the [development of Firebug is unfortunately discontinued in favor of the Firefox DevTools](https://blog.getfirebug.com/2016/06/07/unifying-firebug-firefox-devtools/) (and Firebug's [*Script* panel is already broken in Firefox 50](http://stackoverflow.com/a/40748127/432681)). Though the DevTools are still missing the second option (break on HTML mutation). This feature is requested in [bug 1004678](https://bugzilla.mozilla.org/show_bug.cgi?id=1004678). – Sebastian Zartner Nov 24 '16 at 16:41
2

If you know where it's doing something you want to inspect, then what is wrong with breakpoints? Also, you can use the debugger keyword in the code, or you can inject console.log/debug/warn/info statements in your code. (You can stub out the console object for those environments that don't have one).

Tracker1
  • 19,103
  • 12
  • 80
  • 106
1

If you use the web developer plugin, you can disable all java script from running on the page then use firebug as you wish.

Marty
  • 19
  • 1
  • Wow.'http://chrispederick.com/work/web-developer/' Now I can troubleshoot my JS code with heavy CSS updates and see exactly what is going on. Most of the other solutions on this page couldn't get me there. You can't check CSS when JS is 'halted' in script. @Marty thx. – zipzit Jun 19 '14 at 18:09
  • This does not stop the script execution of the current page. It only disables JavaScript on the next page reload completely, which doesn't help to inspect the animations at a specific point. – Sebastian Zartner May 13 '16 at 06:53
1

From what you describe, I'm guessing javascript console logging from your code might help you best. Check out http://getfirebug.com/wiki/index.php/Console_API.

psychotik
  • 38,153
  • 34
  • 100
  • 135
1

depending on the animation library you're using, there might be a 'stop all animations' method - jQuery's .stop(), for instance. how are you handling the animations?

matt lohkamp
  • 2,174
  • 3
  • 28
  • 47
0

The best way to fix this is go to the HTML drop down which is there next the HTML tab in firebug. Deselect "highlight changes" and "scroll changes to view" and that should allow you to inspect the html and css code that is being executed. I hope you guys wanted to do this.

Pali Madra
  • 69
  • 5
0

If the web site is continually reloading content from your server, you can switch to the Net pane. The context menu there has a "Break on XHR" entry which, when checked, will stop your script whenever it tries to get new content.

Matthias Urlichs
  • 2,301
  • 19
  • 29
-1

The easiest way is to install the firefox extension "PrefBar". There you can add a checkbox "JavaScript". If you deactivate it, javascript stopped.

uwanius
  • 1
  • Well... how can you be able to install an firefox extension, but didn't be able to read and understand the question...? :-). Stop means run then stop, not "deactivate". The goal of the asker is to be able to pause-stop on demand, without to set breakpoints :-) – m3nda Nov 24 '16 at 06:27