Webdeveloper - firefox

Noter ce cours :

Liens sponsorisés :

La barre d'outils Webdeveloper est principalement destinée aux webmasters. Apparaissant sous la forme d'une barre d'outils, c'est une extension indispensable également aux internautes qui vont pouvoir modifier le style du site consulté par exemple, ou encore supprimer les cookies crées par un site quelconque en surfant sur une page.

Webdeveloper apparaît sous cette forme :

Vous pouvez télécharger la webdeveloper toolbar ici : http://joliclic.free.fr/mozilla/webdeveloper/

Nous allons maintenant détailler les nombreuses options que permet cette extension de firefox. Cliquez sur le bouton Désactiver. Voici la liste des options qui apparaissent et leurs fonctions :

• Cache : cette option permet de désactiver le cache de firefox lorsque vous visitez des sites. Ceci peut être très utile par exemple si vous rencontrez un problème d'affichage (qui peut venir d'une mise à jour non prise en compte sur votre navigateur).
• Cookies : cette option permet de désactiver l'utilisation des cookies sur le site concerné.
• Image Animées : cette option permet de désactiver l'animation des images animées (vous ne verrez que la première image).
• Images : désactive l'affichage des images.
• Java : désactive l'affichage des applets java.
• JavaScript : désactive le javascript.
• Couleurs de la page : désactive les couleurs du document au profit des couleurs par défaut.
• Le bloqueur de popup : désactive l'anti popup.
• Le Refferer : désactive la possibilité au site que vous consultez de savoir sur quelle page vous vous trouviez avant.
• Les styles CSS : Vous permet de désactiver tous les styles (All styles), seulement les styles déclarés dans la balise concernée (Inline styles), ou encore de désactiver les styles d'une ou de plusieurs feuilles de styles que vous choisirez. Vous pouvez également supprimer les styles des objets (frames, etc...) en choisissant "embeded styles".

Le deuxième menu accessible via la barre d'outils est le menu CSS. Voici les options disponibles pour ce menu :

• Ajouter une feuille de style personnalisée : cette option vous permet d'ajouter une feuille de style personnalisée située sur votre disque dur à la page de consultation. Elle pourra donc modifier intégralement le style du document.
• Désactiver les styles par défaut du navigateur : permet de désactiver les styles par défaut que le navigateur utilise (comme par exemple les marges par défaut).
• Afficher les CSS par type de média : vous permet d'afficher le document en fonction du type de CSS (impression, écran, vidéo projecteur) sur votre écran classique.
• Edit CSS : cette option va afficher une fenêtre vous permettant d'éditer en temps réel la feuille de style de la page consultée. Vous allez ainsi pouvoir constater directement les changements au niveau de l'apparence du site sans toucher aux fichiers :
  
• Utiliser le mode "border-box" : permet d'utiliser le model-box d'internet Explorer
• Voir les CSS : affiche une page pour afficher le code sources des feuilles de styles CSS composant le document.

Le troisième menu accessible via la barre d'outils est le menu Form qui vous permet d'agir sur les éventuels formulaires présents. Voici les options disponibles pour ce menu :

• Décocher les boutons radio : décoche tous les boutons radios cochés.
• Convertir GET en POST : permet de transformer les formulaires transmettant leurs donnés dans l'URL en formulaires transmettant leurs données dans les en-têtes HTTP.
• Convertir POST en GET : inverse de l'option "convertir get en post".
• Afficher les détails du formulaire : permet d'afficher à c&orcirc;té des champs de formulaire et du formulaire lui-même leurs informations : nom, id, taille...
• Autoriser l'auto complétion : Permet au navigateur de compléter les formulaires automatiquement.
• Rendre inscriptibles les champs de formulaire : Permet de remplir un champ de formulaire même lorsque celui-ci est en lecture seule.
• Remplir les champs de formulaire : Remplit les champs de formulaire avec leur nom ou leur valeur par défaut.
• Supprimer des longueurs maximales : Permet d'entrer un texte d'une longueur maximale infinie, même si une limite était préalablement définie.
• Montrer les mots de passe : remplace les points ou étoiles par le mot de passe en clair.
• Informations sur les formulaires : Affiche dans une page séparée diverses informations concernant les formulaires pr&eaucte;sents sur la page.

Nous passons ensuite au quatrième menu qui concerne les images :

• Afficher les dimensions des images : affiche dans de petits cadres les dimensions des images (sauf les images d'arrière-plan).
• Afficher le poids des images : affiche dans de petits cadres le poids (en octets, Ko ou Mo) des images de la page (sauf les images d'arrière-plan).
• Afficher les URL des images : affiche le chemin absolu ou relatif des images présentes sur la page.
• Trouver les images inaccessibles : affiche l'url des images n'ayant pu s'afficher correctement.
• Cacher les images d'arrière-plan : masque seulement les images d'arrière-plan.
• Ne pas afficher les images : masque toutes les images.
• Entourer les images avec les dimensions présicées : vous permet de voir quelles images ont leur dimensions de renseignées dans le code source.
• Entourer les images avec un attribut alt vide : Entoure les images ayant un texte alternatif vide.
• Entourer les images sans attribut alt : Entoure les images n'ayant pas d'attribut alt (le site n'est donc pas valide XHTML strict).
• Entourer les images sans dimension : Entoure les images dont les dimensions sont précisées dans le code source.
• Entourer les images sans attribut title : Entoure les images n'ayant pas de texte s'affichant en complément (info-bulle).
• Remplacer les images par l'attribut alt : Si les images sont dotées d'un texte alternatif, le texte s'affichera à la place de l'image, dans le cas contraire l'image sera masquée et aucun texte ne viendra la remplacer.
• Informations sur les images : affiche dans une page séparée la hauteur, largeur et la source des différentes images pr&eaucte;sentes sur la page.

Le cinquième menu de la barre d'outils webdeveloper vous permet d'obtenir plus d'informations sur la page concern&eacut;e :

• Afficher les accesskey : vous permet d'afficher la touche qu'il faut presser en plus d'une combinaison de touches pour placer le curseur dans la zone de formulaire adéquate.
• Afficher les ancres : affiche les différents éléments disposant d'un id ou encore les ancres (liens permettant de se rendre à un endroit précis sur une page donnée).
• Afficher la taille des blocs : Vous permet d'afficher dans de petits cadres la taille des différentes boîtes composant la page.
• Afficher le détail des ID et Class : Vous permet d'afficher les valeurs des attributs ID et Class des boîtes en possédant.
• Afficher les liens : Affiche les url des liens.
• Afficher les index de tabulation : Affiche la valeur des attributs tabindex.
• Afficher les informations topographiques : Fait apparaître le relief entre le contenu de la page et le reste.
• Afficher les informations sur les cookies : Affiche le nom, la valeur et d'autres informations (date d'expiration, etc...) sur les éventuels cookies utilisés.
• Voir le javascript : Affiche dans une page séparée le code javascript de la page.
• Voir les liens : affiche l'url des différents liens de la page.
• Informations sur la page : Affiche le menu de firefox visible en faisant un clic droit sur la page et en cliquant sur propriétés.
• En-têtes HTTP : affiche les en-têtes HTTP reçus par le navigateur.

Le sixième menu est plutôt explicite, je ne vais détailler que les quelques options pouvant être ambigües :

• Nettoyer l'authentification HTTP : il arrive que le site que vous consultez vous ait demandé un mot de passe via une fenêtre dédiée à cet effet. Cette option vous permet de vider le cache d'authentification, vous serez donc obligé de vous réauthentifier.
• Linéariser la page : affiche les boîtes les unes en dessous des autres.
• Montrer les commentaires : si le webmaster a inséré des commentaires html sur sa page, ils seront affichés.

Le septième menu est très utile pour les webmasters et va permettre d'afficher plusieurs éléments de la page consultée :

• Voir les éléments de type block : Entoure toutes les balises de type block.
• Entourer les éléments dépréciés : Entoure les parties mal développées du site (à refaire).
• Entourer les frames : Entoure les frames contenues dans la page.
• Entourer les liens sans attribut title : Entoure les liens qui n'ont pas d'attribut title. Ceci peut vous aider à voir les liens qui pourraient bénéfichier d'un complément d'information.
• Entourer l'élément sélectionné : Le curseur se transforme en une croix, cliquez sur l'élément de votre choix dans la page, il sera ensuite entouré.
• Entourer les cellules de tableaux : Entoure uniquement les cellules des éventuels tableaux présents sur la page
• Entourer les tableaux : Entoure simplement les limites des tableaux (et non pas les cellules contenues dans les tableaux).
• Entourer un élément personnalisé : Cette option vous permet d'entourer des balises personnalisées. Une fenêtre s'ouvre :
  
  Indiquez le nom d'une balise dans une des cases prévues (exemple: div) et vous pouvez indiquer la couleur de l'encadrement qui sera fait en cliquant sur le rectangle de couleur situé à droite).

Le huitième menu est lui aussi très utile aux webmasters car il va vous permettre de faire valider la page concernée aux différents validateurs présents. Avoir un code valide est plus important qu'il n'y paraît.