issueで不具合を報告するときに、wheel eventなどを可視化する

追記

書いたあとに monitorEvents というものがあることを知りました。まあ、これはこれで出力が加工されていて見やすいのでよしと…
https://developer.chrome.com/docs/devtools/console/utilities?hl=ja#monitorEvents-function

本文

不具合を発見時は、動画でキャプチャをして再現手順がわかりやすいようにしているのですが、不具合の種類によってはそれだけだとわかりにくい場合があります。
例えば、input eventが発生しているのに、画面に変化がない場合など
その場合に外部ソフトを使用してキー入力を画面上に表示してもよいのですが、DevToolsのconsoleに出せば済むことに気づいたので共有します。

// 登録
const ac = new AbortController();

document.addEventListener('click', () => console.log('🖱️ Click'), { signal: ac.signal });
document.addEventListener('dblclick', () => console.log('🖱️ Double Click'), { signal: ac.signal });
document.addEventListener('wheel', (e) => console.log(`🔄 Scroll ${e.deltaY > 0 ? '↓' : '↑'}`), { signal: ac.signal });
document.addEventListener('keydown', (e) => console.log(`⌨️ ${e.key}`), { signal: ac.signal });

// 解除
ac.abort();

画面上にはこのように出ます

🔄 Scroll ↑
🔄 Scroll ↑
🔄 Scroll ↑
🔄 Scroll ↑
🔄 Scroll ↑
🔄 Scroll ↑
🖱️ Click
⌨️ s
⌨️ d
⌨️ a
⌨️ s
⌨️ d
⌨️ a
⌨️ s
🖱️ Click
🖱️ Click
🖱️ Double Click
🖱️ Click
🔄 Scroll ↓
🔄 Scroll ↓
🔄 Scroll ↓

DevToolsのスクリーンショット
(動画を撮る際は、よくFetch/XHRも写してます)