Firebug, extension Firefox pour le développement web

Outil bien connu des webmasters, Firebug est une extension pour Firefox incontournable pour tous les développeurs web. L'extension propose plusieurs outils d'aide au développement :

Inspection du code HTML : parcours du DOM, identification rapide de tous les éléments d'une page, édition du code et visualisation instantanée des modifications
Inspection des styles CSS : affichage des styles appliqués aux éléments de la page, édition en live du
Debug Javascript : console d'erreurs améliorée, possibilité d'interrompre l'exécution du code (breakpoints)
Traçage de l'activité réseau : examen complet du chargement des pages, avec visualisation chronométrique du chargement de tous les éléments de la page, et des échanges HTTP associés.

L'onglet réseau de Firebug appliqué au chargement de yahoo.fr

Commentaires

Posts les plus consultés de ce blog

La compression HTTP pour accélérer vos sites

Avec les récents changements et déclarations de Google autour de la prise en compte de la performance des sites comme un éventuel futur critère de pertinence des sites, les problématiques d'optimisation vont (re)devenir d'actualité. Un des moyens très rapide pour optimiser sensiblement les performances de son site web consiste à compresser le flux de données qui transite entre votre serveur et le navigateur Internet de vos visiteurs.

Les outils d'analyse de requêtes HTTP

L'analyse des échanges HTTP entre navigateur et serveur web est un bon moyen de détection des opérations les plus consommatrices en temps, soit celles qui impactent le plus le temps de chargement global d'une page. Tour d'horizon des outils gratuits existants : Outils en ligne D'une utilisation simple et rapide, ces outils proposent une vision synthétique des échanges à travers une chronologie précise des opérations, ainsi que le détail des requêtes et réponses HTTP. Toutefois, ils ne proposent généralement pas les mêmes options qu'un navigateur, notamment en terme de gestion de cache. site-perf.com Pingdom tools L'analyse de ce blog par Pingdom tools Plugins navigateurs Ces outils s'intègrent à votre navigateur, ce qui vous permet de simuler exactement les situations de configurations de vos visiteurs. Firefox Le compagnon idéal est l'extension livehttpheaders , outil de capture des requêtes et réponses HTTP Firebug propose également une analyse complè

Optimiser son site en maitrisant sa mise en cache

Précédemment dans notre quête de la performance, nous avions vu qu'à l'aide de quelques consignes données à notre serveur, nous pouvons alléger la quantité de données reçues par nos visiteurs sans les altérer. Poursuivons le raisonnement. Plutôt que d'alléger les données, posons-nous la question : mon visiteur a t-il vraiment besoin de recevoir cette donnée ? Le principe du cache navigateur est de stocker sur le disque dur du visiteur les composants de pages (images, scripts, page HTML), pour ne pas avoir à les recharger plus tard.

Blog Webdesign : Conception web, développement, référencement...

Rechercher dans ce blog