4

When the Firefox Devtools (developer tools) Debugger pane is open, you are supposed to be able to press the F8 keyboard key to pause JavaScript.

I find that this rarely works on complicated websites (it works fine on simple websites like Stack Exchange and StackOverflow). Usually, the only way I can get Firefox to pause is to use the pointing device (trackball, mouse, etc.) to click the pause button in the Firefox Devtools GUI. The problem with this is that it requires removing the cursor from the web browser viewport, which results in HTML elements losing focus.

Is there a trick/secret to getting the Firefox Devtools debugger to pause using the keyboard?

Amazon Dies In Darkness
  • 9,990

2 Answers2

1

As @andrybak 's comment has really helped me do this, I'll add it as a full answer.

  1. Open your site and go to the page / situation where you want to inspect the tooltip or other mouse dependent event.
  2. In Firefox open the Developer Tools and go to the Debugger Tab. (called Sources in Chrome) Now navigate
  3. Open 'Event listener Breakpoints'
  4. Filter on 'mouse' (as shown below)
  5. Select 'click' or if that triggers too often, 'dblclick' for Double Click.
  6. Go to your site and trigger the event (hover over your element with a tooltip).
  7. Now the debugger will break and you can inspect your site.

enter image description here

Thirler
  • 670
1

There is a method that does not require trapping events or setting breakpoints for passive events such as mouseover.

  1. Set the FF Developer Tools to open in a separate window, and position it so it doesn't obscure the object you're trying to inspect. (Opening the Tools window as a pane of the browser window will NOT work.)

  2. In the main window, right-click on the target element and type Q (or click/tap "Inspect"). This should open the Tools window with the object selected in the HTML tree in the Inspector tab. If not, navigate to it in the tree.

  3. In the Tools window, select the Debugger tab so the Pause (||) icon is visible in the right-hand pane.

  4. While ensuring that the Tools window maintains focus in the foreground, move the mouse over the main window element in the background. This should trigger the mouse event.

  5. Press F8. If the Tools window is still active, this should pause execution. You'll see the Pause icon change to the Play icon.

  6. You can now navigate to the Inspector tab and see the modified element(s) frozen in their moused-over state.

This technique works very well for sites such as Pinterest, which adds and removes DOM elements such as DIV in response to mouse movement. It's the only way I've found so far that quickly and reliably allows the capture of passive mouse interactions.

TL;DR: Pressing F8 to pause works when the Developer Tools are open in a separate, focused window while the main window elements (when not obscured) are still responsive to mouse events in the background.

M O
  • 11