1. ホーム
  2. css

[解決済み] クロームデバッガ / DevToolsパネルで画面をフリーズさせて、ポップオーバーを検査する?

2022-03-20 14:11:14

質問

クロームのインスペクターを使って z-index のポップオーバーを作成しましたが、非常にもどかしいです。

ポップオーバーを(表示したまま)フリーズさせて、関連するCSSを評価・修正する方法はありますか?

関連リンクに固定の「ホバー」を置いても、ポップオーバーが表示されません。

解決するには?

動作するようになりました。以下は私の手順です。

  1. 目的のページを閲覧する
  2. 開発コンソールを開く F12 Windows/Linuxの場合、または オプション + + J macOSの場合
  3. を選択します。 Sources をクリックすると、クロームインスペクターが表示されます。
  4. ウェブブラウザのウィンドウで、目的の要素にカーソルを合わせると、ポップオーバーが開始されます。
  5. ヒット F8 Windows/Linuxの場合(または fn + F8 macOSの場合)ポップオーバーが表示されたままです。 実際のページ上のどこかをクリックした場合、F8は何も行いません。最後のクリックはインスペクタのどこか、たとえばソースタブである必要があります。
  6. に移動します。 Elements タブをクリックします。
  7. ポップオーバーを見つける(トリガー要素のHTMLにネストされる)。
  8. CSSの修正を楽しむ