38

I want to inspect elements of my page in development that disappear right after he mouse leaves them. Fot this and other scenarios I want something like a "disable JS" plugin or console-command, that works not only at pageload time, but can completely halt any and every js of the current page at any time.

Does such a solution exist? I would prefer chrome, but accept firefox. Thanks.

3
  • 2
    Is that not the puropose of the dev-tools, namely the "debugger" inside chrome? Jul 5, 2013 at 23:07
  • 3
    @Lilith2k3 I think the problem he's having is that you have to use the mouse to use the debugger, and that makes it difficult to debug scripts that deal with mouse events.
    – Barmar
    Jul 5, 2013 at 23:11
  • 2

2 Answers 2

51

What worked for me to pause execution:

  1. Open Chrome javascript console (Ctrl+Shift+J)
  2. Go to "sources"
  3. On the right side, click the little "pause" icon, or press F8 to pause script execution.

You can also put in "breakpoints" within the same console. Try the following to use breakpoints:

  1. Open Chrome javascript console (Ctrl+Shift+J)
  2. Go to "sources"
  3. On the right side, click the little "pause" icon, or press F8 to pause script execution.
  4. Now you can click the "Step over", "Step Into", etc functions on the right side to slowly step into the code, line by line.
  5. You can also click on the line number for any of the sources to add a breakpoint. Breakpoints will stop the code execution when it is reached. You can enable/disable breakpoints on the right side next to the other buttons mentioned above.
2
  • 1
    Thanks for the info. I always had trouble trying to inspect js generated elements triggered on hover. Not anymore. :)
    – lithiumlab
    Sep 27, 2015 at 19:56
  • Nice, but what I really want to do is reduce CPU usage to less than 100% and stop the text from shifting every few seconds. The Ctl-Shift-J and F8 thingy greys out and freezes the whole page. Not what I want. I just want to read the page.
    – Bruce K
    Aug 19, 2019 at 19:15
14

Try using the debugger; directive (relevant MDN article). This acts like a breakpoint and should help you debug your scripts using the normal developer console.

2
  • 1
    Thank you, that did work out just as I needed: 1) Open console, type debugger; 2) Press F8 to release the pause. 3) Use the mouse to set whatever state neeed 4) Without leaving with the mouse, press F8 again to pasue scripts. Clicking elements for inspection doesn´t work while paused, but it still works from the elements-tab. Jul 6, 2013 at 22:09
  • Great simple Hack...! Oct 2, 2018 at 14:26

Your Answer

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

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