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?
Réponses:
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:
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.
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).
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.
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.
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.
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.
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 .
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:
Général
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.
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.
chrome.devtoolsAPI .
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.
Ajout de mes quelques centimes ...
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.
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.
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.
J'adore l'outil de développement Chrome, mais j'ai parfois manqué ces puissantes fonctionnalités de Firebug.
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é.