Les outils pour développer avec son navigateur

[Quarky]

Hello,

Je voudrais présenter ici un ensemble de softs et d'extensions permettant de bien travailler avec les principaux navigateurs web.

Pour bien commencer, je vais présenter une méthode pour faire cohabiter plusieurs versions d'IE et de Firefox sur une même machine et ceci sans OS vitruel

On verra ensuite les meilleures extensions et plugins de chaque navigateur qui nous permettent de gagner du temps.

La liste n'est pas fermée : n'hésitez pas à participer et à partager vos outils préférés !

Ceux qui le souhaitent peuvent même proposer des mini-tutos pour présenter une fonctionnalité particulière ou l'utilisation globale d'une extension.

Bonne lecture et bons tests

Sommaire

- Plusieurs Firefox et plusieurs IE simultanément

- Les outils pour développer avec Internet Explorer

- Les outils pour développer avec Opera

- Les outils pour développer avec Safari

- Les outils pour développer avec Firefox

- Bonus pour Firefox

- Bonus pour Opera

- Bonus pour Safari

[Quarky]

Plusieurs Firefox et plusieurs IE simultanément

Commençons donc par préparer l'environnement de travail et plus particulièrement installer quelques navigateurs.

Multiple IE (Pour Windows uniquement ... et évidemment )

Site officiel

Ce logiciel va vous permettre d'installer simultanément (et en complément d'IE 7 installé normalement) les versions suivantes d'Internet Explorer :

- IE 3

- IE 4.01

- IE 5.01

- IE 5.5

- IE 6

Une fois ceci effectué, on peut même lancer chaque version du navigateur en même temps

Voici toutefois quelques limitations :

Multiple IE ne fonctionne pas sous Vista

Les versions 5, 5.5 et 6 provoquent parfois des crashs (perso, je n'en ai jamais souffert)

FF 1.5 & FF 2 ensembles

source : simpleentrepeneur

Il s'agit d'une petite manipulation manuelle à effectuer. Voici la procédure :

1 - Récupérer l'ancienne version souhaitée

Rendez sur cette page pour FF 1.5 ou via cette url pour l'ensemble des releases.

2 - Procéder aux installations dans deux répertoires différents (évidemment)

3 - Gestion des profils utilsateurs

Il faut alors créer un second profil utilisateur permettant l'utilisation de la seconde version. Rendez-vous donc de le répertoire de cette seconde version et exécutez la commande suivante :

firefox -CreateProfile firefox2

(où firefox2 sera le nom du second profil)

4 - Gestion des raccourcis

L'avant-dernière étape consiste à spécifier les profils à utiliser au niveau des raccourcis. Pour ce faire, faites un clic droit sur le raccouci et reportez vous aux propriétés. Il faut y modifier le champ "Cible" (ou "Target") en ajoutant en fin de ligne la mention :

-P default

(pour la première version du navigateur qui a été installée)

et :

-P firefox2

(pour la seconde avec le nom du profil tel qu'il a été nommé plus haut)

5 - Modification de variable

La dernière étape vise à modifier le paramètre "MOZ_NO_REMOTE" en lui donnant pour valeur 1. Vous pourrez y accéder via la liste des variables d'environnements (Panneau de configuration).

Et vous voilà désormais avec deux versions du navigateur de Mozilla. Ceux-ci peuvent se lancer simultanément

[Quarky]

Les outils pour développer avec Internet Explorer

Internet Explorer Dev Toolbar

Site officiel

Rassemble une suite d'outils comprenant un inspecteur DOM, la visualisation des id et class, le redimensionnement de la fenêtre selon une résolution, la validation HTML, CSS, WAI, et RSS, affichage d'une règle et bien d'autres fonctionnalités.

IE7Pro

Site officiel

IE7Pro est un add-on pour Internet Explorer (et désormais IE6). Simple à utiliser, il ajoute des fonctionnalités qui lui manquent : filtre anti-pub, historique des derniers sites visités, liste de proxies permettant de passer facilement de l'un à l'autre, visualisation des images/feuilles de style/scripts de la page, ...

DebugBar

Site officiel

Il s'agit d'un plug-in pour Internet Explorer offrant entre autres : DOM et HTTP Inspector, Javascript Inspector et Javascript Console, HTML Validator, ...

Companion.JS

Site officiel

Débuggeur Javascript...

Firebug Lite

Site officiel

Ceci n'est pas une extension mais permet, via l'utilisation d'un appel de ce script JS, d'accéder avec IE aux fonctionnalités de l'extension existante sous Firefox.

Web Accessibility Toolbar

Site officiel

Contient plusieurs outils pour améliorer l'accessibilité : validateur HTML et CSS, modification des couleurs, simulation de handicaps, redimensionnement de fenêtre, ...

Window Resizer

Site officiel

Retaille votre fenêtre selon la résolution demandée (640x480, 800x600, 1024x768, 1280x1024, 1600x1200)

[Quarky]

Les outils pour développer avec Opera

Opera developer tools

Site officiel

Inspecteur DOM, CSS, JS, Headers HTTP et console

Web Developer Toolbar & Menu

Site officiel

Inspecteur DOM, CSS, HTTP Headers, Visualisation des cookies et délais d'expiration, Meta données, conversion GET <-> POST, ...

Web Accessibility Toolbar

Site officiel

Contient plusieurs outils pour améliorer l'accessibilité : validateur HTML et CSS, modification des couleurs, simulation de handicaps, redimensionnement de fenêtre, ...

Firebug Lite

Site officiel

Ceci n'est pas une extension mais permet, via l'utilisation d'un appel de ce script JS, d'accéder avec Opera aux fonctionnalités de l'extension existante sous Firefox.

[Quarky]

Les outils pour développer avec Safari

Attention ces éléments sont généralement issus d'un développement pour MAC OS. Je n'ai pas fait de tests de compatibilité pour Safari @ Windows.

Menu Debug

Un menu caché offre plusieurs fonctionnalités intéressantes. On peut noter une console Javascript, parcours de l'arbre DOM, , ...

Tapez la commande suivante dans un terminal, réouvrez Safari et voilà

defaults write com.apple.Safari IncludeDebugMenu 1

WebDevAdditions

Via PimpMySafari

WebDevAdditions is a SIMBL plugin, which adds options to the Edit menu for web developers. This is something Safari has been needing for some time. Firefox has the excellent �Web Developer Extension�, and hopefully this will grow to match it.

Safari Tidy plugin

Site officiel

Validation des pages web avec compte-rendu (erreurs et warning) en barre de statut. L'extension complète également la fenêtre du code source pour y lister les messages.

Firebug Lite

Site officiel

Ceci n'est pas une extension mais permet, via l'utilisation d'un appel de ce script JS, d'accéder avec Safari aux fonctionnalités de l'extension existante sous Firefox.

[Quarky]

Les outils pour développer avec Firefox

Liste actuelle : 38 extensions !

Les INdispensables

Firebug

Site officiel

Regroupe un grand nombre d'outils très pratiques : débuggeur JS, console d'erreurs JS et CSS, édition directe de CSS, HTML, évaluation du temps de chargements des composants, ...

WebDeveloper

Site officiel - Traduction en [Fr]

WebDeveloper est une barre d'outils offrant un grand nombre de fonctionnalités.

XML Developper Toolbar

Site officiel

Le but de cette extension est d'aider les développeurs utilisant XML en regroupant en une barre d'outils tout ce qui concerne XML

ColorZilla

Site officiel

Permet de récupérer le code hexadecimale et RGB (...) de n'importe quelle couleur présent sur une page.

Propose aussi un historique des couleurs récupérées, la gestion de favoris, une loupe. On notera encore la possiblité de mesurer la distance entre deux points

MesureIt

Site officiel

Mesurez (en pixel) ce que vous voulez sur vos pages.

Clear Cache Button

Site officiel

Vider le cache en un clic.

Window Resizer

Site officiel - Fonctionnalité présente dans l'extension WebDevelopper

Retaille votre fenêtre selon la résolution demandée (640x480, 800x600, 1024x768, 1280x1024, 1600x1200)

Mouse Gestures

Site officiel

Exécuter des commandes à la souris (nouvel onglet, fenêtre, fermer, back, ...).

asdf-jkl

Site officiel

Affiche les racourcis clavier au survol des composants de Firefox et dans un nouvel item du menu Affichage.

Visualisation

IE View (Windows uniquement)

Site officiel

Permet de visualiser une page en ouvrant Internet Explorer

IE Tab

Site officiel

Permet d'ouvrir une page avec Internet Explorer dans un onglet de Firefox.

OperaView

Site officiel

Permet de visualiser une page en ouvrant Opera

SafariView (pour Mac OS uniquement)

Via mozilla.org

Permet de visualiser une page en ouvrant Safari

Launchy

Site officiel

Ouvrir une page web, une image, un code source, (...) avec une autre application (ex : IE, Notepad, UltraEdit, BSPlayer, WMP, ...). A ce jour, 63 applications sont compatibles et automatiquement détectées.

Validateurs

HTML Validator

Site officiel

Ajoute la validation du code en se basant sur les 2 algos du W3C (Tidy et OpenSP). Vous disposez des avertissements et erreurs (+ messages d'aide) via la fenêtre de code source.

Une fonction de "nettoyage" de la page est aussi disponible avec comparaison du code original et de la version corrigée.

Checky

Site officiel

Analyse et validation de X/HTML, CSS, XML, RSS, Accessibilité ...

XPather

Site officiel

Générateur, éditeur et inspecteur d'expressions XPath

XPath Checker

Via mozilla.org

Editeur intéractif d'expressions XPath

Accessibilité

Accessibar

Site officiel

Barre d'outils regroupant différents paramètres d'affichages modifiables (couleurs, taille de police, ...). Intègre aussi un transcripteur vocal qui "lit" le contenu et d'autres outils améliorant l'accessibilité.

OcawaToolbar

Site officiel

Permet de visualiser sur votre page et au fur et à mesure de la navigation les éléments de la page qui ne respectent pas les référentiels de Qualité / Accessibilité.

Firevox

Site officiel

Firevox une synthèse vocale à suivre de près !

Synthèse vocale avec des fonctionnalités supérieures à celles des logiciels de synthèse vocale classiques.

Firefox Accessibility Extension

Site officiel

Fangs

Site officiel

Produit une représentation textuelle d'une page web similaire à la transcription faite par un lecteur d'écran

TAW3 with a click

Site officiel

Evaluer l'accessibilité du site visité en un clic. L'extension utilise le service du site TAW3 qui se base sur le WCAG 1.0 (Web Content Accessibility Guidelines 1.0)

Autres

CSS Viewer

Via mozilla.org

Affiche une fenêtre avec pour contenu la liste des propriétés CSS de l'élément survolé.

Aadvark

Site officiel

Visualiser les éléments d'une page et leur id

YSlow (pour Firebug)

Site officiel

Analyser les temps de chargement

FirePHP (pour Firebug)

Site officiel

FirePHP vous donne une vue plus détaillée du fonctionnement de votre code PHP lorsque ce dernier génère la page courante, depuis le navigateur FireFox

Poster

Via Google Code

Intéragir avec les services web

UrlParams

Site officiel

Visualiser les paramètres passés en GET et en POST

Load Time Analyzer

Via mozilla.org

Mesure et estimation du temps de chargement d'une page

Add & Edit Cookies

Site officiel - Fonctionnalités présentes dans l'extension WebDevelopper

Ajouter et modifier des cookies

View Dependencies

Site officiel

Relève l'ensemble des fichiers chargés (images, scripts, ...) pour afficher la page courante. L'extension nous donne ausi le poids de chaque fichier.

Screengrab

Site officiel

Capture (image) de la zone visible d'une page web, d'une sélection ou de la totalité de la pge visitée.

Lorem Ipsum Content Generator

Site officiel

Générateur de "Lorem ipsum" (faux-texte) avec paramétrage du contenu quantité et nature (paragraphes, mots, ...)

ASCII to Unicode

Via mozilla.org

Convertisseur ASCII - Unicode accessible par clic droit.

KGen

Site officiel

KGen est un générateur de mots-clés qui permet d'analyser les mots contenus dans une page et de déterminer ceux qui, pour les moteurs de recherche, auront le plus d'importance.

Dummy Lipsum

Site officiel

Générateur de "Lorem ipsum" (faux-texte) avec paramétrage du contenu quantité et nature (paragraphes, mots, ...)

[Quarky]

Bonus pour Firefox

Pour accéder aux documentations très rapidement, vous pouvez vous enregistrer de nouveaux marque-pages comme dans l'exemple suivant :

Titre : Doc PHP
Url : http://php.net/%s
Mot-clé : php

Ainsi il vous suffira de taper « php echo » dans la barre d'url et vous atteindrez aussitôt la documentation de cette fonction (via http://www.php.net/echo) C'est donc plus rapide qu'utiliser la barre de recherche (ctrl+k, alt + flèches pour choisir le moteur, puis taper et enfin valider).

C'est tout bête : le fameux « %s » est remplacé par l'expression à rechercher. Et cette astuce peut être utilisée bien sûr pour d'autres doc, il faut simplement trouver un site avec une url bien structurée. En voici quelques unes, je ne garantie pas un résultat aussi efficace qu'avec la réécriture d'url de php.net (le mieux est de vous rendre sur chaque doc et de regarder les expressions possibles) :

Pour utiliser ce type de bookmark, faites comme suit : Menu "Marque-Pages" -> "Organiser les marque-pages" et "Nouveau ..."

Vous pourrez alors avoir accès au champ mot-clef

- Cake [Angl] http://api.cakephp.org/class_%s.html

- php.MVC [Angl] (php.MVC source library) http://www.phpmvc.net/docs/api/phpmvc-beta/phpmvc/%s.html

- php.MVC [Angl] (php.MVC XML configuration Digester source library) http://www.phpmvc.net/docs/api/phpmvc-beta/digester/%s.html

- PHP On Trax [Angl] http://api.phpontrax.com/PHPonTrax/%s.html

- CSS [Fr] http://wiki.mediabox.fr/documentation/css/%s

- CSS [Angl] http://www.stylegala.com/features/css-reference/%s.htm

- XHTML [Fr] http://giminik.developpez.com/xhtml/%s.html

- XHTML [Angl] http://www.htmldog.com/reference/htmltags/%s

- XHTML [Angl] http://www.devguru.com/Technologies/xhtml/...f/xhtml_%s.html

- XHTML [Angl] http://www.htmldog.com/reference/htmltags/%s

- XHTML [Angl] http://htmlplayground.com/#tag_%s

- HTML 4.01 & XHTML [Angl] http://www.webreference.com/html/reference...6;./%s.html

- Prototype [Angl] http://prototypejs.org/api/%s

- Artichow http://www.artichow.org/doc/%s

- FPDF http://www.fpdf.org/fr/doc/%s.htm

- Doxygen (commandes) http://www.stack.nl/~dimitri/doxygen/commands.html#cmd%

- Google http://www.google.fr/search?q=%s

- Wikipedia [Fr] http://fr.wikipedia.org/wiki/%s

- Wikipedia [Angl] http://en.wikipedia.org/wiki/%s

...

[Quarky]

Bonus pour Opera

Pour avoir le même type de raccourcis que présenté dans le post précédent mais cette fois dans Opera, voilà la manipulation à suivre.

à typhoon006 pour le détail

Il faut aller dans Outils->Préférences->Recherche

On trouve déjà tout un tas de raccourci prédéfinis donc au choix on fait éditer ou ajouter

A partir de là on a ça :

Donc on choisi le nom (y'avait un & sur les prédéfinis donc je l'ai mis aussi mais apparemment c'est pas obligatoire)

On choisi son mot clé ( y pour youtube ici , j'ai par exemple aussi "gi" pour google image, donc plusieurs cartactères possible)

Et c'est dans le champ "Adresse" qu'on rempli la requête

En fait pour le site donné, on y va normalement (www.youtube.com) et on y fait une recherche (peu importe laquelle tant qu'elle donne un résultat) on l'a copie et on la colle dans le champ "Adresse", une fois fait on reèére où se trouve le mot qu'on avait précédemment recherché et on le remplace par " %s" et voilà on fait OK et c'est fini :)

Après il suffit de taper dans la barre d'adresse "y [recherche]" et ça cherchera le mot sur youtube.

[Quarky]

Bonus pour Safari

On continue avec ces raccourcis pratiques et personnalisables.

Pour ce qui est de Safari, il suffira d'utiliser le plugin keywurl qui est gratuit.

[Charles.w]

Tu pourrais aussi parler du dev de addons pour Firefox, en utilisant XUL, non ?

[Quarky]

Le sujet initial étant déjà assez conséquent, je préfère m'y tenir

De plus la production d'extensions ne se présente pas en un post. Il me semblerait plus judicieux de faire un autre topic pour avoir une présentation plus claire des deux thèmes.

Mon idée est vraiment de focaliser ce topic sur les meilleurs outils dispo sur les différents navigateurs.

[Charles.w]

Vi, pas de problèmes

[Quarky]

[Space]

Très bonne idée Quarky.

[Yangzebul]

Il manque "Inspect This" en alliance avec "Dom Inspector" (en option dans l'install de ffx) qui même si il est plus limité que firebug, est largement meilleur pour tout ce qui est CSS.

Sinon très bon topic je ne connaissais pas Companion.JS, je vais l'installer de ce pas !

[Quarky]

Après que l'on m'ait fait remarqué, et à juste titre ( windu ), que l'ajout des marque-pages en Bonus n'était pas des plus explicites, j'ai détaillé la manip.

[Quarky]

Et hop : ajout de quelques outils pour Safari

Pour ceux utilisant Safari, participez pour enrichir la liste qui lui est dédiée

[Quarky]

Ajout de Firebug Lite qui permet d'utiliser les fonctionnalités de l'extension Firefox sur les autres navigateurs

[Quarky]

Ajout en Bonus du raccourci vers les commandes de Doxygen (outil de documentatiion de code)

[mac97000]

Bonjour,

soit je n'ai pas bien vu soit on pourrait ajouter "timestamp" et FireFTP pour les adeptes du 100% FF

[Quarky]

Ajout d'un bonus pour Opera permettant d'avoir des raccourcis pratiques comme ceux présentés pour Firefox.

Vous pouvez remercier typhoon006

[Yangzebul]

Ajout d'un bonus pour Opera permettant d'avoir des raccourcis pratiques comme ceux présentés pour Firefox.

Vous pouvez remercier typhoon006

Heu juste pour info, l'astuce posté marche, mais elle est inutilement compliqué.

En réalité il suffit de faire clic droit sur le champ à mémoriser > "ajouter une recherche"

Ce qui est beaucoup plus simple que l'astuce indiqué ou la manipulation équivalente sur firefox (micro-troll gratuit).

[Quarky]

Ajout d'un bonus pour Safari : pour gérer des raccourcis à utiliser en barre d'url (explications ici). Pour ce navigateur, on utilisera le plugin keywurl.

[Quarky]

Un "firebug-like" a été publié pour Opera : Dragonfly (version alpha pour le moment)

Cet outil rassemble : débuggueur javascript, inspecteur DOM/CSS, console d'erreur, proxy, ...

Une documentation et un blog (tout deux en anglais) ont été aussi mis en place à cette occasion.

[Quarky]

J'ai découvert une petite extension pour Firefox (compatible v3) qui permet d'ouvrir le source des pages dans un nouvel onglet plutôt qu'une autre fenêtre. Mais on peut aussi définir un programme externe

Source Viewer Tab