69

Is there a keyboard shortcut in Google Chrome which will break script execution? (Equivalent to pressing the || "Pause script execution" button in the Developer Tools Scripts panel.)

I'd like to use the Dev Tools to inspect an element in its mouseover state; the mouseleave code will obviously run if I try to actually click the pause button!

Improve this question
3
  • 1
    Almost a decade later and it's still not a feature.
    – Seph Reed
    Jun 19, 2020 at 23:48
  • @SephReed: Modern versions of Chrome actually do have this.
    – josh3736
    Jun 20, 2020 at 0:55
  • If anyone at Chrome ever reads this page - none of the shortcuts seem to work if you're stuck in some sort of 'error loop' where you're getting hundreds of messages and errors written to the console every second and you're trying to stop it!
    – Simon
    Aug 26, 2021 at 22:53

5 Answers 5

Reset to default
71

Update: Dev Tools has many built-in shortcuts (press F1 for a list). Pausing script execution is F8 (when looking at the Sources tab, as of Chrome 45) or Ctrl+/.

The shorcut only works in the main browser window if the Dev Tools are already open to the Sources tab.

If the above shortcut doesn't work, I did come up with a one-liner that can be put in a page (or pasted in the Javascript console) to achieve my goal:

jQuery(window).keydown(function(e) { if (e.keyCode == 123) debugger; });

This will cause execution to be paused when you hit F12.

(debugger is a JavaScript statement that forces a breakpoint.)

Improve this answer
5
  • 15
    F8 only works when you are on the "Sources" page in DevTools (Chrome 40)
    – netvope
    Jan 26, 2015 at 3:20
  • 2
    Does CTRL + / work under Linux or something? Because CTRL + \ appears to work under Windows, and according to others it would be CMD + \ for MAC.
    – djabraham
    Sep 15, 2017 at 19:11
  • 3
    The same effect but without requiring jQuery: window.addEventListener('keydown', e => { if (e.keyCode === 123) debugger })
    – pau.moreno
    May 22, 2018 at 15:30
  • 2
    sometimes event hotkeys closes the element you want to inspect, setTimeout(function() { debugger; }, 1000) helps here
    – cyptus
    Jun 25, 2018 at 9:04
  • For me, pressing F8 wouldn't stop script execution unless DevTools was not only open, but also with focus in the Sources pane. 1: Click the DevTools pane to give it the focus (Make sure to have the Sources pane open!). 2: Hover your mouse over the element you want to inspect with mouseover. 3: Now press F8 (without clicking on the element or anywhere in the main window, else DevTools will lose focus again).
    – Adrian
    Jan 26 at 10:50
20

Google's Keyboard Shortcuts Reference lists for "Pause / resume script execution":

  • F8 or Ctrl+\ (Windows)
  • F8 or Cmd+\ (Mac)

There are easier ways to inspect things in odd states like hover or active. First, find the DOM node in the Elements pane of Chrome Dev Tools. Now you can either right-click the node and look at the "Force Element State" in the context menu, or select the node and look in the Styles tab and find the dashed-box-with-mouse-pointer icon in the top right (next to the +/plus icon which lets you add a new CSS rule to element.style, the element you selected).

When you activate one of these states, the left margin of the elements pane gets a little circle to indicate that you've overridden the natural state of the element on that line.

Improve this answer
2
  • 4
    F8 doesn't work in the main browser window, only in the Dev Tools window. Using Force Element State doesn't help when it's a script listening to events (rather than just CSS) that is doing stuff.
    – josh3736
    Oct 20, 2014 at 1:51
  • 3
    F8 does work in the main browser window but you do have to have the Dev Tools window open to the Source tab in the background.
    – reor
    Nov 15, 2016 at 22:06
11

I wrote a quick little Chrome Extension that allows you to press the Pause button on your keyboard to pause javascript execution

How to get it:

Usage:

  1. Keep chrome developer tools open
  2. Press pause/break on your keyboard
Improve this answer
3
  • 1
    @Flu, I added it to the Chrome Web Store. Enjoy
    – SpareBytes
    Dec 8, 2014 at 3:22
  • This worked great – I was able to pause so that I could examine HTML dynamically inject into the page. Using the Developer Tools didn't work because the HTML was being removed by the code when it lost focus.
    – Kenny Evitt
    Jan 12, 2015 at 16:05
  • My keyboard does not have a "Pause/break" button, so I had to map it to a different key. What wasn't immediately obvious to me is that you need to hold down the new key combination WHILE you click on the "Save Combo" button.
    – Jasper Citi
    Jul 5, 2018 at 6:21
1

Modern versions of Chrome will pause execution when you press the pause shortcut key while focused in either the Dev Tools window or the main content window (if the DevTools are open), and regardless of which DevTools tab is active. No additional setup or extensions required.

  • Windows/Linux: F8 or Ctrl+\
    • Some keyboards require you to either hold fn with F8, or fn acts like caps lock for F keys, but these are rare.
  • Mac: ⌘+\ or fn+F8

It's unclear exactly which version of Chrome introduced the ability to use the shortcut in the main window, but note that a regression in versions 80-82 broke it — ensure you're using Chrome 83+.

Improve this answer
0

Exercising my Google-fu, I found the official google list of Chrome keyboard shortcuts

It doesn't seem like there's one dedicated to it. You could always write a plugin which would interpret a key combination as a pause button, though, if you wished.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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