JSイベントでhoverスタイルを実装してるUIコンポーネントのデバッグ方法について

はじめに

CSSでhoverスタイルを実装してる場合のデバッグ方法は以前から知っていましたが、JSイベントでhoverスタイルを実装してる場合のデバッグ方法を私は知りませんでした。

ですが、最近になってその方法を知ったため、この記事ではその方法についてご紹介いたします。

おさらい

まずは、CSSでhoverスタイルを実装してる場合のデバッグ方法を簡単におさらいしておきます。

• 1. DevToolsを開く（command + option + i）
• 2. デバッグしたい要素を選択（command + shift + c）
• 3. DevTools内のStylesタブから、Filterボックスの隣りにある「:hov」を選択
• 4. Force element stateから「:hover」にチェックを入れる

簡単ですね。これでCSSのhoverスタイルのデバッグはできます。

本題

少し話は逸れましたが、本題に入ります。

今回は、JavaScriptイベントの「mouseenter」と「mouseleave」を使用してるUIコンポーネントを例に、ご紹介いたします。

今回使用するイベントの仕様

• "mouseenter"
  ：マウスカーソルが要素内に入るタイミングで発火する。（バブリングは発生しない）
• "mouseleave"
  ：マウスカーソルが要素内から出たときに発火する。（バブリングは発生しない）

デバッグ方法

• 1. DevToolsを開く（command + option + i）
• 2. デバッグしたい要素を選択（command + shift + c）
• 3. DevTools内のEvent Listenersタブを選択
• 4. イベントが一覧で並んでいるので、その中から「mouseleave」を選択して、ゴミ箱のアイコンをクリックして削除する。

手順は以上です。

この状態でUIコンポーネントにホバー後、マウスカーソルがUIコンポーネント内から出ても、mouseleaveイベントが発火せず、ホバー状態を維持できます。

これで、JSイベントでhoverスタイルを実装してるUIコンポーネントのデバッグができます！

さいごに

この記事では、DevToolsを用いてJavaScriptイベントでhoverスタイルを実装してるUIコンポーネントをデバッグする方法をご紹介いたしました。

この方法を知っているとデバッグの幅が広がるので、ぜひ試してみてください。