devtools を使うと、 HTML 中の要素の並びやスタイルを調べたり、その場で変更してみたりできる。しかし、ドラッグ中の要素のスタイルをいじりたい、となると、 devtools を開いているだけでは難しい場合がある。その状態で devtools をある程度操作しないといけないが、マウスカーソルをそっちに持っていくと見たい状態ではなくなってしまう、という困り方。
簡単な例として、ドラッグアンドドロップで順序を変えられるリストに、ドラッグ中だけ色を反転するスタイルを当ててある。
- 一味唐辛子
- 二子玉川
- 和三盆
動画(GIF)で貼っておくとこういう感じ。今回だと、ドラッグ中だけ .sortable-chosen という class 名が当たるので、ドラッグアンドドロップをやめると該当のスタイルを devtools でいじることができない。
そういうときは setTimeout で自動で debugger を発動させると便利。 debugger - JavaScript | MDN
Console タブで以下のように setTimeout を 2秒後とかに設定して実行しておき、画面内にマウスカーソルを持っていってデバッグしたい状態にしてキープする。 2秒たったら debugger が発動して画面がその状態で止まるので、 devtools を好きに操作できる。
setTimeout(() => { debugger; }, 2000);
これは必ずしも setTimeout じゃなくてもよくて、クリックを起点に element.addEventListener('click', () => { debugger; }) とかしてもいい。操作の中のどこで停止させたいか、に沿って、使いやすい方法で debugger を発動させると便利です。
当たり前だけど、ソースコード中に debugger 文を書くと、最も狙ったタイミングで発動させられると思う。今回書いたのは、その場でちょっと見たいときや、ソースコードのどこでこうなっているかわからないときなど、ブラウザ上から発動したほうが楽なときに使いやすい方法でした。
