Comment suspendre une fenêtre contextuelle d'amorçage Twitter pour une inspection détaillée dans Chrome DevTools ?

Gelage de l'écran du navigateur dans Chrome DevTools pour l'examen des popovers

Lors de l'analyse du z-index d'un popover Twitter Bootstrap à l'aide des Chrome DevTools, suspendre le popover pour une inspection approfondie présente un défi. Cet article explique comment figer le popover, vous permettant ainsi de scruter et de modifier son CSS.

Malgré le survol du lien associé, le popover n'apparaîtra pas. Voici un guide complet pour surmonter cet obstacle :

Instructions :

1. Naviguez vers la page Web cible.
2. Lancez le panneau DevTools ( appuyez sur F12 sous Windows/Linux ou Opt Cmd J sur macOS).
3. Cliquez sur l'icône Onglet "Sources" dans Chrome DevTools.
4. Depuis le navigateur Web, survolez l'élément souhaité pour appeler le popover.
5. Appuyez sur F8 (fn F8 sur macOS) pendant que le popover est affiché. Notez que cette étape nécessite que votre dernier clic soit dans le panneau de l'inspecteur DevTools, comme l'onglet Sources.
6. Accédez à l'onglet "Éléments" dans l'inspecteur.
7. Localisez votre popover, qui doit être imbriqué dans le HTML de son élément déclencheur.
8. Vous pouvez désormais modifier librement les propriétés CSS du popover.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!