Posté(e) le 17 août 200717 a 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
Posté(e) le 17 août 200717 a Auteur 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
Posté(e) le 17 août 200717 a Auteur 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)
Posté(e) le 17 août 200717 a Auteur 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.
Posté(e) le 17 août 200717 a Auteur 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.
Posté(e) le 17 août 200717 a Auteur 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, ...)
Posté(e) le 17 août 200717 a Auteur 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 ...
Posté(e) le 17 août 200717 a Auteur 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->RechercheOn 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.
Posté(e) le 17 août 200717 a Auteur 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.
Posté(e) le 6 septembre 200717 a Tu pourrais aussi parler du dev de addons pour Firefox, en utilisant XUL, non ?
Posté(e) le 6 septembre 200717 a Auteur 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.
Posté(e) le 28 septembre 200717 a 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 !
Posté(e) le 16 octobre 200717 a Auteur 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.
Posté(e) le 16 octobre 200717 a Auteur Et hop : ajout de quelques outils pour Safari Pour ceux utilisant Safari, participez pour enrichir la liste qui lui est dédiée
Posté(e) le 22 octobre 200717 a Auteur Ajout de Firebug Lite qui permet d'utiliser les fonctionnalités de l'extension Firefox sur les autres navigateurs
Posté(e) le 10 novembre 200717 a Auteur Ajout en Bonus du raccourci vers les commandes de Doxygen (outil de documentatiion de code)
Posté(e) le 23 novembre 200717 a Bonjour, soit je n'ai pas bien vu soit on pourrait ajouter "timestamp" et FireFTP pour les adeptes du 100% FF
Posté(e) le 3 janvier 200817 a Auteur Ajout d'un bonus pour Opera permettant d'avoir des raccourcis pratiques comme ceux présentés pour Firefox. Vous pouvez remercier typhoon006
Posté(e) le 8 février 200817 a 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).
Posté(e) le 25 février 200817 a Auteur 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.
Posté(e) le 7 mai 200817 a Auteur 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.
Posté(e) le 28 juin 200817 a Auteur 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
Rejoindre la conversation
Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.