🐡

選択されている間のみ表示される要素を検証ツールで選択できるようにする

2023/07/18に公開

はじめに

デベロッパーツールでsetTimeoutを使ってJavaScriptのコードを一時停止させる方法の紹介です。
これを利用すると、選択されている間のみ表示される要素を表示中にコード停止させ、要素を検証ツールで選択できるようにすることができます。

例:

  • マウスオーバー中にのみ表示される要素
  • ドロップダウンメニューを開いた時の要素

手順

  1. デベロッパーツールを開きます。
  2. Consoleタブを選択します。
  3. 次のコードを入力しますsetTimeout(() => { debugger }, 3000)
  4. 一時停止させたい状態を保持します。この状態で、少し待ちます。
  5. デバッガーが開きます。デバッガーを使って、コードの実行を一時停止して、要素を選択できます。

まとめ

以上が、setTimeoutを使ってJavaScriptのコードを一時停止する方法です。この手順を使えば、JavaScriptのコードやCSSを効率的にデバッグすることができます。

参考

https://developer.mozilla.org/ja/docs/Web/API/setTimeout

Discussion