Firebug... DevTools

Bonsoir tout le monde,

hier je me suis rendu compte qu'une nouvelle version de firebug c'était installée sur mon firefox.. Quel changement ! Il ne cible plus exactement les éléments mais se contente de juste ouvrir le html général..

Quelqu'un sait régler ce problème ou il faut que je revienne à la version précédente ?
Modifié par blond1n (13 Feb 2017 - 17:40)

L'app Firebug n'est plus maintenue, il me semble ? https://alternativeto.net/software/firebug/

Tu parles de l'outil de développement web inhérent à firefox ?
Tu peux cliquer droit sur n'importe quel endroit de la page et choisir "examiner l'élément" dans le menu contextuel, il te montre la ligne de code html correspondante et celle de CSS ciblée en fonction.

Quand tu fais ctrl + shift + i, l'icône dans le coin supérieur gauche de la fenêtre de développement te permet toujours d'inspecter un élément également...

Si le fonctionnement de Firefox de 51.0 a à ce point changé par rapport à avant, essaie p-e de procéder à sa réinstallation ? De mon côté, je n'observe aucun problème...
Modifié par Reka (30 Jan 2017 - 22:23)

Bonjour,

Effectivement le module Firebug n'est plus maintenu et est remplacé par les Outils de développement qui entre-nous soit dit, contiennent les mêmes fonctionnalités. Seul l'affichage semble avoir légèrement changé.

Pour utiliser ces outils très régulièrement, je peux vous assurer qu'il est toujours possible d'examiner un élément individuel. Qu'il s'agisse d'un conteneur ou d'un enfant. On peut modifier à la volée le code html, modifier les textes, vérifier les css appliquer, obtenir les mesures détaillées etc etc Et ca c'est uniquement pour parler de l'onglet concernant le html.

Après il est possible de travailler le Javascript, modifier les feuilles de style voire en importer temporairement, vérifier les transactions du réseaux, contrôler les en-têtes, le webstorage, obtenir la vue adaptative pour un contrôle du responsive et j'en passe tellement l'outil est bardé de fonctionnalités.
C'est simple, si je devais tout détailler, on obtiendrait une page qui ferait fumer la molette e votre souris. D'autant que Mozilla s'en est déjà chargé et toute documentation complémentaire est accesssible via son centre d'aide aux utilisateurs.

Cerise sur le gâteau, il intègre même un "colorpicker" qui permet d'obtenir la valeur en hexa ou en rgb d'un pixel. Pratique !

A ce compte autant carrément désinstaller le module qui de toute façon ne bénéficiera d'aucune amélioration ni fonctionnalité supplémentaire.

Bonne journée.

J'ai constaté ça moi aussi, ce week-end. Le message dit que Firebug a été désormais intégré dans l'outil de développement de Firefox, c'est à dire que si on utilisait pas cet outil avant, on est pas capable de savoir ce qui fait partie de Firebug ou bien de l'outil de développement.

Résultat des courses: j'adorais Firebug mais je l'ai désinstallé et je vais faire mes tests désormais sur Google Chrome...

lionel_css3 a écrit :
J'ai constaté ça moi aussi, ce week-end. Le message dit que Firebug a été désormais intégré dans l'outil de développement de Firefox, c'est à dire que si on utilisait pas cet outil avant, on est pas capable de savoir ce qui fait partie de Firebug ou bien de l'outil de développement.

Résultat des courses: j'adorais Firebug mais je l'ai désinstallé et je vais faire mes tests désormais sur Google Chrome...

C'est moi ou Il y a un truc illogique dans ces propos ?

Car de mon point de vue à part le nom et le fait que ce soit intégré nativement à FF je ne vois pas ce que ça change dans la pratique.

A moins d'avoir mal compris

Hello

Utilisateur de firebug et firefox, j'ai du mal à travailler avec un autre navigateur ou autre outil..

Mais j'expérimente depuis peu le navigateur "firefox developer edition" et ses outils comme sa version du "examiner l'élément".... et j'avoue être assez convaincu...

Comme (et si) firebug n'évolue plus... je pense continuer à migrer de ce côté là un bon moment...

On verra

Sur Mac j'ai toujours l'ancien firebug il me semble. Ceci dit l'outil natif de Firefox est bien meilleur sur tout les points et ça s'apprend très vite car perso c'est ce qui m'empêche souvent de changer d'outils.

Greg_Lumiere a écrit :
C'est moi ou Il y a un truc illogique dans ces propos ?

Car de mon point de vue à part le nom et le fait que ce soit intégré nativement à FF je ne vois pas ce que ça change dans la pratique.

A moins d'avoir mal compris

Pleins de choses ont changé, il y a certains automatismes que je ne retrouvait plus et avant je n'utilisais pas l'outil dev de Firefox alors je ne suis pas capable de faire la différence entre lui et Firebug..

J'ai toujours utilisé firebug par tradition et nostalgisme, et au début l'outil intégré de ff n'était pas à la hauteur.

Du coup je l'ai réessayé et on y retrouve tout, de la même façon, mais avec des amélioration en plus, et quelques trucs mieux pensés.

Après la petite phase d'habitude à l'interface c'est tout bénef.

lionel_css3 a écrit :


Pleins de choses ont changé, il y a certains automatismes que je ne retrouvait plus et avant je n'utilisais pas l'outil dev de Firefox alors je ne suis pas capable de faire la différence entre lui et Firebug..

Pour moi ça a été l'effet inverse. C'est-à-dire que j'avais du mal avec Firebug à prendre mes marques; alors je basculais de Firebug aux outils. Puis les outils se sont très fortement étoffés et je me suis rendus compte que toutes les fonctionnalitsé de Firebug que j'utilisais faisaient parties de ces outils.

Ceux de Chromes (et Opera in facto) sont assez proches pour ne pas m'avoir rebutés.

Par contre, impossible de me faire à ceux de I.E./Edge. Je fais une espèce de réaction allergique hypodermique caractérisée.

Reka a écrit :

Tu parles de l'outil de développement web inhérent à firefox ?
Tu peux cliquer droit sur n'importe quel endroit de la page et choisir "examiner l'élément" dans le menu contextuel, il te montre la ligne de code html correspondante et celle de CSS ciblée en fonction.

Lorsque je cible un élément, il ne me mets pas l'élément direct, comme avant, mais l'élément le plus haut (parent) .. En gros pour trouver une ligne il faut que j'ouvre chaque div, chercher la bonne, etc. Grosse galère .

Alors que avant je cliquais je tombais direct sur l'élément et le css en face. . .

Par contre je retiens le "ctrl + shift + i". Je ne l'utilisais pas avant, ne le connaissant pas.
Modifié par blond1n (04 Feb 2017 - 12:40)

blond1n a écrit :
Lorsque je cible un élément, il ne me mets pas l'élément direct, comme avant, mais l'élément le plus haut (parent) .. En gros pour trouver une ligne il faut que j'ouvre chaque div, chercher la bonne, etc. Grosse galère .
Alors que avant je cliquais je tombais direct sur l'élément et le css en face.
Par contre je retiens le "ctrl + shift + i". Je ne l'utilisais pas avant, ne le connaissant pas.

Sauf erreur, si tu cliques d'abord avec ta souris sur l'élément en question sur la page HTML, puis ensuite clic droit / examiner l'élément, tu tombes direct sur celui dans l'arborescence DOM.
C'est ainsi que je procède pour mes tests et jusqu'à présent je n'ai eu aucun soucis et sûrement pas à déployer tous les noeuds un par un...

ctrl + shift + c C'est le raccourci pour sélectionner directement un élément de la page.

Aussi, il y a ctrl + shift + m pour l'outil responsive.

sepecat a écrit :

Sauf erreur, si tu cliques d'abord avec ta souris sur l'élément en question sur la page HTML, puis ensuite clic droit / examiner l'élément, tu tombes direct sur celui dans l'arborescence DOM.

Je fais clic droit / inspecter l'élément avec firebug : il affiche à la hauteur du "Body". Si je fais comme tu dis ça marche. Je ne pige pas pourquoi la ligne de firebug ne marche plus ..

Je vois qu'il y a pas mal de "FirebugUser" par ici, je ne savais pas qu'on l'utilisait encore... Juste au passage : quel est pour vous le point fort de cet outil par rapport à l'inspecteur de Chrome ?

Je n'utilise pas Chrome Firefox .. les autres navigateurs, juste pour vérifier les compatibilités/bugs

Bonjour,

Olivier C a écrit :
Je vois qu'il y a pas mal de "FirebugUser" par ici, je ne savais pas qu'on l'utilisait encore... Juste au passage : quel est pour vous le point fort de cet outil par rapport à l'inspecteur de Chrome ?

J'utilise les DevTools de Firefox (Firebug a été désactivé... Pour les nostalgiques, on peut utiliser le thème - les couleurs à la Notepad++ - de Firebug dans les DevTools internes ).

L'affichage des évènements attachés à un élément est BEAUCOUP plus clair dans Firefox : il y a un petit cartouche (ev) à côté de l'élément ; un clic et on sait de quel type et script il s'agit. S'il y a 2, 3, 4 fois le même, c'est le même évènement en train de se réattacher sur l'élément... (l'histoire de la dropdown qui fonctionne, fonctionne plus, refonctionne, refonctionne plus, etc )
Un clic sur une ligne et on a l'extrait de la fonction concernée.

Le moins par rapport à Chrome, c'est quand l'inspecteur HTML après rechargement se repositionne sur body et plus sur l'élément précédemment pointé. De mémoire c'est quand cet élément est généré en JS (je crois) mais en tout cas c'est embêtant. (c'était le sujet de la conversation quelques messages plus haut je crois ?)

Bonjour
En ce qui me concerne, j'ai toujours utilisé FireBug et je viens de me mettre aux outils intégrés dans FF. Non seulement FireBug n'est plus maintenu, mais depuis quelques temps il y avait des fonctions qui ne marchaient plus.
FireBug et les outils intégrés FF ouvrent une fenêtre à part, ce qui est très pratique quand on a 2 écrans. Je ne suis pas parvenu à obtenir le même effet avec Chrome, je reste donc avec mon FF favori.
Connaissez vous un moyen d'ouvrir une fenêtre outil à part sur Chrome?

@PapyJP, il faut cliquer sur le menu avec 3 petits points(de l'inspecteur) pour détacher l'inspecteur sous chrome.

bzh a écrit :
@PapyJP, il faut cliquer sur le menu avec 3 petits points(de l'inspecteur) pour détacher l'inspecteur sous chrome.

Ou le mettre en colonne en vis à vis du contenu dans le même onglet.