🐡
選択されている間のみ表示される要素を検証ツールで選択できるようにする
はじめに
デベロッパーツールでsetTimeout
を使ってJavaScriptのコードを一時停止させる方法の紹介です。
これを利用すると、選択されている間のみ表示される要素を表示中にコード停止させ、要素を検証ツールで選択できるようにすることができます。
例:
- マウスオーバー中にのみ表示される要素
- ドロップダウンメニューを開いた時の要素
手順
- デベロッパーツールを開きます。
- Consoleタブを選択します。
- 次のコードを入力します
setTimeout(() => { debugger }, 3000)
。 - 一時停止させたい状態を保持します。この状態で、少し待ちます。
- デバッガーが開きます。デバッガーを使って、コードの実行を一時停止して、要素を選択できます。
まとめ
以上が、setTimeout
を使ってJavaScriptのコードを一時停止する方法です。この手順を使えば、JavaScriptのコードやCSSを効率的にデバッグすることができます。
参考
Discussion