J'ai un élément HTML qui a un état de navigation CSS. Il y a un bug avec la marge ou le rembourrage sur la survolte et chaque fois que je mouse, le contenu de l'élément glisse un peu, son ennuyeux.
J'aimerais déboguer avec Firebug ou Chrome Dev Outils, mais un problème commun que j'ai eu avec ces outils est qu'après avoir sélectionné l'élément de Firebug / DevTools, j'ai évidemment besoin de ramener la souris sur les outils DEV et l'état de navigation n'est plus activé.
Comment puis-je inspecter / déboguer un élément HTML à l'aide de ces outils avec l'élément dans son état de navigation?
4 Réponses :
Chrome Dev Outils possède un sélecteur d'état intégré: plancher dans les éléments> Panneau de styles. Vous pouvez basculer d'autres pseudo-classes (comme: actif) aussi.
Également dans Firefox, si vous souhaitez déboguer le DOM au lieu de la CSS, vous devrez: 1) Appuyez sur F12 pour ouvrir l'inspecteur 2) Sélectionnez l'onglet Debugger 3) Survolez l'élément que vous souhaitez inspecter lors de: Etat 4) Appuyez sur F8 pour mettre en pause le débogueur 5) Sélectionnez l'onglet Inspecteur DOM Tout s'arrête en mode Pause, JS, DOM Rafraîchir, SSS STATS, mais les animations CSS. Le plus important est d'être dans l'onglet Debugger tout en appuyant sur F8.
Voici un coup d'écran pour Firebug & Ceux qui ne sont pas assez forts pour voir le commentaire de Agroboz (comme moi)
Vous pouvez maintenant voir les règles de style pseudo-classe et les forcer sur des éléments.
Pour voir les règles telles que: Survolez dans le volet Styles Cliquez sur la petite boîte en pointillé en haut à droite.
Pour forcer un élément dans: Survolez l'état, cliquez avec le bouton droit de la souris sur l'élément.
Alternativement, vous pouvez utiliser le volet de barre d'attente d'écouteurs d'événements dans le panneau Scripts et sélectionnez pour faire une pause dans les mancheurs de MouseOver.
pour Firebug Hover and Active State