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

ARANK

はじめにこんばんは！皆さんは以下のようなすぐ消えてしまう要素を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」にチェックを入れる。これは割と有名な確認方…