may.html

<meta name=viewport content='initial-scale=1.0, minimum-scale=0.25'>
<title>console</title>
<button id=run title='Ctrl+Enter'>Run</button>
<button id=cancelBtn title=Esc>Cancel</button><br>
<textarea id=editor style='width: 100%; height: 300px; font-family: monospace;' spellcheck=false autocapitalize=none>may()

async function may() {
  while (true) {
    log('😘')
    await sleep(100)
    if (cancel) return
  }
}</textarea><br>
<textarea id=debug style='width: 100%; height: 300px; font-family: monospace;' spellcheck=false autocapitalize=none></textarea>
<script>
run.onclick = function () {
    debug.value = '';
    cancel = false;
    eval('(async function () {' + editor.value + '\n})()');
};
cancelBtn.onclick = () => cancel = true;
editor.onkeydown = function (event) {
    const ENTER = 13, ESC = 27;
    if (event.ctrlKey && event.keyCode == ENTER) {
        run.onclick();
    } else if (event.keyCode == ESC) {
        cancelBtn.onclick();
    }
};
function log(...s) {
    debug.value += s.join(' ');
    debug.scrollTo(0, debug.scrollHeight);
}
async function sleep(delay = 0) {
    return new Promise(r => setTimeout(r, delay));
}
</script>