Mot-clef « Firefox »

OpenTabs

Une petite extension développée par l'un de mes collègues et qui ne fait qu'une seule chose mais le fait bien : elle ajoute un bouton permettant de modifier d'un seul clic l'ouverture des onglets en passant d'une ouverture en arrière-plan à une ouverture en avant-plan, et vice versa. C'est pas grand chose mais dans certains cas c'est bien pratique ^^

Regular Expressions Tester

Cette extension clairement réservée aux développeurs permet d'écrire une expression rationnelle et de tester en temps réel son application sur une chaine. C'est carrément pratique, en particulier quand on doit débuguer une expression écrite par quelqu'un d'autre et qui, forcément, est totalement incompréhensible \o/

Dragdropupload

Encore une petite extension qui n'a l'air de rien comme ça mais que je trouve bien pratique ! Elle permet de renseigner un champ de formulaire de type fichier directement en "droppant" le fichier dedans plutôt qu'en étant obligé de saisir sont chemin d'accès ou de le rechercher dans l'arborescence (alors que dans certains cas on a déjà fait cette recherche préalablement dans l'explorateur windows).

Packed VS minified

Il existe deux méthodes couramment utilisée pour alléger les javascripts :

• En les "compactant" : le code est alors ré-écrit en une version nettement plus compacte et surtout nettement moins lisible.
• En utilisant jSmin : là le script est juste allégé de tous ses commentaires et espaces superflus. Il est moins compact mais reste cependant relativement lisible.

En général la version "compactée" est environ un tiers moins lourde que la version "minifiée" mais en contrepartie, l'exécution est presque deux fois plus lente. Et donc le ressenti côté utilisateur est nettement dégradé dans la version compactée. La version minifiée est donc en général préférable, d'autant que pour le debug c'est nettement plus pratique !

La fonction parseInt

Cette fonction permet, comme son nom l'indique, de convertir une chaine en entier. A priori rien de bien compliqué. Son deuxième paramètre permet de spécifier la base dans laquelle on se place. Rien de compliqué non plus.

Là où ça peut un peu plus surprendre si on lit la doc trop rapidement, c'est qu'en l'absence du deuxième paramètre, si la chaine commence par un zéro, la conversion se fait en octale, soit en base huit et non dix. Cette fonctionnalité semble être dépréciée mais elle est toujours prise en compte.

On a donc les résultats suivants :

• parseInt("000") -> 0
• parseInt("001") -> 1
• parseInt("002") -> 2
• parseInt("003") -> 3
• parseInt("004") -> 4
• parseInt("005") -> 5
• parseInt("006") -> 6
• parseInt("007") -> 7
• parseInt("008") -> 0
• parseInt("009") -> 0
• parseInt("010") -> 8
• parseInt("011") -> 9
• ...

La console d'erreur de Firefox

Dans un contexte d'extension (ou au moins dans un contexte signé il me semble), il est possible d'écrire des messages dans la console d'erreur de Firefox via JavaScript.

Par contre (du moins dans certaines versions), tenter de loguer un message vide fait planter la console. Elle continue à accumuler les message mais il faut la fermer et la rouvrir pour les voir. Chose très agaçante quand on ne sait pas d'où ça vient...

Encore quelques extensions sympathiques

Foxmarks Bookmark Synchronizer

Cette extension permet de synchroniser automatiquement ses marque-pages entre plusieurs Firefox... très pratique quand on utilise plusieurs machines. D'autant qu'on peut gérer plusieurs profils pour n'avoir, par exemple, certains marque-pages qu'au boulot et d'autres que chez soi. Enfin le site où ils sont stockés permet également de les consulter en ligne si l'on est sur la machine de quelqu'un d'autre.

Abduction!

Celle-ci permet de réaliser des captures des pages affichées par Firefox. L'avantage sur un logiciel de capture externe est que toute la page est directement capturée (et pas seulement la partie que l'on voit à l'écran) et uniquement la page (pas les barres d'outils de Firefox ou les autres fenêtres ouvertes). Enfin on peut également ne capturer qu'une partie de la page en la sélectionnant dans la prévisualisation.

PDF Download

Dans le même ordre d'idée, cette extension permet de générer un PDF à partir d'une page (en conservant le liens). Le seul problème c'est qu'en fait ce n'est pas directement l'extension mais un site externe qui réalise la conversion... du coup si c'est une page en accès restreint, c'est mort et idem si la page comporte des infos relatives à une connexion (genre un panier sur un site marchand par exemple) et en plus il faut télécharger le PDF généré qui peut s'avérer imposant selon la page. Mais bon, ça peut éventuellement servir tout de même à l'occasion...

Quand on a travaillé un peu sur des sites ou applications utilisant des JavaScript volumineux, on se rend compte assez vite que c'est laborieux. Les erreurs sont mal remontées, on n'a pas de stack trace, etc. Firefox est déjà largement au dessus d'Internet Explorer à ce niveau en fournissant une console d'erreur nettement plus lisible et fonctionnelle mais ça reste insuffisant sur des scripts complexes et fortement découpés en de nombreuses fonctions élémentaires.

Une solution au problème : JavaScript Debugger, une extension pour Firefox qui, comme son nom l'indique, implémente un débuggeur JavaScript.

Comme sur les débuggeurs disponibles pour les autres langages, on peut donc placer des point d'arrêt (breakpoint) permettant une exécution pas à pas du script, avec à chaque étape la possibilité d'inspecter toutes les variables définies et leurs valeurs. Ça ne résout pas tout mais ça aide grandement à comprendre ce qui arrive !

Malheureusement, cette extension est encore loin d'être parfaite : elle est assez lourde et ne se ferme pas toujours vraiment lorsqu'on ferme la fenêtre et même en fermant toutes les fenêtre Firefox, il arrive qu'il reste toujours une instance de Firefox qui traine dans les processus en cours et qu'il faut tuer à la main (sous Windows du moins, je ne l'ai pas testé sur un autre système).

Donc ce n'est pas parfait mais ça a le mérite de combler un gros manque, donc ça mérite le coup d'œil

Sinon, l'extension Firebug est censée fournir une partie de ces fonctionnalités également mais, jusqu'à présent, à chaque fois que j'ai tenté de l'installer elle m'a causé plus de problèmes qu'autre chose (instabilité du navigateur) donc je n'ai pas approfondi...

Une feuille de style, qu'est-ce que c'est ?

Pour ceux qui ne s'y connaitraient pas trop en développement web, la feuille de style est un fichier qui permet de définir l'apparence d'une page web. Idéalement, lorsqu'on développe un site, la sémantique du contenu est indiquée par le code HTML qui le met en page (par exemple telle ligne est un titre, telle autre est une définition, etc) et on le décore ensuite via une feuille de style. Le langage utilisé pour écrire ces feuilles de style est CSS.

Des feuilles de style personnalisées ?

C'est là que Firefox intervient ! En effet, ce génial navigateur a une fonctionnalité qui bien que peu connue du grand public ouvre d'énormes possibilités : il permet à l'utilisateur averti de définir des feuilles de styles personnelles appliquées soit à tous les sites qu'il affiche, soit à un site, groupe de sites ou même une page en particulier (plus d'explications ici).

De base c'est masqué et pas facile d'accès mais l'extension Stylish permet de les définir très facilement. On peut ainsi modifier soi-même l'affichage des sites que l'on visite (bien entendu, cette modification ne vaut que pour votre navigateur à vous et n'est visible par personne d'autre).

On peut par exemple réorganiser les éléments en occupant l'espace inutilisé par un design prévu pour une résolution plus base, remplacer certaines couleurs insupportables, supprimer certains blocs d'affichage, etc.

Comment ajouter une feuille de style ?

1. Installez Stylish et relancez Firefox.
2. Lancez l'outil de gestion des feuilles de style :
   
3. Cliquez sur le bouton "Écrire" :
   *
4. Indiquez d'abord un titre (1) qui vous servira uniquement à reconnaitre cette feuille quand vous en aurez ajouté plein d'autres. Puis copiez/collez le code CSS que vous voulez appliquer dans le cadre texte (2) et enfin cliquez sur "Enregistrer" (3).
   
5. C'est prêt. Il peut cependant s'avérer nécessaire de rafraichir la page pour que les modifications apparaissent.

Tout ça c'est bien mais moi j'utilise IE...

Alors ça c'est ballot ! Parce que ça m'étonnerait fortement qu'IE gère un truc pareil, mais bon, on ne peut pas en même temps utiliser un navigateur totalement dépassé, ou plus généralement un produit Microsoft, et espérer qu'il soit à la pointe de l'innovation...

Et je n'en ai pas entendu parler pour les autres navigateurs tels qu'Opera ou Safari... Cela dit, rien ne vous empêche de chercher et de faire part de vos découvertes.