2

I know that I can trigger "Pause script execution" action in Google Chrome DevTools by having DevTools open with Sources tab active and press F8.

However, this seems to move focus out from the content area triggering additional events and I'm trying to debug some code that listens focus and blur events in addition to other events I'm trying to debug.

What I would really need is ability to trigger the "Pause script execution" feature without pressing F8. The closest I can do is executing setTimeout(function(){ debugger; }, 2000); in the JS console but that will stop all JS processing instantly after 2 second delay. The feature I'd like to use from DevTools is ability to delay stopping until some code actually runs so that the event queue already has the next events when scripting is stopped. (I'm basically trying to figure out what events are already in the queue in some specific situations and any extra focus/blur events will mess that work.)

Is there a way to trigger "Pause script execution" without pressing F8 or clicking the GUI button because both mess with the focus events?

Improve this question
3
  • 1
    You can enable focus emulation in devtools. Commented Nov 25, 2022 at 11:48
  • @wOxxOm Thanks! That gets me closer to solution but the keyboard focus still vanishes somewhere. Test case: data:text/html,<script>document.addEventListener("keydown", function(e) { console.log(e); });</script><div contenteditable=true style="border: solid pink 1rem; padding: 1rem;">abc, enable "focus emulation" and then type something in the pink area, press F8 (while Sources tab active in DevTools) and then continue typing. Text no longer goes to the content editable area (and no keydown events either) even though focus appears to be there. Commented Nov 25, 2022 at 12:08
  • @wOxxOm: thanks to your suggestion I was able to figure out a workaround. I'll write a full answer below. Commented Nov 25, 2022 at 12:12

1 Answer 1

Reset to default
3

It seems that to fully handle all combinations of keyboard focus and focus/blur events you need to do some extra steps. I found that I can get correct events like this:

  1. Open DevTools and the Sources tab.

  2. Press Ctrl+Shift+P to open "Run command" action

  3. Search for focus and run command Emulate a focused page (note that this is not a permanent toggle and you need to do this again in the future to debug similar stuff).

  4. Now prepare the situation you would want to test (e.g. you're about to press some keyboard button next).

  5. Click the pause button within the DevTools Sources tab with the mouse.

  6. Press Ctrl+Shift+P again and search for focus and run command Focus debuggee.

The keyboard focus is now in the correct place and any JS code that would be executed will trigger the debugger with the correct event for the next keyboard action.

If you need to debug mouse events, follow the same list but instead of clicking the pause button with mouse, press F8 twice (single press doesn't work for me?), then Ctrl+Shift+P again and search for "focus" and run command Focus debuggee using the keyboard only. Do not move the mouse even a single pixel after pressing F8 until you have exeuted the Focus debuggee command, or the page will see mousemove and other mouse movement related events.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.