Chrome DevTools で詳細な検査を行うために Twitter ブートストラップ ポップオーバーを一時停止する方法

ポップオーバー精査のために Chrome DevTools でブラウザ画面をフリーズする

Chrome DevTools を使用して Twitter Bootstrap ポップオーバーの z-index を分析する場合、徹底的な検査のためにポップオーバーを一時停止するのは課題です。この記事では、ポップオーバーをフリーズして CSS を精査および変更できるようにする方法について説明します。

関連するリンクの上にマウスを移動しても、ポップオーバーは表示されません。この障害を克服するための包括的なガイドは次のとおりです:

手順:

1. 対象の Web ページに移動します。
2. DevTools パネルを起動します ( Windows/Linux では F12 を押すか、macOS では Opt Cmd J を押します)。
3. Chrome DevTools で [ソース] タブをクリックします。
4. Web ブラウザで、目的の要素の上にマウスを移動してポップオーバーを呼び出します。 .
5. ポップオーバーが表示されている間に F8 キー (macOS では fn F8) を押します。この手順では、最後のクリックが「ソース」タブなどの DevTools インスペクター パネル内である必要があることに注意してください。
6. インスペクターの「要素」タブに移動します。
7. ポップオーバーを見つけます。トリガー要素の HTML 内にネストする必要があります。
8. ポップオーバーの CSS プロパティを自由に変更できるようになりました。

以上がChrome DevTools で詳細な検査を行うために Twitter ブートストラップ ポップオーバーを一時停止する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。