La toute nouvelle mouture de Safari, la navigateur fourni par défaut sur Mac OS X a fait couler beaucoup d’encre, aussi bien pour annoncer son arrivée sous Windows que pour dénoncer les nombreuses failles de sécurité qui l’affectent au point – pouvait-on lire chez les mauvaises langues pommophobes – de concurrencer Internet Explorer toutes versions confondues. C’était évidemment en occulter toutes nouveautés intéressantes, à commencer par le nouveau Web Inspector, la nouvelle suite d’outils Safari pour développeurs web. Et pour cause, puisque cette dernière n’est disponible que sous Mac OS, et qu’elle est surtout désactivée par défaut.

Le Web Inspector de Safari vous permet dans un premier temps d’explorer le DOM de la page en cours et d’obtenir les renseignements relatifs aux différents noeuds présents avec une vue globale.

Exploration du DOM avec le Web Inspector de Safari

Il permet également d’afficher le style de CSS appliqué à l’élément en cours. Là où cette fonctionnalité devient vraiment intéressante, c’est que les différents styles appliqués sont affichés dans l’ordre de la cascade, et que les styles écrasés par d’autres appelés plus tard dans la cascade sont barrés.

Exploration du style CSS avec le Web Inspector de Safari

Mais également les dimensions, marges intérieures et extérieures dudit élément, toujours pratique. Dommage qu’il ne permette pas de repérer les bugs de doublement des marges des éléments flottants sous Internet Explorer !

Exploration des marges avec le Web Inspector de Safari

Enfin, le quatrième volet vous permet de connaître tout ce que vous aviez toujours voulu savoir sur l’élément en cours sans jamais oser le demander ©.

Tout ce que vous avez toujours voulu savoir sur l'élément en cours sans jamais oser le demander

Utiliser le Web Inspector de Safari

Comme nous l’avons vu plus haut, le Web Inspector n’est pas actif par défaut dans Safari, il vous faut donc l’activer avant de pouvoir l’utiliser. Lancez Terminal.app et entrez la ligne suivante :

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Redémarrez maintenant votre Safari et chargez une page quelconque. Le clic droit vous propose maintenant un menu contextuel “Inspect Element”. Sélectionnez le, vous y êtes.

Et Firebug dans tout ça ?

Firebug est une extension Firefox également disponible sous Flock. Must have absolu pour tout développeur web qui se respecte, elle offre une impressionnante panoplie d’outils permettant d’explorer le DOM, débugger du CSS, du Javascript… Le Web Inspector de Safari peut-il se targuer de remettre la supprématie de cette dernière en question ou bien le fossé entre les deux est-il encore trop important ?

Eh bien malheureusement, et malgré tout le travail effectué, il reste encore beaucoup de chemin à faire aux développeurs de Webkit pour égaler Firebug. Le Web Inspector ne dispose pas (encore) de débugger Javascript, ce qui ne serait pas du luxe sous Safari, et, oh combien frustrant, il n’est pas possible de changer les propriétés des du Javascript, du CSS ou du XHTML à la volée afin d’obtenir le résultat désiré en live sans devoir recharger la page toutes les 5 secondes.

Pas encore un must have, donc, mais un outil bien pratique pour débugger sous Safari, en attendant la vraie caisse à outils dont rêvent tous les développeurs travaillant sous Mac.

Perry the Platypus wants you to subscribe now! Even if you don't visit my site on a regular basis, you can get the latest posts delivered to you for free via Email: