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

StackOverflow https://stackoverflow.com/questions/3124974

  •  30-09-2019
  •  | 
  •  

Question

Je suis un développeur web novice, et je l'ai eu Firebug recommandé pour le débogage à plusieurs reprises. Jusqu'à présent, cependant, je viens d'utiliser Chrome est intégré dans les outils de développement. Il semble faire tout ce que Firebug fait, et est plus propre et plus organisé comme un bonus.

Comme je l'ai plus avancé dans mon débogage, il dispose sont que Firebug a que je vais manquer sur avec les DevTools de Chrome? Si oui, quels sont-ils?

Related: Firebug comme débogueur pour Google Chrome

Était-ce utile?

La solution

je Firebug depuis le début et il était un don du ciel comme l'invention du feu. Mais Chrome est sorti avec son débogueur et je l'ai essayé. Je continue à utiliser Firebug, mais gardé un oeil sur les outils de développement de Chome et enfin ne pouvait pas venir plus avec une raison de ne pas les outils interrupteur après JSON ont été ajoutés en v12.

Les DevTools Chrome Kick Butt, car il a:

  • intégré Montage, Profiler et analyseur Heap
  • outil intégré de vérification
  • L'accès peut et modifier local / SessionStorage, Cookies, SqlLite la DB, websql, AppCache etc ...
  • réseau de WebSockets renifler
  • JS débogueur a quelques fonctionnalités (par exemple, des points d'arrêt de WebWorker)
  • JS débogueur nous allons vous modifier JS à la volée et l'exécuter (jsFiddle w / o le violon)
  • Chaque fenêtre obtient une fenêtre DEVTOOLS si vous voulez; Firebug est un singleton
  • Firebug la page en perturbe le ralentissement vers le bas de chargement et en injectant CSS pour sa fonction d'inspecteur

Mise à jour: 2 ans plus tard, je dois féliciter l'équipe de Firefox pour faire des incursions énormes. Cela dit, l'équipe de Chrome et débogueur font des bonds énormes vers l'avant sur une base mensuelle, leader de l'industrie. Je mets à jour la liste ci-dessus, mais franchement remplirais la page.

Autres conseils

Je n'ai pas courir en fonction Firebug j'ai encore manqué après le passage à Chrome.

Je me sens beaucoup plus à l'aise avec Firebug. Je ne peux pas penser à des détails en ce moment, mais parfois, je vais essayer quelque chose de débogage dans Safari ou Chrome et il semble comme un tel PITA que je lance Firefox et obtenir ce fait rapidement.

L'onglet DOM est un plus, pour un. Il est plus accessible et bien aménagé que l'équivalent de Chrome. Je préfère la façon dont les objets DOM et autres JS sont connectés à la console Firebug aussi.

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

Dans l'ensemble, il n'a pas d'importance parce que vous avez à tester dans les deux navigateurs, de toute façon. Et IE, donc pourrait aussi bien le comparer aux outils de développement de IE (qui se sont améliorés, mais ne sont pas bons par rapport à FF ou Webkit de).

Je ne pense pas que quoi que ce soit de là avancé en particulier présent dans Firebug, mais pas dans Chrome que vous allez manquer.

Les outils de développement Chrome a repris les fonctions de Firebug, de sorte que tous les principales caractéristiques et la familiarité sont là (comme le $0 et objet console).

Il y a quelques petites différences, telles que les DevTools n'ont pas CSS panneau (bien que CSS stylesheets peuvent être manipulés dans le Les éléments panneau).

Les outils Chrome ont en outre les Timeline , Profils et Stockage des panneaux . Timeline panneau enregistre le chargement, le rendu CSS et JavaScript parsing. Profil Profils panneau utilisation des ressources et les Stockage montre du panneau et permet des changements dans la base de données du site, stockage local, le stockage de la session et les cookies.

Enfin, les deux outils ont leur propre variations mineures, ce qui rend différentes actions plus facile ou plus difficile un petit peu. Mon conseil est d'utiliser Firebug pour Firefox, et DevTools pour les navigateurs Webkit, puisque seulement Firebug Lite fonctionne sur Chrome, et il manque de nombreuses fonctionnalités du Firebug normale a (et les DevTools sont intégrés dans Chrome).

EDIT :. Ceci était vrai, mais Outils Chrome Dev implémentée

Firebug peut rechercher dans tous les scripts chargés sur une page. Outils Chrome Dev ne peut rechercher dans le script sélectionné, AFAIK.

Pour autant que je peux dire, Firebug est le seul qui peut modifier le code HTML et texte en direct que vous tapez. Très utile, si vous êtes par exemple essayer de voir comment le texte cadrerait dans un récipient et ajouter un caractère à la fois.

Dans Chrome lorsque vous modifiez le code HTML, vous devez appuyer sur TAB ou ENTER pour quitter « mode d'édition », et voir les changements sur votre page.

Dans Firebug vous pouvez également entrer du code HTML tout de suite. Dans Chrome, vous devez un clic droit et choisissez « Modifier le code HTML ». Dans le cas contraire, il sera affiché comme gras .

Je veux vraiment changer de Chrome, car il semble courir plus vite, mais le montage en direct est trop important pour moi.

La sélection de la souris a Firebug est grand, mais je ne peux pas sembler trouver dans les outils de développement Chrome.

Cela me dérange parce que je ne peux pas trouver une touche de raccourci pour en Firebug, alors que le chrome manque complètement.

Je suis un développeur de noob, de sorte que la souris est toujours utilisé 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 (de DevTools) sont à portée de main pour les développeurs web. Bien que je ne suis pas rodomontades sur Firebug parce que je l'ai appris le développement web en utilisant Firefox avec Firebug.

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

Ici, je vais énumérer la façon dont les caractéristiques sont uniques dans Firebug,

  • Rechercher :

    Rechercher option est bien définie dans Firebug, parce que son accès facile et nous pouvons recherche par mot clé sensible à la casse et expression régulière .

  • DOM:

    La structure DOM est facilement accessible en Firebug avec divers 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 les cookies et donne à disposition Exporter les cookies .

  • Réseau / Net:

    Firebug a une Net Panneau wheras les DevTools appellent Réseau . Les deux sont utiles pour analyser toutes les requêtes pour charger les ressources et leur statut. Dans Firebug, on peut facilement saisir les ressources Remote IP .

  • Sources:

    Même si le Source Modifier est disponible dans les DevTools, je me sens Firebug est meilleure en utilisant Source Modifier , parce que si vous souhaitez modifier un fichier CSS dans les DevTools , vous devez aller à Sources panneau, puis appuyez sur Ctrl + O pour trouver le fichier. Alors seulement, vous pouvez modifier le fichier. Dans Firebug, vous pouvez facilement trouver le Source Modifier sous chaque onglet du menu.

  • Support pour dojo:

    Une fois que je suis un développeur de Firebug dojo était facilement étendu pour supporter dojo Developement en utilisant Dojo Firebug extension.

2.0 Objectivement vu Firebug a beaucoup de petites fonctionnalités, que les DevTools Chrome n'ont pas. Certains d'entre eux sont énumérés ici:

Console panneau

HTML panneau

CSS panneau

DOM panneau

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

Net panneau

  • Permet d'arrêter sur XMLHttpRequests
  • informations de cache Affiche par demande

Les cookies panneau

  • Créer et modifier des cookies
  • Le contrôle des autorisations de cookies
  • Indique la taille brute et mis en forme de cookies
  • Permet d'arrêter l'exécution du script sur le changement des cookies
  • Exporter les cookies en format standard

Général

  • Ouvrir HTML, CSS et JavaScript éditeur externe
  • Permet de personnaliser les raccourcis

Une "caractéristique" qui va au-delà de la facilité d'utilisation est que Firebug est open source. Donc tout le monde peut participer à ce sujet.

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

En outre, Firebug 3+ intègre 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'avoir d'autres plug-in auquel il est connecté, comme Firecookie . Pour le reste, ils sont assez similaires, il est tout au sujet de goût à mon avis.

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

qui est vraiment parfois à portée de main! :))) hahaha

Je pense que les outils de développement sont semblables, mais je l'ai eu du mal à forcer Chrome à rien de cache. Même en Chrome paramètre « cache Désactiver » ne fonctionne pas à 100% du temps; Je ne sais pas pourquoi.

Je ne rencontrera pas ce problème avec Firefox / Firebug, donc je me sers encore.

Ajout mes quelques centimes ...

  1. Inspecteur Chrome ne pouvait pas les propriétés de type CSS par ordre alphabétique où que Firebug pourrait le faire comme un charme. Il aide lorsque vous inspectez un élément css et le besoin de le saisir est Firebug à portée de main à ce sujet.

    Comme par les bonnes pratiques de codage CSS, est toujours préférable d'avoir vos propriétés CSS classés par ordre alphabétique dans votre code.

  2. Lorsque vous travaillez sur un projet impliqué avec beaucoup de scripts.In Firebug sous balise script vous avez une option de recherche d'un fichier js dans la zone de suggestion fournie. Lorsque, de chrome, vous aurez une vue d'arbre boiteux pour localiser votre fichier JS qui est fastidieux pour voir le fichier de votre espace de nommage js et parcourir l'arborescence.

    Cette option pourrait ne pas affecter tous ceux qui implique des petits fichiers de JS dans leur projet. Cette fonction est un coup avec Firebug j'utilise quand mes scripts sont plus de 1000 fichiers JS.

Presque fait le passage aujourd'hui, mais je ne peux pas remarqué que je clic droit sur CSS modifié dans Chrome et copier la Règle ou des déclarations de style comme je peux dans Firebug. DIEU Je souhaite firefox n'a pas commencé soudainement sucer ou je n'aurais pas ce problème.

Avec le débogueur de chrome je peux déboguer le JSNI de mon projet GWT où Firebug vient montrer une fonction anonyme et je ne reconnais pas vraiment la fonction actuale du tout.

I love outil de dev Chrome, mais parfois j'ai raté ces fonctionnalités puissantes de Firebug.

  • sous condition breakpoint :. Pause à condition spécifique
  • appels de fonction d'enregistrement : marquer la fonction et de voir tout ce que vous voulez savoir dans la console.
  • Pause sur le changement de la propriété :. Mark objets et débogueur se met en pause si la propriété se changer

"Modifier Renvoyez" fonction de la demande

« Modifier Renvoyez » fonctionnalité dans Firefox Outils de développement (Replay XHR ou quelque chose dans Firebug), vous pouvez rejouer la demande XHR avec les changements de la demande, y compris les en-têtes de demande, le corps de la demande, la méthode http et même url. Replay XHR Google Chrome rejoue simplement la demande, et ne permet pas de modifications à la demande.

J'utilise Firefox Devtools quand j'ai besoin de cette fonction.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top