LoïcG

Sélection de bookmarklets pour les développeurs Web

En tant que développeur, j’adore bosser sur Firefox. Avec l’extension Firebug (notamment), c’est un pur bonheur de concevoir, débugger et améliorer du code en javascript ou même une mise en page HTML+CSS.

Malheureusement, une grande majorité d’internaute utilise encore Internet Explorer (toutes versions confondues …). Mais là, pour le coup, les outils deviennent bien rares… Il existe bien une ou deux toolbars reprenant certaines fonctionnalités de Firebug, mais ça reste assez limité.

La solution que j’adopte lorsque je bascule sous IE, ce sont les bookmarklets.

Un bookmarklet est un favoris (ou marque-page) dont le lien de destination est un code en javascript. Ce code, va s’exécuter sur la page courante et ensuite permettre de

• vous rediriger vers une page de publication (facebook, twitter, etc …)
• modifier le document en cours (via des manipulations DOM)
• afficher des informations supplémentaires (règle, propriétés CSS, etc …)
• Les actions possibles sont aussi nombreuses et variés que le javascript est souple et puissant.

Les avantages des bookmarklets sont nombreux :

• facilité d’installation (il suffit bien souvent de les faires glisser dans la barre de favoris)
• légèreté (ils n’alourdissent pas votre navigateur puisqu’ils n’y sont même pas installés …)
• sauvegarde facile (je les synchronise comme tous mes bookmarks avec l’extension Mozilla Weave pour Firefox)

Ainsi, voici ma sélection de bookmarklets que j’utilise fréquemment :

Firebug Lite

Firebug Lite reprend l’apparence de l’extension pour Firefox, mais comme son nom l’indique, il s’agit d’une version allégée. La fonctionnalité qui lui fait le plus défaut est celle de la modification du contenu à la volée. En dehors de ça, l’inspecteur DOM et la navigation dans le source HTML sont de précieux outils.

Design

Le bookmarklet Design est plutôt réservé aux intégrateurs et aux graphistes. Il permet d’afficher des grilles, de mesure ou d’afficher une mire par dessus le contenu de la page. Ainsi, il devient plus facile de repérer et corriger les divs mal alignés.

ReCSS

ReCSS est un bookmarklet permettant de recharger uniquement les feuilles de styles du document en cours. Ca peut paraitre à première vue, mais lorsque vous êtes dans une série de formulaire et que vous êtes obligés de reprendre tout votre cheminement pour visualiser les modifications apportées. A ce moment là (le gars) on apprécie d’avoir un simple bouton qui recharge tout le style ^^
J’utilise ReCSS sous Firefox également, en complément des fonctionnalités d’édition de Firebug.

SpriteMe

Etant un peu accro aux performances et temps de chargements, j’aime traquer les millisecondes (qui additionnées font vite des secondes). Il est quelques des éléments de plus en plus présents que l’ont peut regrouper : les background-images.
Ces images composent la majorités des templates et thèmes de sites. SpriteMe est un bookmarklet qui va vous proposer une disposition et une feuille de style pour regrouper ces images en une seule (dans l’idéal). Ainsi au lieu de prendre 20*10ms, votre thème prendra uniquement 1*100ms pour charger ses images…
J’utilise SpriteMe sous Firefox pour m’aider à repérer les images que je peux regrouper.

mURL

mURL est mon réducteur d’URL, je l’ai doté également de bookmarklets pour pouvoir garder et transmettre facilement un lien vers une documentation, une librairie ou vers n’importe quoi d’autre.

Maintenant que vous êtes équipés pour bosser efficacement sous Internet Explorer, au boulot !

Article inspiré par InspectElement.com

Tags: bookmarklet, firefox, internet explorer, outils