Tout récemment, nous avons publié un article sur les 12 extensions Google Chrome pour les développeurs et les concepteurs. Certaines de ces extensions sont disponibles sur Firefox , je n'en répéterais pas ici.
De la même manière, certaines des extensions répertoriées ci-dessous sont disponibles sur Chrome ; considérez donc ces applications comme des bonus pour les navigateurs respectifs.
1. Validateur HTML
HTML Validator parcourt votre code pour s'assurer qu'il respecte la convention standard HTML. Il affiche le nombre d'erreurs qu'il voit sur l'icône de la barre d'outils.
Module HTML Validator Firefox
2. Octotree
En tant que développeur, je parcours plusieurs pages de code sur GitHub de temps en temps lorsque je cherche à voir comment d'autres développeurs ont résolu certains problèmes . Si vous êtes comme moi, vous trouverez Octotree utile.
Octotree affiche le code GitHub sous forme d'arborescence. De cette façon, vous pouvez parcourir les lignes de code sans télécharger les fichiers source.
Octotree affiche le code GitHub au format arborescent
3. HTTPS Partout
HTTPS Everywhere chiffre les données que vous échangez avec toutes les principales pages Web, même si elles n'utilisent pas HTTPS.
Donc, si vous êtes dirigé vers des pages qui n'utilisent pas https, vous pouvez être sûr que votre communication en ligne est sécurisée.
4. Test de performance de page
Page Performance Test vous donne des statistiques sur vos pages Web en mesurant leur vitesse et leurs performances de chargement. Vous pouvez enregistrer les résultats du graphique afin de le comparer aux tests suivants.
Test de performance de la page
5. Usernap
Usersnap vous permet de prendre des captures d'écran de sites Web et de les annoter en ajoutant des dessins de balisage et des commentaires. Il est également livré avec une règle de pixels et peut s'intégrer directement à divers outils de gestion de projet, notamment Slac, Trello et JIRA.
Cette liste ne serait pas complète sans Usersnap étant donné qu'elle permet un processus de rétroaction efficace. Il s'agit cependant d'un service payant, avec un essai gratuit de 14 jours.
Usersnap
6. Désactiver JavaScript
Désactiver JavaScript, comme son nom l'indique, vous permet de désactiver JavaScript sur des sites Web ou simplement sur des onglets spécifiques. Vous pouvez le personnaliser pour avoir un état JS par défaut activé/désactivé et un comportement de désactivation par défaut par domaine/onglet, etc.
Désactiver JavaScript
7. Liste de contrôle pour les développeurs Web
L'extension Web Developer Checklist vous donne un aperçu de l'utilisation de votre site selon les meilleures pratiques de conception et de développement.
Cliquer sur l'icône vous informera sur le référencement de votre site, les URL conviviales, le favicon, etc. avec des coches à côté pour indiquer une réussite.
Liste de contrôle pour les développeurs Web
8. Outils de développement React
Avec l'augmentation apparemment sans fin de la popularité de React, les développeurs React naissent presque tous les jours et l'équipe React les couvre.
React Developer Tools vous donne la possibilité d'inspecter un arbre React avec son état, ses accessoires, sa hiérarchie, etc. Pour l'activer , lancez Firefox devtools et passez à l'onglet React.
Il existe également une version pour les développeurs Vue sous la forme d'outils de développement Vue.js.
Outils de développement React
9. CouleurZilla
ColorZilla est un excellent outil permettant aux développeurs et aux graphistes de choisir les couleurs de différentes pages Web.
Il contient également une pipette, un générateur de dégradés, un navigateur de palettes et un historique des couleurs.
ColorZilla
dix. Evernote Web Clipper
Evernote Web Clipper vous permet de prendre des captures d'écran de pages Web et de les enregistrer automatiquement sur votre Evernotecompte à partir duquel vous pouvez faire des annotations et partager avec les membres de l'équipe.
Evernote Web Clipper
11. Gestionnaire de cookies
Cookie Manager est une extension soucieuse de la sécurité qui vous permet d'afficher, d'ajouter, de modifier, de supprimer et de rechercher des cookies dans n'importe quel domaine.
Ce qui est encore plus cool avec Cookie Manager, c'est que vous pouvez exporter et importer des cookies entre les domaines.
Gestionnaire de cookies
12. Éditeur en direct pour CSS et LESS
Live Editor pour CSS et LESS vous permet d'écrire du code CSS/LESS directement dans votre navigateur. Votre code prend effet immédiatement et sera enregistré au niveau du site dans le stockage local de votre navigateur.
Son éditeur sur la page propose la saisie semi-automatique, l'embellissement, le linter, etc. Vous devriez le vérifier.
Éditeur en direct pour CSS
Vous avez envie de l'une des extensions répertoriées ou avez-vous une liste que nous pouvons utiliser ? La section des commentaires est ci-dessous.