Qu'est-ce que Google Chrome équivaut à Firebug?

29

Je recherche un outil qui peut:

  • inspecter les éléments HTML
  • gérer / déboguer JavaScript
  • performances du profil
  • modifier des éléments en temps réel
development performance google-chrome profiling Plie d'Evan
la source

Réponses:

32

Il est intégré. Page [papier] -> Développeur -> Outils de développement (dans Chrome v5 et versions antérieures). Il est probable que ce soit différent dans la v6 car le bouton Page semble disparaître dans cette version.

Mark Hatton
la source
3
L'outil de Google présente certains inconvénients - l'affichage des demandes ajax n'est pas aussi simple, il n'y a pas de mode multiligne qui soit pratique, vous ne pouvez pas modifier le HTML dans une fenêtre, il n'affiche pas le remplissage / les marges en survol dans l'arborescence HTML, vous ne pouvez tout simplement pas naviguer dans le DOM réel (juste l'arborescence HTML) et enfin et surtout, je trouve les fonctionnalités d'édition CSS tout simplement plus maladroites - il n'y a pas de saisie semi-automatique dans Google pour une chose. Il est toujours très utilisable, mais Firebug est juste meilleur.
cgp
2
Ou shift-ctrl-I pour les paresseux :)
Tim Post
1
@Mark Remarque, j'utilise 5.0.375.99. Je ne sais pas si cela fait une différence maintenant ou à l'avenir.
Evan Plaice
1
Dans v6, c'est Wrench -> Tools -> Developer Tools
enobrev
17

Clic droit -> Inspecter l'élément

HoLyVieR
la source
5

Cela fait 4 ans que la question initiale a été posée. Chrome (stable) est maintenant à la version 38. Pendant longtemps, il a inclus un ensemble complet d' outils de développement qui sont à peu près équivalents à Firebug pour Firefox (bien que Firefox ait même un inspecteur intégré également).

Les outils de développement de Chrome vous permettent de faire quelques choses:

  • Inspectez le DOM
  • Inspecter CSS
  • Accéder à une console JavaScript
  • Déboguer JavaScript
  • Afficher les demandes, les horaires et les réponses du réseau
  • Afficher les performances de rendu, JavaScript et CSS
  • Inspectez le stockage local et les cookies

Les outils de développement sont accessibles de différentes manières.

  • Menu Chrome -> Outils -> Outils pour les développeurs

  • Ctrl+ Shift+ Isous Windows ou Cmd+ Shift+ Isur Mac

  • F12 sous Windows

  • Cliquez avec le bouton droit n'importe où sur une page et sélectionnez Inspecter l'élément


la source
3

Les outils dans le navigateur sont excellents dans leur travail et sont généralement votre meilleur premier choix, mais parfois ils ne fournissent pas suffisamment de détails techniques sur les charges utiles de demande / réponse HTTP, ou sont trop spécifiques à la page.

Dans ces cas, vous pouvez constater qu'un outil d'inspection HTTP dédié comme Fiddler ou l'une des alternatives Linux fournira plus d'informations.

Si vous avez vraiment besoin d'obtenir du bare-metal, Wireshark va au-delà de HTTP pour une analyse complète du trafic réseau, mais soyez prêt à être dépassé au début.

JasonBirch
la source
Je ne peux pas dire que je connais le violoniste, mais Wireshark est définitivement excessivement nu. Wireshark n'est vraiment utile que si vous avez besoin de voir les détails des protocoles de niveau inférieur.
Evan Plaice
Fiddler est plus proche des outils de développement Firebug / Chrome pour la convivialité. L'un des endroits où je l'ai trouvé le plus pratique est la publication de fichiers KML sur mon site Web; vous pouvez voir les demandes et les réponses des applications de bureau Windows comme Google Earth, pas seulement les navigateurs Web. J'ai utilisé Wireshark plusieurs fois, mais je conviens qu'il n'est généralement pas utile pour les tâches quotidiennes des webmasters.
JasonBirch
1

Vous pouvez également essayer le Speed ​​Tracer open source de Google - http://code.google.com/webtoolkit/speedtracer/

Speed ​​Tracer est un outil pour vous aider à identifier et à résoudre les problèmes de performances dans vos applications Web. Il visualise les mesures prises à partir de points d'instrumentation de bas niveau à l'intérieur du navigateur et les analyse pendant l'exécution de votre application. Speed ​​Tracer est disponible en tant qu'extension Chrome et fonctionne sur toutes les plates-formes où les extensions sont actuellement prises en charge (Windows et Linux).

En utilisant Speed ​​Tracer, vous pouvez obtenir une meilleure image de l'endroit où vous passez du temps dans votre application. Cela inclut les problèmes causés par l'analyse et l'exécution de JavaScript, la mise en page, le recalcul de style CSS et la correspondance des sélecteurs, la gestion des événements DOM, le chargement des ressources réseau, les incendies de temporisation, les rappels XMLHttpRequest, la peinture, etc.

mvark
la source