Web Inspector, avec Safari sous Léopard

[Hyp]

J'ai pensé que ce serait utile de dédier un sujet au nouveau Web Inspector de Safari.



Pour commencer, l'activation.

Le Web Inspector n'est accessible que si l'on a activé le menu Debug.

Pour ça ouvrir un Terminal (Application > Utilitaires) et y copier-coller la ligne:

CODE

defaults write com.apple.Safari IncludeDebugMenu 1

Puis relancer Safari.

Pour accéder au WI dans une page, faire un clic droit > Inspecter l'élément.


Il y a 2 vues: fenêtre indépendante, et fusion dans la fenêtre active.

Pour switcher entre les modes, c'est ici:



Ce qu'il fait:

La colonne de gauche liste tous les fichiers (html, css, javascript, images, etc...) utilisés par la page active.

Pour les fichiers HTML il y a 2 modes d'affichage: code source ou arborsescence.



En mode arborescence, un clic sur une balise dans le code affiche ses propriétés CSS à droite, et la met en évidence dans la page. (Voir première capture).

Ça c'est pour les fichiers listés dans la catégorie "Documents".

La catégorie "Images" liste... les images, et affiche pour chacune ses dimensions, son poids, son type MIME... et permet évidemment de les enregistrer sur sa machine.

La catégorie Others affiche tout le reste. Les ressources Flash par exemple.

En bas, 2 boutons:

La Console, simple, elle liste les erreurs Javascript et autres.

Et Network; très intéressant:

Il affiche un graphique en temps réel de la page chargée, avec la taille des différents fichiers, le poids général, et pour chaque élément, la possibilité d'afficher toute une série d'infos utiles (voir la capture).

Voilà je pense avoir fait le tour, en gros.

N'hésitez pas à réagir ou à relever d'autres fonctionnalités que j'aurais pu oublier.


Par contre, j'ai peut-être mal regardé, mais il me semble qu'Apple ne parle du WI nulle part - en tout cas pas sur les pages "grand public", c'est pourtant assez énorme comme nouveauté je trouve.

Ce message a été modifié par Hyp - 29 Oct 2007, 11:51.