Le Web Inspector de Safari 3, un Firebug killer ?

Le 01 Jul 2007 à 17h51 | Catégorie : Publié sous | 6 commentaires

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.

Commenter »

  1. Denzen about 2 hours later:

    Euh, ce que montre tes captures n’est absolument pas nouveau… Ça date même de l’année dernière… Tu es sûr d’avoir vraiment mis Safari à jour ?

  2. Denzen about 2 hours later:

    Le nouveau Web Inbspector ressemble plutôt à ça : http://webkit.org/blog/108/yet-another-one-more-thing-a-new-web-inspector/ L’ancien, lui ressemble à ça : http://webkit.org/blog/?p=41

    Voilà.

  3. Frederic de Villamil about 2 hours later:

    Mon Safari est parfaitement à jour, merci (3.0.2). Je pense plutôt que l’inspecteur fourni dans Webkit la nightly de Webkit n’est pas le même que celui de la bêta de Safari, tout simplement.

  4. console.log() about 2 hours later:

    �a a l’air � la hauteur de Firebug au niveau inspection des �l�ments de la page, mais niveau debugage javascript il n’y a absolument rien.

    Il manque quand m�me une console � la Firebug, avec l’affichage des erreurs javascript, la possibilit� de taper et executer du javascript, et une API avec des console.log()/.dir(), des timers, des profilers, etc…

  5. Denzen about 2 hours later:

    Ouais, ça doit être un truc comme ça…

  6. tanguy:r about 17 hours later:

    J’ai aussi posté à ce sujet il y a deux semaines : http://tanguy.romey.fr/2007/06/12/safari-3-beta-et-wordpress/ La vraie évolution à mon avis en terme de productivité pour Safari 3 est bien sur le support des Google Apps, ainsi que des éditeurs wysiwyg type TinyMCE.

    Pour le débuggage JS, il existe toujours Drosera, livré par défaut avec Webkit…

Laisser un commentaire

Merci de vous exprimer dans un français correct. Les commentaires déplacés, injurieux et le spam seront supprimés.

Les trackbacks sont fermés pour cause de spam.