Webkit s'offre un nouvel inspecteur 9


Je ne suis pas un fervent admirateur des produits d’Apple mais force est de reconnaître qu’ils savent y mettre la manière, le nouveau Web Inspector est de la même veine.
Pour les besoins professionnels, j’utilise Safari pour vérifier la compatibilité inter-navigateurs, tout comme MS IE6/7(8) et Opera. Chrome n’est pas encore assez représenté et reste compatible avec ce que rend Safari (WebKit oblige), mais ce sera l’objet d’un autre billet.
Safari souffrait d’un inspecteur un peu poussif et pas franchement user-friendly. La dernière version de l’inspecteur de Safari remontait à plus de 9 mois, la nouvelle mouture vient de sortir et elle semble prometteuse.

Les connaisseur reconnaitront un ersatz de Firebug, mais pour Safari :

  • nouvelle interface
  • inspecteur DOM et CSS avec lequel on peut influencer l’affichage (idéal pour le debuggage CSS)
  • un gestionnaire de ressources pour la page (poids, temps de transfert…)
  • un debugger et un profiler javascript (avec pas à pas, affichage des variable en cours…)
  • la console accessible depuis n’importe quelle page avec auto-complétion
  • un inspecteur de base de données HTML5 avec requêteur intégré
  • on peut intercepter les requêtes Ajax, dans l’onglet “Resources”, mais c’est moins précis que Firebug qui, lui, montre les variables passées au requête. Un plus indéniable.

Bref du beau monde, presque le même que Firebug pour Firefox avec la touche Apple et un supplément HTML5.

A noter tout de même que cette version fonctionne uniquement avec les nightly-builds de WebKit pour Safari.

Safari l'onglet "Elements" du Web Inspector

Safari : l'onglet "Elements" du Web Inspector

Post By David Lafon (87 Posts)

David Lafon est blogueur sur Web-intention.com, consultant UX, responsable qualité web et co-fondateur de w3qualité.net.

Website: →

Connect


Laisser un commentaire

9 commentaires sur “Webkit s'offre un nouvel inspecteur

  • Jean

    À noter que c’est plutôt un travail des contributeurs du projet opensource Webkit que strictement Apple. Ne les oublions pas. C’est un boulot remarquable qu’ils font là. D’après les réponses dans les commentaires, ce sera inclus dans Safari 4.

  • David Lafon Auteur du billet

    Oui, effectivement, il est important de noter que c’est un projet qui a le soutien d’Apple. La firme à la pomme en a été l’instigatrice en 2003 et l’a offert à la communauté open-source en 2005. Depuis cette date, les contributeurs de la communauté open-source s’occupe de WebKit avec beaucoup de succès.

  • Rik

    Sans vouloir diminuer le travail des contributeurs, c’est tout de même principalement le travail des gens de Apple pour le renouveau. Maintenant, le plus intéressant sera de voir les retours qu’ils vont avoir, en espérant qu’ils seront nombreux pour en faire un outil encore plus agréable et complet que Firebug.

    Sinon, je prépare une traduction complète du billet, d’ici la fin de la semaine j’espère.

  • Yann

    Il est effectivement présent dans la 4 (téléchargeable sur le site de l’ADC).
    Un des reproches que je lui ferais par rapport à Firebug c’est de ne pas avoir la possibilité de modifier les CSS et le HTML à la volée.

  • David Lafon Auteur du billet

    @Yann (salut, comment vont les caribous auvergnats ? :-) )
    On peut modifier les CSS et le HTML à la volée mais je n’ai pas trouver ça aussi intuitif qu’avec Firebug. Pour le CSS, il ne faut pas prendre le computed style mais les autres styles sont accessibles à la modification. Pour le HTML, en double-cliquant sur un node, on intervient dessus sans problème. Je viens de faire le test avec la nightly-build r37113.

  • Rik

    Attention, la version présente dans les developer previews de Safari 4 est plus ancienne que les nightlies actuelles. D’ailleurs, on n’a pas vraiment le droit de parler de Safari 4 puisqu’on signe un NDA avant de le télécharger.

    @Yann: Comme le dit David, il est possible d’éditer le HTML et les CSS. Il y a encore un truc gênant pour les noeuds sans attributs (https://bugs.webkit.org/show_bug.cgi?id=21108) et montrer quelles propriétés sont éditables ou non (https://bugs.webkit.org/show_bug.cgi?id=16349). Si tu vois un autre problème, n’hésite pas.

    @David: Que trouves-tu moins intuitif que Firebug ? Si tu pouvais mettre le doigt sur un détail en particulier, ça peut nous aider à faire mieux.

  • David Lafon Auteur du billet

    @Rik (au passage merci de nous honorer de ta présence)
    Pour l’ergonomie de l’interface de manipulation des CSS :
    – je verrais bien l’onglet “Computed style” replié afin d’afficher les styles issus des feuilles et par conséquent modifiables
    – le double-clic sur une valeur pour la modifier est aussi un parti pris chronophage là où j’apprécie le simple clic de Firebug
    – de plus, je n’arrive pas, du moins je n’ai pas trouvé, comment on ajoutait une propriété à une classe CSS dans le panneau des CSS.
    Ces quelques remarques sont plus issues d’une longue pratique de Firebug et d’une première impression de Web Inspector, que je trouve (je le répète) d’une grande qualité.

  • Rik

    Ouh là “honorer” faut pas y aller trop fort. Je suis juste un type qui s’intéresse plus à WebKit et qui a fait quelques petites contributions.

    Pour l’onglet Computed style, beaucoup de gens sont induits en erreur, on va vous voir quelle est la meilleure solution (le replier, le descendre sous les autres règles, lui donner un aspect particulier, etc).
    Pour le double clic, je pense pas que ça changera. D’une parce que ça rentrerait pas dans les guidelines Apple. En plus je pense que le double clic pour éditer est plus naturel. Sur Firebug, avec un clic des fois tu sélectionnes, des fois tu édites, c’est confus.
    Pour ajouter une propriété, il suffit de mettre plusieurs règles sur la même ligne, séparée par un point virgule. Évidemment, ce n’est pas intuitif mais déjà possible. Mais ça fait déjà partie des bugs recensés (et doublement https://bugs.webkit.org/show_bug.cgi?id=18224 https://bugs.webkit.org/show_bug.cgi?id=20336).

    Merci beaucoup pour les retours, j’ai fait remonté l’info et je créerais les bugs s’il le faut.

Additional comments powered byBackType