stop js execution

stop loops, events, etc.

by Laurens Maneschijn

HTML

To stop most loops:<br>
(hacky, but it works. ids are just increasing numbers. might have to increase the max)<br>
<code>
for (i = 0; i &lt; 10000; i++) {
  clearTimeout(i);
  clearInterval(i);
  cancelAnimationFrame(i);
}
</code>

<hr>

As above, stop all loops bookmarklet (drag to bookmarks bar) so you can always 1 click it to stop all loops:<br>
<a href="javascript: for (let i=0;i<i_max;i++) { clearTimeout(i); clearInterval(i); cancelAnimationFrame(i); }">stop js loops</a>

<hr>

To stop all javascript execution, and/or to step through code to find what exactly happens when e.g. hovering over element, type this in the console (or in your code to break at that point)<br>
Note that this only works while the debugger console is already open. Also does not work from bookmarklet.
<code>debugger;</code>

<hr>

To list and/or remove all event handlers:<br>
Note that this depends on getEventListeners(obj) to work, which only works when used inside the Chrome developer console. So copy paste below code in your Chrome developer console:<br>
<code>
let list = [];
let targets = Array.from(document.querySelectorAll('*'));
targets.push(document);
targets.forEach((obj) => {
    let listeners = getEventListeners(obj);
    for (p in listeners) {
        listeners[p].forEach((l) => {
            removeEventListener(l.type, l.listener, l.useCapture);
            list.push([obj, l.type, l.listener, '' + l.listener, l.useCapture]);
        });
    }
});
console.table(list);
</code>


<hr>

<details>
	<summary>references/links</summary>
	<ul>
		<li><a target="_blank" href="https://developer.chrome.com/docs/devtools/console/utilities/#getEventListeners-function">Chrome developer console: getEventListeners()</a></li>
		<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener">MDN removeEventListener()</a></li>
		<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger">MDN...

CSS

code {
	display: inline-block;
	white-space: pre;
	background: #8882;
	padding: 5px;
}

JavaScript

// to stop most loops:
function stopLoops() {
	let i_max = Math.max(
		10000,
		setTimeout(()=>{}),
		setInterval(()=>{}),
		requestAnimationFrame(()=>{})
	);
	for (let i = 0; i < i_max; i++) {
	  clearTimeout(i);
	  clearInterval(i);
	  cancelAnimationFrame(i);
	}
}

// Or as a simple bookmarklet:
// javascript: for (let i=0;i<i_max;i++) { clearTimeout(i); clearInterval(i); cancelAnimationFrame(i); }

// only works when run in Chrome developer console:
function listAndRemoveAllEventHandlers() {
	let list = [];
	let targets = Array.from(document.querySelectorAll('*'));
	targets.push(document);
	targets.forEach((obj) => {
		let listeners = getEventListeners(obj);
		for (p in listeners) {
			listeners[p].forEach((l) => {
				removeEventListener(l.type, l.listener, l.useCapture);
				list.push([obj, l.type, l.listener, '' + l.listener, l.useCapture]);
			});
		}
	});
	console.table(list);
}