はじめに
こんばんは！
皆さんは以下のようなすぐ消えてしまう要素を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で確認しよう
以下の手順で確認することができます。
- Elementタブを開く。
-
hover対象の要素を選択する。 - 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で確認しよう
以下の手順で確認することができます。
- Elementタブを開く。
- 対象の要素を選択する。
- 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で確認しよう
- Elementタブを開く。
- Stylesタブの「Emulate a focused page」にチェックを入れる。
「Emulate a focused page」にチェックを入れることで、DevTools側で強制的にフォーカスされた状態をエミュレートし、対象要素を表示し続けることができるようになります。
この方法はあまり使うことも少ないかもしれませんが、UIコンポーネントライブラリを使用していたりする場合に使うことがあるかもしれません。以下は一例ですのでよければ確認してみてください！
④ スニペットを使った確認方法
最後に紹介するのがスニペットを使った確認方法です。こちらの方法は今まで紹介した実装パターンすべてを確認することができる優れものになっています！！
④-1 スニペットを登録しよう
まずは以下の手順でスニペットを登録します。
- Sourcesタブを開く。
- 「>>」ボタンからSnippetsを選択する。
- 「＋New snippet」を押下し、以下ソースを登録する。
// 時間はお好みで設定してください
setTimeout(() => {debugger}, 4000);
これは実行から4秒後にデバッカーを起動するスニペットを登録していることになります。(何秒後にデバッカーを起動するかはお好みで設定してください。)
④-2 DevToolsで確認しよう
今回は「① CSSイベントでの確認方法」を例に確認をします。
- DevTools上で「Command or Ctrl + Shift + P」を押下する。
- 「Run !"スニペット名"」を実行する。(例では
debuggerModeがスニペット名) -
hoverして対象要素を表示させる。 - デバッカーが起動する。
デバッカーが起動するタイミングで確認したい要素を表示させることで、対象要素の確認が可能になります。これはCSSイベント・JavaScriptイベントに関わらず確認できるのでとても便利ですね！ちなみにスニペットは一度登録すると何回も使いまわせるので、一度登録してしまえばこの方法がオールマイティーに使えてよさそうだなと個人的に思っています！
最後に
今回は一瞬で消えてしまう要素をDevToolsで確認する方法をご紹介しました。この記事を通して、DevToolsの新しい使い方が少しでも学べたなら嬉しいです。
DevToolsには要素を確認する他にも、パフォーマンスやネットワークなど様々な観点で開発の手助けをしてくれます。まだまだ知らない機能が盛りだくさんなので、お！これいいな！と思ったら機能があればまたご紹介したいと思います。
最後までお読みいただきありがとうございました。
Discussion