Qu'est-ce que Google Chrome équivalent à Firebug?
Je cherche un outil qui peut:
- inspecter les éléments HTML
- gérer/déboguer JavaScript
- performance du profil
- modifier des éléments en temps réel
Il est intégré. Page [papier] -> Développeur -> Outils de développement (dans Chrome v5 et inférieur). Cela est probablement différent dans la v6 car le bouton Page semble disparaître dans cette version.
Clic droit -> Inspecter l'élément
Cela fait 4 ans que la question initiale a été posée. Chrome (stable) est maintenant à la version 38. Depuis longtemps, il inclut un ensemble complet de outils de développement qui sont à peu près équivalents à Firebug pour Firefox (même si, en passant, Firefox a un inspecteur intégré aussi).
Les outils de développement de Chrome vous permettent d'effectuer certaines tâches:
- Inspecter le DOM
- Inspecter CSS
- Accéder à une console JavaScript
- Déboguer JavaScript
- Afficher les demandes du réseau, les horaires et les réponses
- Afficher les performances de rendu, JavaScript et CSS
- Inspecter le stockage local et les cookies
Les outils de développement sont accessibles de différentes manières.
Menu Chrome -> Outils -> Outils de développement
Ctrl + Shift + I sous Windows ou Cmd + Shift + I sur un Mac
F12 sous Windows
Cliquez n'importe où sur une page avec le bouton droit de la souris et sélectionnez Inspecter l'élément
Les outils dans le navigateur sont parfaits pour leur travail et constituent généralement votre meilleur choix, mais ils ne fournissent parfois pas suffisamment de détails techniques sur les charges utiles de requêtes/réponses HTTP, ou sont trop spécifiques à une page.
Dans ces cas, vous constaterez peut-être qu’un outil d’inspection HTTP dédié tel que Fiddler ou l’un des alternatives Linux fournira plus de précisions.
Si vous avez vraiment besoin de passer à l’essentiel, Wireshark va au-delà de HTTP pour une analyse complète du trafic réseau, mais préparez-vous à être submergé au début.
Vous pouvez également essayer le logiciel open source Speed Tracer de Google - http://code.google.com/webtoolkit/speedtracer/
Speed Tracer est un outil qui vous aide à identifier et à résoudre les problèmes de performances de vos applications Web. Il visualise les métriques prises à partir de points d'instrumentation de bas niveau dans le navigateur et les analyse au fur et à mesure de 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 du temps passé dans votre application. Cela inclut les problèmes liés à l'analyse et à l'exécution de JavaScript, à la présentation, au recalcul de style CSS et à la correspondance de sélecteur, à la gestion des événements DOM, au chargement des ressources réseau, aux déclenchements de minuterie, aux rappels XMLHttpRequest, à la peinture, etc.