Quelles sont les fonctionnalités de Firebug que les outils de développement de Chrome ne possèdent pas?
Je suis un développeur Web novice et Firebug a été recommandé pour le débogage plusieurs fois. Jusqu'à présent, cependant, je viens d'utiliser les outils de développement intégrés de Chrome. Il semble faire tout ce que fait Firebug, et est plus propre et plus organisé en bonus.
À mesure que je progresse dans le débogage, Firebug a-t-il des fonctionnalités que je manquerai avec les DevTools de Chrome? Si c'est vrai, que sont-ils?
En relation: débogueur de type Firebug pour Google Chrome
J'ai utilisé Firebug depuis le début et c'était une aubaine comme l'invention du feu. Mais alors 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 finalement je n'ai plus pu trouver de raison de ne pas changer après JSON des outils ont été ajoutés en v12.
Kick Butt DevTools de Chrome car il a:
- Analyseur de chronologie, de profileur et de tas intégré
- Outil d'audit intégré
- Peut accéder et éditer Local/SessionStorage, Cookies, SqlLite DB's, WebSQL, AppCache etc ...
- Reniflage de réseau WebSockets
- Le débogueur JS possède d'autres fonctionnalités (par exemple, les points d'arrêt WebWorker)
- Le débogueur JS vous permet de modifier JS à la volée et de l'exécuter (JSFiddle sans le violon)
- Chaque fenêtre obtient 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 percées. Cela dit, l'équipe Chrome et le débogueur font d'énormes progrès mensuels, menant l'industrie. Je mettrais à jour la liste ci-dessus, mais franchement, cela remplirait toute la page.
Je n'ai pas encore rencontré de fonctionnalité Firebug que j'ai manquée après le passage à Chrome.
Les outils de développement Chrome Chrome ont repris les fonctionnalités de Firebug, donc toutes les fonctionnalités principales et la familiarité sont là (comme le $0 et console objet).
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 Elements panneau).
Les outils Chrome ont en plus les panneaux Chronologie, Profils et Stockage. Les Chronologie le panneau enregistre le chargement, le rendu CSS et l'analyse syntaxique JavaScript. Le panneau Profile décrit l'utilisation des ressources et le panneau Storage affiche et autorise les modifications dans la base de données du site, le stockage local, la session stockage et cookies.
Enfin, les deux outils ont leurs propres variations mineures, ce qui rend les différentes 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 possède (et les DevTools sont intégrés à Chrome).
Je me sens beaucoup plus à l'aise avec Firebug. Je ne peux pas penser aux détails pour le moment, mais parfois j'essaierai de déboguer quelque chose dans Safari ou Chrome et cela ressemble à un tel PITA que je lance Firefox et que tout soit 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 DOM et les autres objets JS sont connectés à 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 quand même tester dans les deux navigateurs. Et IE, aussi bien le comparer aux outils de développement d'IE (qui se sont améliorés, mais ne sont toujours pas bons par rapport à FF ou à Webkit).
Je ne pense pas qu'il y ait quelque chose de avancé en particulier présent dans Firebug mais pas dans Chrome que vous manquerez.
MODIFIER : Cela était vrai, mais Chrome Dev Tools l'a implémenté.
Firebug peut rechercher dans tous les scripts chargés sur une page. Chrome Dev Tools ne peut rechercher que dans le script actuellement sélectionné, AFAIK.
Pour autant que je sache, Firebug est le seul à pouvoir éditer du code HTML et du texte en direct pendant que vous le tapez. Très utile, si vous essayez par exemple de voir comment le texte pourrait tenir 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 d'édition" et voir les modifications sur votre page.
Dans Firebug, vous pouvez également saisir immédiatement le code HTML. Dans Chrome, vous devez cliquer avec le bouton droit et choisir "Modifier HTML". Sinon, il apparaîtra comme <b> bold </b>.
Je veux vraiment passer à Chrome, car il semble fonctionner plus rapidement, mais l'édition en direct est trop importante pour moi.
Le firebug de sélection de souris est excellent, mais je n'arrive pas à le trouver dans les outils de développement Chrome Chrome.
Cela me dérange parce que je ne trouve pas de raccourci clavier dans Firebug, alors que chrome ne le contient pas 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 Chrome (DevTools) sont pratiques pour les développeurs Web. Bien que je ne déclamais pas Firebug parce développement web en utilisant Firefox avec Firebug.
C'était un excellent outil pour le développement Web et il a présenté toutes les principales fonctionnalités 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 facilement défini et les sources sont organisé là à mon avis.
Ici, je vais énumérer comment les fonctionnalités sont uniques dans Firebug,
Recherche :
L'option de recherche est bien définie dans Firebug, car elle est facilement accessible et nous pouvons rechercher des mots clés avec sensible à la casse et expression régulière .
DOM:
La structure DOM est facilement accessible dans Firebug avec diverses options de filtrage comme Afficher les propriétés définies par l'utilisateur, Afficher les fonctions définies par l'utilisateur et ainsi de suite.
Cookies:
Firebug nous permet de créer nos propres cookies et donne la possibilité ( d'exporter les cookies .
Réseau/Net:
Firebug a un panneau Net alors que les DevTools l'appellent Network. Les deux sont utiles pour analyser toutes les demandes de chargement des ressources et leur statut. Dans Firebug, nous pouvons facilement saisir les ressources " IP distante .
Sources:
Même si le Source Edit est disponible dans les DevTools, je pense que Firebug est meilleur en utilisant Source Edit, car si vous souhaitez éditer un fichier CSS dans les DevTools, vous devez aller dans le panneau Sources, puis appuyer sur Ctrl+O pour trouver le fichier. Ce n'est qu'alors que vous pouvez modifier le fichier. Dans Firebug, vous pouvez facilement trouver le Source Edit sous chaque onglet de menu.
Prise en charge du dojo:
Une fois que j'étais développeur dojo, Firebug a été facilement étendu pour prendre en charge le développement dojo en utilisant Dojo Firebug Extension .
Firebug 2.0 objectivement vu possède de nombreuses petites fonctionnalités, que les Devils Chrome DevTools ne possèdent pas. Certains d'entre eux sont répertoriés ici:
- Affiche XMLHttpRequests, y compris toutes les informations de demande
- Affiche les modifications des cookies
- Encore plus API de ligne de commande fonctions
- Séparé Éditeur de commandes
- Édition en ligne avec auto-complétion pour les attributs et les styles CSS
- Options pour contrôler s'il faut mettre en évidence les modifications, les développer et les faire défiler pour les afficher
- Options pour contrôler l'affichage des entités
- Boîte d'informations rapides
- Affiche les feuilles de style de la page de manière formatée
- Sélecteurs panneau latéral
- Affiche toutes les propriétés DOM en un seul endroit
- Affiche fermetures
- Permet de filtrer l'affichage par propriétés, fonctions, etc.
- Permet de s'arrêter sur XmlHTTPRequests
- Affiche les informations de cache par demande
- Créer et éditer 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 l'utilisabilité est que Firebug est open source . Ainsi, tout le monde peut y participer.
Cela dit, les Chrome DevTools (ainsi que les 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 les Firefox DevTools intégrés , ce qui signifie que ces versions héritent de toutes les fonctionnalités des Firefox DevTools et peuvent ajouter des fonctionnalités supplémentaires.
Ajout de mes quelques cents ...
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 l'attraper. Firebug est pratique à ce sujet.
Conformément aux bonnes pratiques de codage CSS, il est toujours préférable de trier 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 la balise script, vous avez la possibilité de rechercher un fichier js dans la boîte à suggestions fournie. Où comme avec chrome vous aurez une vue arborescente boiteuse pour localiser votre fichier JS qui est fastidieux pour voir l'espace de noms de votre fichier js et parcourir l'arborescence.
Cette option peut ne pas affecter toute personne impliquée avec de petits fichiers JS dans son projet. Cette fonctionnalité est un bang avec Firebug J'utilise lorsque mes scripts sont plus de 1000 fichiers JS.
ajouter également qu'il peut copier XPATH ajouter un sélecteur CSS pour un élément HTML.
C'est parfois très pratique! :))) hahaha
Je pense que les outils de développement sont similaires, mais j'ai eu du mal à forcer Chrome pour ne rien mettre en cache. Même la définition du paramètre Chrome "Désactiver le cache" n'a pas travailler 100% du temps, je ne sais pas pourquoi.
Je n'ai pas eu ce problème avec Firefox/Firebug, donc je l'utilise toujours.
Firebug a la possibilité d'avoir d'autres plugins attachés comme Firecookie . Pour le reste, ils sont assez similaires, c'est une question de goût à mon avis.
Fonction de demande "Modifier et renvoyer"
Avec la fonction "Modifier et renvoyer" dans les outils pour développeurs Firefox (relire XHR ou quelque chose dans Firebug), vous pouvez rejouer la demande XHR avec des changements dans la demande, y compris les en-têtes de demande, le corps de la demande, 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é.
J'adore Chrome mais parfois j'ai raté ces puissantes fonctionnalités de Firebug.
- Point d'arrêt conditionnel: pause uniquement sur 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: Marquer les objets et le débogueur se met en pause si la propriété est modifiée.
J'ai presque fait le changement aujourd'hui, mais j'ai remarqué que je ne peux pas faire un clic droit sur le CSS modifié dans Chrome et copier les déclarations de règles ou de styles comme je le peux dans Firebug. DIEU J'aimerais que Firefox ne démarre pas soudainement sucer ou je n'aurais pas ce problème.
Avec le débogueur chrome je peux déboguer le jsni de mon projet GWT où FireBug montre juste une fonction anonyme et je ne reconnais pas vraiment la fonction actuale du tout.