すぐ消えてしまう要素をDevToolsで確認するTips集

はじめに

こんばんは！
皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？

常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！

① CSSイベントでの確認方法

まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！

import "./style.css";

export const Index = () => {
  return (
    <div>
      <button className="myButton">Button</button>
      <div className="content">Displaying Content</div>
    </div>
  );
};

/** ※スタイルは一部のみ記載しています。*/
.content {
  visibility: hidden;
}
.myButton:hover + .content {
  visibility: visible;
}

①-1 DevToolsで確認しよう

以下の手順で確認することができます。

1. Elementsタブを開く。
2. hover対象の要素を選択する。
3. Stylesタブの「Force element state」から「:hover」にチェックを入れる。

これは割と有名な確認方法かもしれません！この方法でhoverした状態にすることができ、DevTools上で要素を確認することができます。hoverの他にも色々なCSSイベントを確認することが可能です。

② JavaScriptイベントでの確認方法

次にJavaScriptイベントで表示制御をしているパターンです。ここでは<button/>のonMouseOverイベント発生時に対象要素を表示し、onMouseOutイベント発生時に非表示にする実装を例に見ていきましょう！

export const Index = () => {
  const [isDisplay, setIsDisplay] = useState(false);

  return (
    <div>
      <button
        onMouseOver={() => setIsDisplay(true)}
        onMouseOut={() => setIsDisplay(false)}
      >
        Button
      </button>
      {isDisplay && <div>Displaying Content</div>}
    </div>
  );
};

②-1 DevToolsで確認しよう

以下の手順で確認することができます。

1. Elementsタブを開く。
2. 対象の要素を選択する。
3. Event Listenersタブの「mouseout」を選択し、イベントを削除する。

onMouseOutイベントが発生しないようにすることで、表示し続けるようにしています。これも簡単な設定で確認できますね！

③ 強制的にフォーカスがあるようにページをエミュレートする確認方法

これは割と限定的なパターンかもしれませんが、強制的にフォーカスがあるようにページをエミュレートして確認する方法をご紹介します。例えば、以下のようにフォーカス時にポップオーバーAPIで対象要素を表示するような場合に適用できます。

export const Index = () => {
  const ref = useRef<HTMLDivElement>(null);

  const handleFocus = () => {
    ref.current?.showPopover();
  };

  const handleBlur = () => {
    ref.current?.hidePopover();
  };

  return (
    <div>
      <button
        popoverTarget="myPopover"
        onFocus={handleFocus}
        onBlur={handleBlur}
      >
        Button
      </button>
      <div id="myPopover" popover="auto" ref={ref}>
        Displaying Content
      </div>
    </div>
  );
};

③-1 DevToolsで確認しよう

1. Elementsタブを開く。
2. Stylesタブの「Emulate a focused page」にチェックを入れる。

「Emulate a focused page」にチェックを入れることで、DevTools側で強制的にフォーカスされた状態をエミュレートし、対象要素を表示し続けることができるようになります。

この方法はあまり使うことも少ないかもしれませんが、UIコンポーネントライブラリを使用していたりする場合に使うことがあるかもしれません。以下は一例ですのでよければ確認してみてください！

https://goo.gle/3ydBzcx

④ スニペットを使った確認方法

最後に紹介するのがスニペットを使った確認方法です。こちらの方法は今まで紹介した実装パターンすべてを確認することができる優れものになっています！！

④-1 スニペットを登録しよう

まずは以下の手順でスニペットを登録します。

1. Sourcesタブを開く。
2. 「>>」ボタンからSnippetsを選択する。
3. 「＋New snippet」を押下し、以下ソースを登録する。

// 時間はお好みで設定してください
setTimeout(() => {debugger}, 4000);

これは実行から4秒後にデバッカーを起動するスニペットを登録していることになります。(何秒後にデバッカーを起動するかはお好みで設定してください。)

④-2 DevToolsで確認しよう

今回は「① CSSイベントでの確認方法」を例に確認をします。

1. DevTools上で「Command or Ctrl + Shift + P」を押下する。
2. 「Run !"スニペット名"」を実行する。(例ではdebuggerModeがスニペット名)
3. hoverして対象要素を表示させる。
4. デバッカーが起動する。

デバッカーが起動するタイミングで確認したい要素を表示させることで、対象要素の確認が可能になります。これはCSSイベント・JavaScriptイベントに関わらず確認できるのでとても便利ですね！ちなみにスニペットは一度登録すると何回も使いまわせるので、一度登録してしまえばこの方法がオールマイティーに使えてよさそうだなと個人的に思っています！

⑤ BreakPointを使った確認方法 (追記:2024/10/5)

こちらはDOMの変更をBreakPointで検知し、一時停止した状態で要素を確認する手順です。

⑤-1 BreakPointを設定しよう

まずは以下の手順でBreakPointを設定します。

1. Elementsタブを開く。
2. BreakPointを設定するDOMを右クリックし、「Break on」を開く。
3. 「subtree modifications」を選択する。(今回はサブツリーの変更による検知を使用)

また、BreakPointの各種設定とトリガー内容は以下の通りです。

設定	BreakPointのトリガー
subtree modifications	選択したNodeのサブツリーが変更されたとき
attribute modifications	選択したNodeの属性が変更されたとき
node removal	選択したNodeが削除されたとき

⑤-2 DevToolsで確認しよう

今回は「② JavaScriptイベントでの確認方法」のコードを例に確認をします。

1. BreakPointを設定する。
2. onMouseOverで要素を表示する。
3. デバッカーが起動する。
4. ステップ実行し、対象の要素を表示する。

BreakPointを置くだけで要素を確認できるのは非常にお手軽ですね。今回はサブツリーの変更をトリガーに設定しましたが、他にも設定がありクラス名の付与などでも止めることができます。BreakPointは手軽さと汎用性の高さが魅力的ですね！

⑥ キーボードショートカットでの確認方法 (追記:2024/10/5)

スクリプト実行の一時停止をキーボードショートカットで行い、要素を確認する方法になります。

⑥-1 DevToolsで確認しよう

1. Sourcesタブを開く。
2. onMouseOverで要素を表示する。
3. キーボードで「F8 または command(Ctrl)+\」を入力する。
4. デバッカーが起動する。

この手順ではキーボードショートカットを使うことで、マウスを使うことなくデバッカーの起動ができるところが非常に魅力的だと思いました！やはり、できる限りマウスを触らずに作業するということをいいですね😋

最後に

今回は一瞬で消えてしまう要素をDevToolsで確認する方法をご紹介しました。この記事を通して、DevToolsの新しい使い方が少しでも学べたなら嬉しいです。

DevToolsには要素を確認する他にも、パフォーマンスやネットワークなど様々な観点で開発の手助けをしてくれます。まだまだ知らない機能が盛りだくさんなので、お！これいいな！と思ったら機能があればまたご紹介したいと思います。

最後までお読みいただきありがとうございました。