51
19
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!
josh3736
Posted 2011-02-22T19:52:04.960
Reputation: 2 104
60
While I haven't found the exact solution to this problem, 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.)
Update: Dev Tools has many built-in shortcuts (press F1 for a list), but you must be focused in the Dev Tools window for them to work. Pausing script execution is F8 (when looking at the Sources tab, as of Chrome 45) or Ctrl+/.
The above one-liner might still be useful if you need to stay focused in the page before pausing.
josh3736
Posted 2011-02-22T19:52:04.960
Reputation: 2 104
15
Google's Keyboard Shortcuts Reference lists for "Pause / resume script execution":
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.
alxndr
Posted 2011-02-22T19:52:04.960
Reputation: 251
3F8 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 – 2014-10-20T01:51:23.727
3F8 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 – 2016-11-15T22:06:25.823
8
I wrote a quick little Chrome Extension that allows you to press the Pause button on your keyboard to pause javascript execution
pause/break on your keyboard
SpareBytes
Posted 2011-02-22T19:52:04.960
Reputation: 230
1@Flu, I added it to the Chrome Web Store. Enjoy – SpareBytes – 2014-12-08T03:22:09.173
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 – 2015-01-12T16:05:49.203
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 – 2018-07-05T06:21:39.603
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.
technowizard12
Posted 2011-02-22T19:52:04.960
Reputation: 111
7F8 only works when you are on the "Sources" page in DevTools (Chrome 40) – netvope – 2015-01-26T03:20:04.617
1Does CTRL + / work under Linux or something? Because CTRL + \ appears to work under Windows, and according to others it would be CMD + \ for MAC. – djabraham – 2017-09-15T19:11:22.373
1The same effect but without requiring jQuery:
window.addEventListener('keydown', e => { if (e.keyCode === 123) debugger })– pau.moreno – 2018-05-22T15:30:13.080sometimes event hotkeys closes the element you want to inspect,
setTimeout(function() { debugger; }, 1000)helps here – cyptus – 2018-06-25T09:04:17.317