How to pause script execution in Developers console

Question

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?

Solution 1

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

Solution 2

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

Solution 3

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

Comments

[katspaugh]

F8.

[Abram]

The answer you seek is here stackoverflow.com/questions/17931571/…

[Travis Heeter]

My javascript is minified automatically. Is there a function like console.pause(); I can put in the javascript code, which will stop execution?

[Jpsy]

@TravisHeeter: Most browsers support the debugger; keyword in JS code to trigger their debugger. This is equivalent to setting a breakpoint in the code.

[Katharine Osborne]

What is the Mac equivalent to open the script tab?

[Katharine Osborne]

@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).

[Jpsy]

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

[Katharine Osborne]

@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).

[Jpsy]

@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?

[Katharine Osborne]

@Jpsy yeah I'm using FF. Fn+F12 opens up Spaces for me.

[Jpsy]

@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 apple.stackexchange.com

[Katharine Osborne]

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.

[dwjohnston]

F12 is a bad keycode to use, it's the native dev tools one

[bharal]

it's like he/she was so close then fell over and knocked themselves out during their pre-victory dance

[Zihao Zhao]

Special thanks to @dwjohnston. I updated the keycode to use F10.