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

— Plie d'Evan
source

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
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
source

13

Firebug Lite pour Google Chrome .

— Emmett
source

FireBug Lite est un excellent outil et fonctionne également dans IE, Opera, Safari et Firefox: getfirebug.com/firebuglite

— Nat Ryall

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

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
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
source