Jump to content

Les outils pour développer avec son navigateur


 Share

Recommended Posts

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 :francais:

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. :transpi:

Bonne lecture et bons tests :D

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

Link to comment
Share on other sites

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 :francais:

Voici toutefois quelques limitations :

:D Multiple IE ne fonctionne pas sous Vista

:best: 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 :

arrow_orange.png1 - 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.

arrow_orange.png2 - Procéder aux installations dans deux répertoires différents (évidemment)

arrow_orange.png3 - 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)

arrow_orange.png4 - 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)

arrow_orange.png5 - 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).

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

Link to comment
Share on other sites

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)
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

Les outils pour développer avec Safari

:DAttention 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à :D

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.
Link to comment
Share on other sites

Les outils pour développer avec Firefox

Liste actuelle : 38 extensions ! :yes:

:DLes 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.

:DVisualisation

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.

:arrow: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

:arrow: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)

:arrow: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, ...)
Link to comment
Share on other sites

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) :D 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 :yes:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

...

Link to comment
Share on other sites

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.

:D à typhoon006 pour le détail :arrow::D

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 :

hbrflq7x.jpg

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.

Link to comment
Share on other sites

  • 3 weeks later...

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

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.

Link to comment
Share on other sites

  • 3 weeks later...
  • 3 weeks later...
  • 3 weeks later...
  • 2 weeks later...
  • 1 month later...
  • 1 month later...
Ajout d'un bonus pour Opera permettant d'avoir des raccourcis pratiques comme ceux présentés pour Firefox.

Vous pouvez remercier typhoon006 :D

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).

Link to comment
Share on other sites

  • 3 weeks later...
  • 2 months later...
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...