30

I'm trying to create a rotating banner (JavaScript & CSS). For debugging and making changes on the CSS etc in the developers' console, I want to pause the JavaScript execution while I make changes and then run it or so on. So, is there a way to pause the script execution in the browser?

ptamzz
  • 9,235
  • 31
  • 91
  • 147
  • 11
    [F8](http://i.stack.imgur.com/g1pYc.png). – katspaugh Dec 06 '11 at 07:54
  • The answer you seek is here https://stackoverflow.com/questions/17931571/freeze-screen-in-chrome-debugger-devtools-panel-for-popover-inspection/17932238#17932238 – Abram Dec 17 '17 at 18:47

3 Answers3

23

As katspaugh mentions in their comment:

F8

This only works for me from the Sources tab of the Developer Tools window in Chrome 59.0.3071.115 (on Mac OS X).

Kenny Evitt
  • 9,291
  • 5
  • 65
  • 93
23

You are looking for "breakpoints".

Which browser are you using?

Chrome supports breakpoints right away in its developer tools:
F12 (or Ctrl-Shift-I), "Script" tab, select script from dropdown, click the line number.
Update:
On PC: F12 or Ctrl+Shift+I / On Mac: Cmd+Alt+I
select "Sources" tab, select script from the file pane on the left, click the line number.

In Firefox use the Firebug extension:
On PC and Mac: F12,
"Script" tab, activate & reload if needed, select script from dropdown, click line number.

When your Javascript pauses at a breakpoint, both browsers offer you the usual debugging tools to single step through the code, inspect & change variable values, watch expressions,...

Kenny Evitt
  • 9,291
  • 5
  • 65
  • 93
Jpsy
  • 20,077
  • 7
  • 118
  • 115
  • 1
    My javascript is minified automatically. Is there a function like console.pause(); I can put in the javascript code, which will stop execution? – Travis Heeter Jul 10 '13 at 15:56
  • 20
    @TravisHeeter: Most browsers support the ``debugger;`` keyword in JS code to trigger their debugger. This is equivalent to setting a breakpoint in the code. – Jpsy Jul 11 '13 at 12:02
  • What is the Mac equivalent to open the script tab? – Katharine Osborne Dec 08 '16 at 10:55
  • @Jpsy thanks :-) I found the sources clarification elsewhere as well. F12 is mapped to a volume button on my Mac so I'm a bit baffled by that one. I'm sure there is a way to remap it (or some arcane key combo to access it). – Katharine Osborne Dec 09 '16 at 15:39
  • @KatharineOsborne: You have to hold down the Fn key to access the F1 to F12 functions of the upper key row. There is also a checkbox in the keyboard settings that allows you to invert that behavior. If activated the F1 to F12 function will be the default and you need to press the Fn key to access volume, brightness, etc. – Jpsy Dec 09 '16 at 23:50
  • @Jpsy the Fn key doesn't do that for me (I'm using Yosemite and a Macbook Pro circa 2014). I'm sure it's just a matter of changing the mappings (I've never remapped that key or the F keys). – Katharine Osborne Dec 12 '16 at 10:53
  • @KatharineOsborne: I just tried in Firefox and it works flawlessly in Sierra. There were no changes in that functionality since Yosemite. Are you sure you are using Firefox? – Jpsy Dec 12 '16 at 14:16
  • @Jpsy yeah I'm using FF. Fn+F12 opens up Spaces for me. – Katharine Osborne Dec 12 '16 at 14:45
  • @KatharineOsborne: Then I suppose you have altered the system hotkeys. I suggest you go through the details of the keyboard preferences. Check especially the Shortcuts tab. Anyway, this is definitely beyond the scope of this question. You might consider opening up a new question at http://apple.stackexchange.com – Jpsy Dec 12 '16 at 20:02
  • Yup. I said the same thing twice before ("I'm sure there is a way to remap it", "I'm sure it's just a matter of changing the mappings") and tried to escape this thread several comments ago. But thanks. – Katharine Osborne Dec 13 '16 at 17:13
9

You can write a pause code yourself. Pause javascript excution using debugger. In the chrome console, run:

window.addEventListener('keydown', function(event) { 
  if (event.defaultPrevented) {
    return; // Should do nothing if the default action has been cancelled
  }
  let handled = false;
  if (event.keyCode == 121) {
    handled = true;
    debugger;  // 121 is the keyCode of F10
  }
  if (handled) {
    // Suppress "double action" if event handled
    event.preventDefault();
  }
});

Highlight element with inspector

Hit F10

Zihao Zhao
  • 439
  • 5
  • 9