Web Developer

Site officiel
Bookmark and Share

L’installation de l’extension Web Developer est identique aux autres extensions de Firefox. L’interface est francisée (choisir « Localized Version » sur la page « Download » du site de l’auteur, si la fenêtre d’installation de l’extension n’apparaît pas, vérifier que Firefox autorise l’ouverture du popup pour le site considéré). Redémarrez votre navigateur préféré, clic droit dans la barre des menus puis choisissez "Barre d’outils Web Developer". Une nouvelle barre d’outils apparaît.

Cette extension pourrait être définie comme "le couteau suisse pour webmestres". L’utilisation la plus "spectaculaire" est sans doute celle qui concerne les CSS, voir plus bas. Mais les autres possibilités ne sont pas à négliger.

Petite revue des menus :

Dans le premier menu, Désactiver, vous pourrez par exemple

  • Désactiver le Javascript, utile en terme de test d’accessibilité, en effet le Javascript dans vos pages peut masquer certaines informations.
  • Pourquoi ne pas repartir de zéro et "désactiver les couleurs de la page", vous pourrez même désactiver tous les styles Css de la page (et ce de façon précise : ceux inclus dans la page, ceux liés à une feuille externe)
  • Depuis que vous utilisez Firefox, les popups vous manquent ? et bien choisissez "désactiver le bloqueur de popups pour les voir réapparaître.
  • ...

Passons le menu CSS (plus bas) pour s’attarder au menu Form. qui vous permettra de tester les formulaires des pages web :

  • tester les variables envoyées en Get ou en Post
  • voir les informations liées aux formaulaires : adresse du script utilisé, ID, voir les mots de passe que vous entrez
  • ...

Le menu images

  • vous donnera des informations visuelles : taille, affiche/masquer...
  • vous permettra par exemple de repérer les images qui n’ont pas d’attribut "alt" (accessibilité), qui n’ont pas de taille spécifiée, de repérer les Url des images.

Les menus Informations et Divers sont des petits fourre-tout où l’on trouvera des choses bien utiles comme :

  • l’affichage des AccesKeys
  • l’affichage de la taille des blocs
  • Vous pourrez repérer facilement les "ID" et les "Class"
  • Lire les informations sur les cookies ou les effacer
  • Vider le cache
  • Afficher les commentaires du code Html
  • ...

Le menu "Entourer" permet de repérer la "super-structure" de la page en mettant en évidence les blocs, frames, cellules de tableaux... on peut personnaliser les couleurs d’affichage des blocs en fonction des éléments "div" de la page.

Vous pourrez rapidement redimensionner vos pages dans autant de résolutions que vous souhaitez (il suffit d’en rajouter)

Le menu validation permet de renvoyer vers les "validateurs" connus ( Html, css, accessibilité ). Cette liste est personnalisable [1], et vous seriez bien inspiré d’y rajouter ce validateur Html moins "froid" que celui du W3C et francophone de surcroît. A noter que vous pourrez même tester une page produite en local.

Web Developer est assez intuitif à l’utilisation et se prend donc rapidement en main. Par ailleurs cette extension permet de configurer de nombreux raccourcis-clavier ainsi que de personnaliser les couleurs d’affichage des informations.

Difficile de s’en passer une fois que l’on y a goûté !

Exemple d’utilisation : Le CSS

Attention : si vous utilisez, ou souhaitez utiliser les CSS (Cascading Style Sheet) vous risquez de devenir accroc à Web Developer...

Une feuille de style est un fichier dont l’extension est .css. Il peut être associé à une page Web pour définir son style (couleur de fond, taille des caractères, caractéristique des blocs...) séparant ainsi contenus et mise en forme.

Exemple de l’intégration de la feuille de style framastyle.css sur la page d’accueil du site de Framasoft. Voici le code, placé entre les balises <head> et </head> :

<link href="css/framastyle.css" rel="stylesheet" type="text/css">

On voit ici que la feuille de style est placée dans le répertoire « css ».

Je ne m’étendrai pas sur l’intérêt d’utiliser des feuilles de style pour concevoir des pages Web (rapidité, accessibilité, respect des standards...).

Avant, les CSS, c’était souvent la galère... il fallait éditer le fichier CSS, rentrer des valeurs (sans voir le résultat), enregistrer, revenir au navigateur pour rafraîchir la page Web associé au style... et recommencer tout ça jusqu’à l’obtention du résultat voulu.

Web Developper va vous permettre maintenant d’éditer vos feuilles de styles en affichant directement le résultat.

Tenez, petit exemple basique :

  1. Vous avez une page Web (en local) : ouvrez-là avec Firefox.
  2. Vous avez une feuille de style vide (créer un fichier texte, et changer l’extension .txt en .css).
  3. Cliquez sur l’icône CSS puis « ajouter une feuille de style personnalisée » et ouvrez votre fichier CSS vide précédemment créé. Puis faites, toujours dans le menu CSS, « Edit CSS ». Une SideBar s’ouvre et vous permet d’essayer vos propres paramètres CSS avec affichage du résultat immédiat.

Essayez par exemple l’instruction suivante qui met le fond de la page web en rouge :

body
{
background-color : red ;
}

Là où cela devient intéressant et pédagogique, c’est que Web Developer va vous permettre d’éditer, de modifier, n’importe quelle CSS de n’importe quelle page Web. Cliquez sur « CSS / voir les styles d’un élément particulier » pour que l’information CSS d’un élément particulier s’affiche dans la barre d’état du navigateur. Pour éditer la feuille Css : cliquez simplement sur « CSS / Edit CSS » et essayez de modifier quelques paramètres. Vous pourrez bien sûr enregistrer votre Css modifiée en local puis la transférer sur votre site...

J’ai beaucoup appris comme cela sur les CSS.

[1] en passant par le menu Options

Tags: mozilla firefox gecko extension greffon plugin html css javascript js programmation développement
Ajouter des tags (séparés par des virgules ou des espaces) :
 
Attention: tous les caractères spéciaux sont interdits (sauf le .). Les tags n'apparaîtront qu'au prochain rafraichissement du cache (dans plusieurs heures).

<< Mettre à jour >>
:: lien mort :: orthographe :: nouveauté :: mise à jour ::

Vous souhaitez mettre à jour la notice ? La première chose à faire est de déterminer s'il s'agit d'une mise à jour mineure ou d'une mise à jour majeure Icone d'aide.

  • Mineure : un lien mort, des fautes d'orthographe, un lien à ajouter ou encore une petite précision.

    Veuillez renseigner les champs ci dessous :

  • Majeure : une nouvelle version avec des nouveautés, des changements majeurs.

    En cochant cette case, vous allez créer une page sur le wiki afin de mettre à jour la notice.

Commentaires

<< Poster un message >>
:: question :: précision :: avis :: commentaire :: bug ::

Web Developer 1.0.2 , le 14 mars 2006 par Gab (0 rép.)

Salut a tous,

Attention, depuis la version 1.0.2, le bouton de désactivation n’apparait plus dans la barre, ce qui peut etre génant... Cependant, la version apporte une nette amelioration de ce coté-là. En effet, en personnalisant la barre de boutons de Firefox, vous trouverez le bouton Webdeveloper qui permet de masquer completement cette barre d’outils. Grandiose ! ;) Bon web design à tous !

-----> gab-design

Répondre à ce message

> Web Developer , le 20 septembre 2005 par zitoune (0 rép.)

La mise à jour de Web Developer en 0.9.4 a provoqué chez moi (boulot et maison) un gros bug. Après la mise à jour et le relancement de Firefox (1.0.6) j’accède à une page blanche avec toutes les fonctionnalités de Firefox bloquées. Pensez donc à bien sauvegarder vos profils Firefox avant de lancer cette manip.

Répondre à ce message

La liste des fonctionnalités de Web Developer , le 15 mai 2005 par Isa (0 rép.)

En espérant que ma pseudo liste à puces ne sera pas trop défigurée... Voici la liste des fonctionnalités de Web Developer, une extension brillante !

# Désactiver :

* désactiver le cache * désactiver le javascript * désactiver les cookies * désactiver les images animées * désactiver les images * désactiver Java * désactiver les couleurs de la page * désactiver le bloqueur de pop up * désactiver le referrer * désactiver les styles CSS

# CSS

* voir les CSS * éditer la CSS en WYSIWYG * ajouter une feuille de style personnalisée * afficher les CSS par type de média * utiliser le mode "Border-box"

# Images

* afficher les dimensions des images * afficher le poids des images * afficher les URL des images * trouver les images inacessibles * cacher les images d’arrière-plan * ne pas afficher les images * rendre les images invisibles * entourer les images avec les dimensions précisées * entourer les images avec un attribut alt vide * entourer les images sans attribut alt * entourer les images sans dimensions * entourer les images sans attribut title * remplacer les images par l’attribut alt * informations sur les images

# Information

* afficher les accesskeys * afficher les ancres * afficher la taille des blocs * afficher les détails sur ID et class * afficher les liens * afficher les index de tabulation * afficher les informations topographiques * informations sur les cookies * voir le javascript * voir les liens * informations sur la page * en-têtes HTTP

# Divers

* vider le cache * vider l’historique * nettoyer l’authentification HTTP * effacer les cookies de session de ce site * effacer les cookies de ce domaine * linéariser la page * ouvrir la console Java * ouvrir la console Javascript * montrer les commentaires * marquer tous les liens comme visités * marquer tous les liens comme non visités * zoom * documentation W3C o HTML 4.01 o XHTML 1.0 o XHTML 1.1 o CSS 1 o CSS 2.1 o DOM 1 o DOM 2 o WAI

# Entourer

* entourer les éléments de type block * entourer les éléments dépréciés * entourer les frames * entourer les liens sans attribut title * entourer l’élément sélectionné * entourer les cellules d’un tableau * entourer les tableaux * entourer un élément personnalisé

# Redimensionner

* afficher la taille actuelle * afficher la taille actuelle dans la barre de titre * 800x600 * 1024x768 * taille personnalisée

# Validation

* valider CSS * valider fil RSS * valider HTML * valider liens * valider Section 508 * valider WAI * voir rapport de vitesse * valider les CSS locales * valider le HTML local

# Voir source # Options

* recharger la page * options * à propos

Répondre à ce message

> Web Developer , le 8 mai 2005 par hicksman (0 rép.)

a utiliser en duo avec l’excellente extension "html validator". les développeur de site vont adorer aussi. Avec ces deux extensions vos pages web seront des plus parfaites.

Répondre à ce message

> Web Developer , le 6 mai 2005 (1 rép.)

Il semble que les extensions aient été retirées du site Tous les liens pointent dans le vide

> Web Developer , le 7 mai 2005 par SlumSlaYer

Je viens de l’installer sans problème

Essayez avec ce site http://joliclic.free.fr/mozilla/webdeveloper/ (Web Developer en français)

En tout cas, cette extension est bien pratique. Je me demande comment j’ai pû m’en passer !

-----> Extensions pour Firefox

Répondre à ce message

> Web Developer , le 6 mai 2005 par fun sun (0 rép.)

Bonjour,

Je confirme. Impossible de s’en passer une fois qu’on y a goûté ! Sans oublier la validation en ligne des pages si on respecte les standards...

La création et l’archivage web deviennent redoutables avec le libre : firefox + web developper + scrapbook.

nvu pour la création web et quelques extensions supplémentaires.

Il ne manque plus qu’un bon outil graphique pour le développement des scripts php et javascript. Je ne sais pas si c’est possible de le faire mais je crois qu’il ne manque guère plus que cela.

Répondre à ce message

Informations complémentaires

Faire un don ? (défiscalisé)

Aidez-nous à atteindre notre objectif de 1080 donateurs récurrents pour assurer notre pérennité et notre développement !

Je soutiens Framasoft
pour 10€/mois

Dégooglisons Internet, l’an 2

Les services en ligne de géants tentaculaires comme Google, Apple, Facebook, Amazon ou Microsoft (GAFAM) mettent en danger nos vies numériques.

Pour cette 2e année, nous continuons le défi de vous proposer une alternative Libre, Éthique, Décentralisée et Solidaire à chacun de ces services.

Découvrez notre campagne
« Dégooglisons Internet »

Autres rubriques

Informations générales

Juste une image

One Woman Show One Woman Show
Creative Commons BY