Firebug: Comment inspecter des éléments changeant avec les mouvements de la souris?
Parfois, je dois inspecter des éléments qui apparaissent uniquement sur une page si vous placez la souris sur une zone donnée. Le problème est que si vous commencez à déplacer la souris vers la console firebug afin de voir les modifications, un événement de sortie de la souris est déclenché et toutes les modifications que je tente d'inspecter disparaissent. Comment traiter de tels cas?
En gros, je cherche quelque chose qui soit:
- Basculez vers la console Firebug sans déplacer la souris (utilisez peut-être des raccourcis clavier? Mais je ne comprends pas comment utiliser Firebug avec le clavier uniquement)
- Avoir la possibilité de "geler" la page afin que les mouvements de votre souris ne déclenchent plus d'événements.
Merci.
Je pense que vous pouvez aussi faire ceci:
Choisissez le mode d'inspection Firebugs
Survolez l'élément qui apparaît l'élément que vous souhaitez inspecter, puis utilisez le Tab Plusieurs fois, clé pour rendre Firebug actif (je trouvais difficile de voir quand Firebug était le composant actif, mais rien ne valait comme essai et erreur - quand j'ai vu que la barre d'outils de recherche de Firefox était active, j'avais alors Shift + Tab deux fois en arrière pour entrer dans Firebug.
Ensuite, j'utilisais les touches fléchées L/R pour contracter/développer des éléments et les touches fléchées U/D pour naviguer dans la console Firebugs.
Travaillé pour moi quand même!
Info-bulle HTML (Firebug)
Sélectionnez l'élément avec l'inspecteur ou dans le DOM. Allez dans l'onglet "Styles" de Firebug et cliquez sur la petite flèche située sur l'onglet, puis sélectionnez ": survolez" (également disponible ": actif"). L'état restera en "survol" et vous pourrez sélectionner d'autres éléments pour les faire passer.
HTML Tooltip (outils de développement Firefox)
Cliquez sur le bouton pour afficher trois cases à cocher, que vous pouvez utiliser pour définir les pseudo-classes: hover,: active et: focus de l'élément sélectionné.
Cette fonctionnalité est également accessible à partir du menu contextuel de la vue HTML.
Si vous définissez l'une de ces pseudo-classes pour un nœud, un point orange apparaît dans la vue balisage à côté de tous les nœuds auxquels la pseudo-classe a été appliquée:
Aide sur JQuery
Ouvrez la console et entrez jQuery('.css-class').trigger('mouseover')
Info-bulle Javascript régulière
Ouvrez la console et entrez document.getElementById('yourId').dispatchEvent(new Event('mouseover'));
Le panneau de style de Firebug comporte un menu déroulant dans lequel vous pouvez choisir l’état :active ou :hover.
Pour l'infobulle de l'interface utilisateur de Jquery, j'ai finalement mis en place un long délai pour le masquage de l'élément afin d'avoir le temps de l'inspecter avant sa suppression. Par exemple, j'ai utilisé cela pour inspecter l'info-bulle:
$( document ).tooltip({ hide: {duration: 100000 } });
au lieu de:
$( document ).tooltip();
Vous pouvez insérer un point d'arrêt au début du gestionnaire d'événements mouseout. Son code ne sera pas exécuté tant que vous ne pourrez pas continuer, et vous pourrez utiliser l'inspecteur DOM, etc., pendant que l'exécution est arrêtée.
Vous pouvez également démarrer le débogueur sur une minuterie. Entrez cette commande dans la console:
setTimeout(function(){ debugger; }, 10000);
Cela vous laissera 10 secondes pour utiliser la souris et donner à la page l'apparence que vous souhaitez pour l'inspecter. Lorsque le débogueur démarre, la page se fige et vous pourrez explorer les éléments de l'onglet de l'outil de développement sans que le DOM ne change ou ne réponde à aucun événement de souris supplémentaire.
La touche de raccourci de Firebug pour inspecter les éléments est Ctrl + Shift + C (Windows/Linux).
Allez ici pour une liste de tous les raccourcis clavier Firebug .
Pour l'info-bulle d'amorçage:
$(document ).tooltip({delay: { show: 0, hide: 100000 }});
Bien que sélectionner :hover dans le menu CSS puisse être agréable si vous souhaitez uniquement inspecter du code CSS, cela ne fonctionne pas si tout ce que vous souhaitez inspecter est modifié à l'aide de JavaScript.
Dans ce cas, un simple hack consiste à ouvrir Firebug dans une fenêtre différente (coin supérieur droit de la barre Firebug), puis à déplacer votre souris à l'emplacement souhaité et à faire glisser un élément de la fenêtre du navigateur. Maintenant, vous pouvez inspecter ce que vous voulez dans la fenêtre Firebug. Il suffit de ne pas déplacer votre souris dans la fenêtre du navigateur.
Pour les événements Javascript tels que survolez la souris.
- Open Firebug/Inspecter un élément.
- Cliquez sur l'élément avant l'événement mouseover, par exemple. cliquez sur un div. Il deviendra bleu pour indiquer qu'il est sélectionné.
- Mettez votre souris sur l'élément et ne bougez pas à partir de ce point.
- Utilise ton ↑/↓ touches fléchées pour manœuvrer dans Firebug.
- Utilise ton ←/→ touches fléchées pour développer/contracter le code avec + ou -.
- Double tap Tab pour accéder au volet CSS.
- Utilisez les touches fléchées pour naviguer. Utilisation shift et les touches fléchées pour sélectionner le texte. Ctrl Et C copier.
- en attente Shift et double tap Tab pour revenir au volet HTML.
C'est une question extrêmement ancienne à présent, mais j'ai trouvé une réponse qui répond directement à la partie "geler le navigateur" de la question.
Contrôle + Alt + B. Ceci est "pause sur mutez". Cela signifie que, lorsque vous survolez un élément avec Firebug activé (Contrôle + Maj + C), lorsque les attributs HTML sont modifiés, ils atteignent un point d'arrêt, ce qui vous permet de naviguer facilement pour rechercher des chemins, etc.
J'ai trouvé que Chrome fonctionne un peu différemment de Firefox . En particulier, les menus qui se ferment lorsque vous cliquez sur la souris en dehors du menu restent ouverts lors de leur inspection dans Chrome (et se ferment lors de leur inspection avec Firebug ). Le conseil est donc d'essayer d'utiliser un outil de développement différent dans un navigateur différent pour voir si cela fait une différence.
Console ouverte:
Si vous avez une info-bulle basée sur javascript, recherchez les éléments applicables dans la console avec le sélecteur approprié. comme ci-dessous et confirmez que vous êtes en mesure de trouver l'élément approprié avec les sélecteurs.
$('your selector')
Écrivez ci-dessus javascript et appuyez sur Entrée. vous aurez une liste d'éléments.
Maintenant, par exemple Si la bibliothèque a ajouté l'événement sur mouseenter entrez le script suivant:
$('your selector').mouseenter()
Appuyez sur Entrée.
De cette façon, vous pouvez simuler des événements de mouvement de souris sans souris réelle. et peut utiliser le pointeur de la souris pour enquêter sur l’outil de débogage.