Quelles sont les fonctionnalités de Firebug que les outils de développement de Chrome n'ont pas? [fermé]

87

Je suis un développeur Web novice, et Firebug a été recommandé plusieurs fois pour le débogage. Jusqu'à présent, cependant, je viens d'utiliser les outils de développement intégrés de Chrome. Il semble faire tout ce que Firebug fait, et est plus propre et plus organisé en bonus.

Au fur et à mesure que je progresse dans mon débogage, existe-t-il des fonctionnalités de Firebug que je manquerai avec les DevTools de Chrome? Si c'est vrai, que sont-ils?

Connexes: débogueur de type Firebug pour Google Chrome

Matthieu
la source
8
Je suis également relativement nouveau dans le développement Web, mais j'ai abandonné assez rapidement Firebug et Firefox simplement parce que Chrome semblait tellement meilleur en tant que navigateur et ensemble d'outils de développement. Les développeurs plus expérimentés peuvent avoir des points de vue différents. Dans tous les cas, assurez-vous de voir la conférence Google I / O 2010 de cette année sur les outils de développement Chrome: youtube.com/watch?v=TH7sJbyXHuk
brainjam
Ironiquement, les programmeurs dans Google Closure auront besoin de Firefox pour exécuter Closure Inspector.
hyperslug

Réponses:

137

J'ai utilisé Firebug depuis le début et c'était une aubaine comme l'invention du feu. Mais ensuite, Chrome est sorti avec son débogueur et je l'ai essayé. J'ai continué à utiliser Firebug, mais j'ai gardé un œil sur les outils de développement de Chome et je n'ai finalement pas pu trouver une raison de ne pas changer après l'ajout des outils JSON dans la v12.

Les DevTools de Chrome donnent un coup de pied parce qu'ils ont:

  • Timeline, profileur et analyseur de tas intégrés
  • Outil d'audit intégré
  • Peut accéder et éditer Local / SessionStorage, Cookies, SqlLite DB, WebSQL, AppCache, etc.
  • Reniflage du réseau WebSockets
  • Le débogueur JS a quelques fonctionnalités supplémentaires (par exemple, les points d'arrêt WebWorker)
  • Le débogueur JS vous permet d'éditer JS à la volée et de l'exécuter (JSFiddle sans le violon)
  • Chaque fenêtre reçoit une fenêtre devtools si vous le souhaitez; Firebug est un singleton
  • Firebug perturbe la page en ralentissant son chargement et en injectant du CSS pour sa fonction d'inspecteur

MISE À JOUR: 2 ans plus tard, je dois féliciter l'équipe de Firefox pour avoir fait d'énormes progrès. Cela dit, l'équipe Chrome et le débogueur font d'énormes progrès sur une base mensuelle, en tête de l'industrie. Je mettrais à jour la liste ci-dessus, mais franchement, elle remplirait toute la page.

Joseph Lust
la source
5
+1 Pour la dernière partie. J'étais autrefois fan de Firebug jusqu'à ce que je fasse un changement.
Robin Carlo Catacutan
4
La question demandait l'opposé symétrique de votre réponse :)
Dkyc
1
J'ai commencé à pleurer après avoir lu votre réponse.
Karl
1
J'allais poster un commentaire pour demander combien de cette liste est encore valable en 2014. C'est bien de voir la liste. J'aimerai toujours voir s'il y a quelque chose qui est dans Firefox mais pas dans Chrome.
Nilesh
Chrome a-t-il une alternative pour le mode de mise en page réactif (ctrl + shift + m) dans Firefox? parce que cet outil est génial
Ruben
29

Je n'ai pas encore rencontré de fonctionnalité Firebug que j'ai manquée après le passage à Chrome.

ceejayoz
la source
2
+1 pour une réponse concise et déterminée.
datasn.io
11

Les outils de développement Chrome ont repris les fonctionnalités de Firebug, donc toutes les fonctionnalités principales et la familiarité sont présentes (telles que l' objet $0, et console).

Il y a quelques petites différences, telles que les DevTools n'ont pas de panneau CSS (bien que les feuilles de style CSS puissent être manipulées dans le panneau Elements ).

Les outils Chrome ont également les panneaux Chronologie , Profils et Stockage . Le panneau Montage enregistre le chargement, le rendu CSS et l'analyse JavaScript. Le panneau Profil décrit l'utilisation des ressources et le panneau Stockage affiche et permet des modifications dans la base de données du site, le stockage local, le stockage de session et les cookies.

Enfin, les deux outils ont leurs propres variations mineures, ce qui rend diverses actions un peu plus faciles ou plus difficiles. Mon conseil est d'utiliser Firebug pour Firefox et DevTools pour les navigateurs Webkit, car seul Firebug Lite fonctionne sur Chrome, et il manque de nombreuses fonctionnalités que Firebug normal a (et les DevTools sont intégrés à Chrome).

tcooc
la source
10

Je me sens beaucoup plus à l'aise avec Firebug. Je ne peux pas penser à des détails pour le moment, mais parfois j'essaye de déboguer quelque chose dans Safari ou Chrome et cela semble être un tel PITA que je lance Firefox et que je fasse tout ce qui est fait rapidement.

L'onglet DOM est un plus, pour un. Il est plus accessible et bien présenté que l'équivalent de Chrome. Je préfère également la façon dont le DOM et les autres objets JS sont enregistrés sur la console dans Firebug.

Les plug-ins Firebug comme Pixel Perfect sont également très utiles. Je ne sais pas si un tel outil existe pour Chrome.

Dans l'ensemble, cela n'a pas d'importance car vous devez de toute façon tester dans les deux navigateurs. Et IE, autant le comparer aux outils de développement d'IE (qui se sont améliorés, mais qui ne sont toujours pas bons par rapport à FF ou Webkit).

Je ne pense pas qu'il y ait quelque chose d'avancé en particulier présent dans Firebug mais pas dans Chrome qui vous manquera.

JAL
la source
6

EDIT : C'était vrai, mais les outils de développement Chrome l'ont implémenté.

Firebug peut rechercher dans tous les scripts chargés sur une page. Les outils de développement Chrome ne peuvent rechercher que dans le script actuellement sélectionné, AFAIK.

Slavo
la source
J'utilise firebug uniquement pour cette fonctionnalité et le Cmd Shift C pour sélectionner l'élément à tout moment.
mbdev
3
Lorsque j'ai écrit la réponse, les outils de développement Chrome ne disposaient pas de cette fonctionnalité. Ils l'ont mis en œuvre depuis lors. Voir cette réponse à l'une des questions que j'ai posées ici: stackoverflow.com/a/7970237/1801
Slavo
Slavo l'a cloué. vous pouvez rechercher tous les scripts (et toutes les autres ressources) à la fois dans Chrome Dev Tools. Ouvrez simplement l'onglet Ressources et utilisez le champ de recherche dans le coin supérieur droit
Paul
La zone de recherche est maintenant partie dans CDT. Utilisez Ctrl + F pour rechercher dans le script actuel et Ctrl + Maj + F pour rechercher dans tous les scripts
Akhil
4

Pour autant que je sache, Firebug est le seul à pouvoir modifier le code HTML et le texte en direct au fur et à mesure que vous le tapez. Très utile, si vous essayez par exemple de voir comment le texte s'intégrerait dans un conteneur et d'ajouter un caractère à la fois.

Dans Chrome, lorsque vous modifiez le code HTML, vous devez appuyer sur TAB ou ENTRÉE pour quitter le «mode édition» et voir les modifications sur votre page.

Dans Firebug, vous pouvez également saisir immédiatement du code HTML. Dans Chrome, vous devez cliquer avec le bouton droit de la souris et choisir "Modifier le code HTML". Sinon, il apparaîtra comme <b> gras </b>.

Je veux vraiment passer à Chrome, car il semble fonctionner plus rapidement, mais l'édition en direct est trop importante pour moi.

Niclas
la source
Je pense que maintenant vous pouvez le faire aussi dans Chrome.
Piyush Soni
J'aimerais que vous ayez raison, mais ce n'est pas le cas. J'utilise la dernière version de Chrome 21.0.1180.89. Quelle version utilisez-vous? Bêta / Canaries?
Niclas le
3

La sélection de souris Firebug est excellente, mais je n'arrive pas à la trouver dans les outils de développement Chrome.

Cela me dérange parce que je ne trouve pas de raccourci clavier dans Firebug, alors que Chrome en manque complètement.

Je suis un développeur noob, donc la souris est toujours utilisée la plupart du temps lors du développement.

garçon maigre
la source
3

Au moment où cette question a été posée, Firebug était une bête, mais maintenant les outils de développement Chrome (DevTools) sont pratiques pour les développeurs Web. Bien que je ne discute pas de Firebug parce que j'ai appris le développement Web en utilisant Firefox avec Firebug.

C'était un excellent outil pour le développement Web et il a introduit toutes les fonctionnalités principales de DevTools et de DevTools de Firefox. Cependant, je suis passé aux Chrome DevTools bien qu'ils ne couvrent pas toutes les fonctionnalités de Firebug, car ils sont légers et beaucoup plus rapides que Firebug, l'accès à localStorage est facile à définir et les sources y sont organisées à mon avis.

Ici, je vais énumérer en quoi les fonctionnalités sont uniques dans Firebug,

  • Chercher :

    L'option de recherche est bien définie dans Firebug, car elle est facilement accessible et nous pouvons rechercher des mots - clés avec une expression régulière et sensible à la casse .

  • DOM:

    La structure DOM est facilement accessible dans Firebug avec diverses options de filtrage telles que Afficher les propriétés définies par l' utilisateur , Afficher les fonctions définies par l'utilisateur , etc.

  • Biscuits:

    Firebug nous permet de créer nos propres cookies et nous permet d' exporter des cookies .

  • Réseau / Net:

    Firebug a un panneau Net où les DevTools l'appellent Network . Les deux sont utiles pour analyser toutes les demandes faites pour charger les ressources et leur état. Dans Firebug, nous pouvons facilement saisir l' adresse IP distante des ressources .

  • Sources:

    Même si Source Edit est disponible dans les DevTools, je pense que Firebug est meilleur lorsque vous utilisez Source Edit , car si vous souhaitez éditer un fichier CSS dans les DevTools, vous devez aller dans le panneau Sources , puis appuyez sur Ctrl+ Opour trouver le fichier. Ce n'est qu'alors que vous pouvez modifier le fichier. Dans Firebug, vous pouvez facilement trouver la source Edit sous chaque onglet de menu.

  • Prise en charge du dojo:

    Une fois que j'étais développeur de dojo, Firebug a été facilement étendu pour prendre en charge le développement de dojo en utilisant l' extension Dojo Firebug .

Vijin Paulraj
la source
2

Objectivement vu, Firebug 2.0 possède de nombreuses petites fonctionnalités, que les Chrome DevTools n'ont pas. Certains d'entre eux sont répertoriés ici:

Panneau de la console

Panneau HTML

Panneau CSS

Panneau DOM

  • Affiche toutes les propriétés DOM en un seul endroit
  • Affiche les fermetures
  • Permet de filtrer l'affichage par propriétés, fonctions, etc.

Panneau net

  • Permet de s'arrêter sur XmlHTTPRequests
  • Affiche les informations de cache par demande

Panneau Cookies

  • Créer et modifier des cookies
  • Contrôle des autorisations des cookies
  • Affiche la taille brute et formatée des cookies
  • Permet d'arrêter l'exécution du script lors du changement de cookie
  • Exporter les cookies au format standard

Général

  • Ouvrez HTML, CSS et JavaScript dans un éditeur externe
  • Permet de personnaliser les raccourcis

Une "fonctionnalité" qui va au-delà de la convivialité est que Firebug est open source . Tout le monde peut donc y participer.

Cela dit, Chrome DevTools (ainsi que Firefox DevTools) ont beaucoup plus de fonctionnalités et d'autres avantages de plus en plus petits par rapport à Firebug, car l'équipe derrière Firebug est très petite par rapport aux équipes derrière les autres DevTools.

De plus, Firebug 3+ s'intègre dans Firefox DevTools intégré , ce qui signifie que ces versions héritent de toutes les fonctionnalités de Firefox DevTools et peuvent ajouter des fonctionnalités supplémentaires.

Sebastian Zartner
la source
1

Firebug a la possibilité d'attacher d'autres plugins tels que Firecookie . Pour le reste, ils sont assez similaires, c'est une question de goût à mon avis.

HoLyVieR
la source
Les outils de développement Chrome peuvent également être étendus à l'aide de l' chrome.devtoolsAPI .
Rob W
1

ajouter également qu'il peut xopy XPATH ajouter un sélecteur CSS pour un élément HTML.

C'est vraiment pratique parfois! :))) hahaha

Andr
la source
1

Je pense que les outils de développement sont similaires mais j'ai eu du mal à forcer Chrome à ne rien cacher. Même le réglage du paramètre Chrome "Désactiver le cache" ne fonctionnait pas 100% du temps; Je ne sais pas pourquoi.

Je n'ai pas eu ce problème avec Firefox / Firebug, donc je l'utilise toujours.

romain
la source
1

Ajout de mes quelques centimes ...

  1. Chrome Inspector ne pouvait pas trier les propriétés CSS par ordre alphabétique alors que Firebug pouvait le faire comme un charme. Cela aide lorsque vous inspectez un élément css et que vous devez le saisir, firebug est pratique à ce sujet.

    Conformément aux bonnes pratiques de codage CSS, il est toujours préférable de classer vos propriétés CSS par ordre alphabétique dans votre code.

  2. Lorsque vous travaillez sur un projet impliquant de nombreux scripts, dans firebug sous script tag, vous avez la possibilité de rechercher un fichier js dans la boîte de suggestion fournie. Où, comme avec chrome, vous aurez une vue arborescente boiteuse pour localiser votre fichier JS, ce qui est fastidieux pour voir l'espacement de noms de votre fichier js et parcourir l'arborescence.

    Cette option peut ne pas affecter les personnes impliquées dans de petits fichiers JS dans leur projet. Cette fonctionnalité est un succès avec Firebug que j'utilise lorsque mes scripts contiennent plus de 1000 fichiers JS.

Ravi
la source
0

J'ai presque fait le changement aujourd'hui, mais j'ai remarqué que je ne pouvais pas faire un clic droit sur le CSS modifié dans Chrome et copier les déclarations de règle ou de style comme je le peux dans firebug. DIEU Je souhaite que Firefox ne commence pas soudainement à sucer ou je n'aurais pas ce problème.

Interdiction
la source
Je viens également de remarquer que dans Chrome, vous ne pouvez pas utiliser vos touches fléchées et faire défiler diverses options d'un attribut.
Interdiction du
0

Avec le débogueur de chrome, je peux déboguer le jsni de mon projet GWT où FireBug affiche juste une fonction anonyme et je ne reconnais pas vraiment la fonction actuale du tout.

Asimov
la source
0

J'adore l'outil de développement Chrome, mais j'ai parfois manqué ces puissantes fonctionnalités de Firebug.

  • Point d'arrêt conditionnel : pause uniquement sur une condition spécifique.
  • Journalisation des appels de fonction : marquez la fonction et voyez tout ce que vous voulez savoir dans la console.
  • Break On Property Change : Marquez les objets et le débogueur s'arrêtera si la propriété est modifiée.
Ritesh Chandora
la source
0

Fonctionnalité de demande "Modifier et renvoyer"

Avec la fonction "Modifier et renvoyer" dans les outils de développement Firefox (Replay XHR ou quelque chose dans Firebug), vous pouvez rejouer la requête XHR avec des modifications dans la requête, y compris les en-têtes de requête, le corps de la requête, la méthode http et même l'URL. Replay XHR de Google Chrome rejoue simplement la demande et n'autorise aucune modification de la demande.

J'utilise Firefox Devtools lorsque j'ai besoin de cette fonctionnalité.

Gaurang Patel
la source