Inspecteur DOM dans le prochain Safari
Safari est basé sur Webkit, un moteur de rendu de pages web utilisé entre autres par Safari (sur Mac, PC et iPhone). Le groupe open source Webkit est particulièrement actif et a ajouté une fonctionnalité intéressante dans une de ses dernières « nightly build ». Cette fonctionnalité, qui sera intégrée dans Safari 3.0 version finale (prévue en même temps que Leopard), est en fait un inspecteur (DOM) de pages. Cela permet de parcourir la structure d’une page web et de ces éléments ainsi que les caractéristiques de chaque élément. Pourquoi faire cela ? Pour par exemple, comprendre comment une page est faite ou encore comment un effet CSS est défini. Découvrons ensemble cette fonctionnalité à priori sans intérêt mais qui peut s’avérer utile si vous avez un site Internet.
Pour débuter l’inspection, il suffit de faire un clic-droit sur l’élément que vous souhaitez inspecter. Seul cet élément sera bien visible sur la page, tout le reste sera foncé, ce qui est vraiment très clair et pratique. Chaque élément sera détaillé à droite de l’inspecteur. Vous remarquerez que les blocs CSS sont bien détaillés, même sur un petit graphique pour comprendre plus facilement les marges, les paddings et autres border de vos classes CSS.
Ce n’est pas tout ! Cet inspecteur cache 2 autres fonctionnalités bien pratiques : Console et Network. Network permet d’afficher sous forme de graphique comment votre page charge et quels sont les éléments qui ralentissent le chargement de votre page. Les éléments sont affichés dans l’ordre par lesquels ils sont chargés et par type (images, code javascript,…). Des conseils vous sont même donnés afin d’améliorer votre page ! Console permet de tester directement depuis l’inspecteur les scripts Javascript de votre page ce qui est bien plus facile que de changer à chaque fois l’URL avec « javascript : ».
Tout est vraiment très joli et bien intégré à Safari. Dommage qu’il ne soit pas possible d’éditer directement le contenu de la page et de la feuille CSS associée, pour cela il faudra utiliser un logiciel comme Coda ou CSS Edit. Cela reste quand même un très bon ajout à Safari et sera certainement très pratique à un bon nombre de développeurs web. Vous souhaitez l’essayer ? Il suffit de télécharger une des dernières nightly build de Webkit (pour Mac ou Windows) sur le site de Webkit.