9 mois se sont écoulés depuis notre dernière nouvelle concernant le Web Inspector et nous avons beaucoup de choses sympas à vous raconter. Si vous utilisez le Web Inspector régulièrement avec les nighlty builds, vous avez du remarquer certaines améliorations alors que d'autres changements plus subtiles vous ont peut-être échappés.

Quelques améliorations du Web Inspector sont des contributions de membres de la communauté WebKit. Nous souhaitons vraiment voir la totalité de la communauté impliquée pour créer le meilleur outil de développement web disponible. Rappelez-vous, la plupart du Web Inspector est écrit en HTML, JavaScript et CSS. Il est donc très facile de commencer à le changer et l'améliorer.

Interface redesignée

En premier et particulièrement, le Web Inspector revet désormais un nouveau design pour organiser l'information selon des groupes de tâches - représentées par les icônes dans la barre d'outils. Les éléments de la toolbar (Éléments, Ressources, Scripts, Profils et Bases de données) sont nommées d'après les éléments fondamentaux avec lesquels vous travaillerez dans les panneaux respectifs. Interface redesignée

Console

La Console est dorénavant accessible depuis n'importe quel panneau. Contrairement aux autres panneaux, la Console n'est pas utilisée que pour une seule tache – elle peut-être utilisé en inspectant le DOM, en débuggant du JavaScript ou en analysant des erreurs de syntaxe HTML. Le bouton d'ouverture/fermeture de la Console se trouve dans la barre de statut, déclenchant une animation pour l'afficher ou la cacher depuis le bas du Web Inspector. La console peut aussi s'ouvrir ou se fermer avec la touche Esc.

Le total d'erreurs et d'avertissements est affiché en bas à droite, dans la barre d'état. Cliquer sur ces totaux ouvrira la Console.

En plus des changements visuels de la Console, nous avons aussi grandement amélioré son utilisabilité en ajoutant de l'auto-complétion. Au fur et à mesure que vous tapez des expressions, des noms de propriétés seront automatiquement suggérés. S'il y a plusieurs propriétés avec le même préfixe, appuyer sur la touche Tab vous fera cycle parmi elles. Appuyer la flèche droite acceptera la suggestion actuelle. La suggestion actuelle sera aussi acceptée en appuyant sur Tab si c'est la seule propriété possible.

Notre compatibilité avec la ligne de commande Firebug et les API window.console a aussi été grandement amélioriée par Keishi Hattori (服部慶士), un étudiant de l'université de Tokyo (東京大学) qui a travaillé d'arrache-pied dans ce domaine pendant son projet d'été. (GSoC)

Panneau Éléments

Le panneau Éléments est globalement le même que la précédente vue DOM – au moins visuellement. Sous le capot, nous avons opérés de nombreux changements et unifiés le tout en un seul arbre DOM.

  • Descendre dans des sous-documents — développer un élément frame ou object vous montrera l'arbre DOM pour le document à l'intérieur de cet élément.
  • Mises à jour automatiques — l'arbre DOM sera mis à jour lorsque des nœuds seront ajoutés ou enlevés de la page inspectée.
  • Inspecter les éléments cliqués — activer le nouveau mode d'inspection vous permettra de bouger votre souris au-dessus de la page pour trouver un nœud à inspecter. Cliquer sur un nœud dans la page le mettra en valeur dans le panneau Éléments et coupera le mode d'inspection. C'est une contribution de Matt Lilek.
  • Désactiver temporairement des styles — en passant la souris sur une règle éditable, vous verrez des cases à cocher permettant de désactiver des styles.

  • Édition de style — un double clic permet d'éditer une propriété de style. Supprimer tout le texte supprimera la propriété. Taper ou coller plusieurs propriétés ajoutera toutes les propriétés.
  • Pas à pas pour les valeurs numériques — pendant que vous éditez une propriété à valeur numérique, vous pouvez utilisez les flèches Haut et Bas pour augmenter ou diminuer cette valeur. Maintenir la touche Alt donnera des pas de 0.1 alors que maintenir la touche Shift donnera des pas de 10.

  • Édition d'attributs DOM — double cliquez pour éditer un attribut DOM. Taper ou coller plusieurs attributs ajoutera les nouveaux attributs. Supprimer tout le texte supprimera l'attribut.
  • Édition de propriétés DOM — double cliquez pour éditer une propriété DOM dans le cadre Propriétés. Supprimer tout le texte supprimera la propriété si c'est autorisé.
  • Édition des dimensions — doucle cliquez pour éditer n'importe laquelle des dimensions d'une boîte CSS.
  • Position metrics — le cadre Dimensions (Metrics) inclus désormais la position pour les éléments en position absolue, relative ou fixe.

Panneau Ressources

Le panneau Ressources est une version boostée de notre précédent panneau Réseau. Il a une timeline "waterfall" similaire mais beaucoup de travail a été fait pour le rendre encore plus pratique.

  • Graphique par poids – cliquez sur Poids (Size) dans la barre latérale pour voir rapidement les plus grosses ressources téléchargées.
  • Options de tri multiples — il y a de nombreuses options de tri disponibles pour les graphiques temporels, y compris par latence et durée.
  • Barre de latence — le graphique temporel montre désormais la latence avec une barre de couleur plus claire. Cela représente le temps entre l'émission de la requête et la première réponse du serveur.
  • Vue des ressources unifiée — en cliquant sur une ressource dans la barre latérale, vous verrez les données récupérées sur le réseau, y compris les en-têtes de requête et réponse.
  • Voir les XHRs — les graphiques de temps et poids montrent aussi les XMLHttpRequest. Sélectionner une ressource XHR dans la barre latérale vous montrera les données et en-têtes XHR.

Panneau Scripts

Drosera, le précédent débugueur JavaScript a été remplacé par un nouveau débugueur JavaScript intégré au Web Inspector. Le nouveau débugueur JavaScript intégré est beaucoup plus rapide que Drosera et devrait être beaucoup plus agréable.

Depuis le panneau Scripts, vous pouvez voir tous les scripts faisant partie de la page inspectée. Cliquer dans la gouttière d'un script mettra un point d'arrêt sur cette ligne de code. Il y a les contrôles classiques pour mettre en pause, reprendre et passer à la ligne suivante de code. En pause, vous verrez la pile d'appel courante et les variables in-scope dans la barre latérale de droite.

Le Web Inspector a une fonctionnalité unique concernant les variables in-scope : il montre les closures, les déclarations "with" et les objets liés aux événements séparemment. Cela vous donne une vision plus clair de l'origine de vos variables et pourquoi votre script fonctionne mal (ou même bien par accident).

Panneau Profil

Le tout nouveau panneau Profiler JavaScript vous aidera à identifier où le temps s'écoule dans les fonctions JavaScript de votre page. La barre latérale de gauche liste tous les profils enregistrés et un arbre sur la droite vous montre les informations récupérés par le profil sélectionné. Les Profils ayant le même nom sont regroupés sous un même item comme plusieurs exécutions consécutives.

Il y a deux manières de voir un profil : de bas en haut (heavy) ou de haut en bas (tree). Chaque vue a ses propres avantages. La vue heavy vous permet de comprendre quelles sont les fonctions ayant le plus de répercussions sur les performances et leurs chemins d'appels. La vue tree vous donne un aperçu global de la suite d'appels de vos scripts en commençant au plus haut de la pile d'appel.

Des contrôles de filtrage de données sous le profil vous facilitent la dissection des informations du profil. Le bouton focus (symbolisé par un oeil) filtrera les profils pour ne montrer que cette fonction et ses parents. Le bouton exclure (symbolisé par un X) enlèvera la fonction sélectionnée du profil et répercutera le temps total sur les parents de cette fonction. Lorsque l'une de ses options de filtrages est active, un bouton est disponible pour restaurer l'état original du profil.

Le profiler JavaScript de WebKit est totalement compatible avec les fonctions console.profile() et console.profileEnd() de l'API Firebug. Mais vous pouvez aussi spécifier un titre à console.profileEnd() pour arrêter un profil particulier si plusieurs profils sont en cours d'enregistrement. Vous pouvez aussi enregistrer un profil en utilisant le bouton Start/Stop du panneau Profil.

Panneau Bases de données

Le panneau Bases de données vous permet d'intéragir avec le stockage bases de données HTML 5. Vous pouvez examiner le contenu de toutes les bases de données de la page actuelle et y exécuter des requêtes. Chaque base de données est présentée dans la barre latérale. Développer le triangle devant une base révèlera toutes les tables de cette base. Sélectionner une table vous montrera une grille de données représentant toutes les lignes et colonnes de cette table.

Sélectionner une base dans la barre latérale vous montrera une console interactive pour effectuer des requêtes SQL. Cette console dispose d'une auto-complétion pour les mots-clefs SQL communs ainsi que les noms des tables de cette base.

Recherche

En complément de la réorganisation selon les tâches, le champ de recherche dans la barre d'outils cherchent désormais dans le panneau courant en mettant en avant les résultats selon le contexte. Limiter la recherche au panneau courant permet à chaque panneau de supporter des requêtes spécialisées pour le type d'informations présentées. Les panneaux Éléments et Profils ont des requêtes spéciales.

Le panneau Éléments supporte des sélecteurs XPath et CSS en plus du texte normal. Toute recherche sera tentée comme du texte normal, une requête XPath en utilisant document.evaluate() et un sélecteur CSS en utilisant document.querySelectorAll(). Tous les résultats seront mis en avant dans l'arbre DOM, le premier étant révélé et sélectionné.

Le panneau Profils support des recherches sur le nom des fonctions et sur les URL des ressources. Des recherches numériques sont aussi possibles parmi les colonnes Self, Total et Calls. Pour faciliter les recherches numériques, quelques opérateurs et unités sont supportés afin de limiter ou étendre vos résultats. Par exemple, vous pouvez chercher "> 2.5ms" pour trouver toutes les functions qui ont pris plus de 2.5 millisecondes pour s'exécuter. En plus de "ms", les autres unités supportées sont : "s" pour les temps en secondes et "%" pour les pourcentages de temps. Les autres opérateurs supportés sont "<", "<=", ">=" et "=". Quand aucune unité n'est spécifiée, la recherche numérique se limite à la colonne Calls.

Dans tous les panneaux, presser Entrée dans le champ de recherche ou ⌘G (Ctrl+G sur Windows et Linux) révèlera le prochain résultat. Presser ⇧⌘G (Ctrl+Shift+G sur Windows et Linux) révèlera le précédent résultat. Dans les panneaux Ressources, Scripts et Profils, la recherche sera effectuée sur la vue actuelle et sautera au premier résultat seulement si la vue actuelle a un résultat pertinent.

Disponible maintenant et comment contribuer

Tout cela est disponible dès à présent dans les nightlies Mac et Windows. Essayez-le maintenant et dites nous ce que vous aimez (ou ce que vous n'aimez pas).

Si vous souhaitez contribuer, il y a des tâches très intéressantes dans la liste des bugs et améliorations du Web Inspector. Les autres contributeurs dans le salon #webkit sont à peu près toujours disponibles pour fournir de l'aide ou des conseils.