WhatZeWeb

Quand on développe un site web, il y a toujours énormément de points auxquels nous devons prêter attention : le responsive, la compatibilité, la validité du code, la ressemblance avec la maquette, l’accessibilité, etc.

Tout cela n’est pas toujours simple, à fortiori quand on commence à utiliser un grand nombre d’outils.

C’est pourquoi, dans cet article, je vais vous présenter quelques outils qui pourront vous être utiles pour vos développement, tout ça… directement dans le navigateur Chrome !

 

Les outils de développement du navigateur

Premier outil incontournable, et disponible par défaut depuis Chrome : les outils de développement.

Ils sont accessibles de différentes manières :

• Par un clic droit sur la page > Inspecter

• Avec le raccourci clavier Ctrl+Maj+I

• En cliquant sur les trois points en haut à droite de votre fenêtre > Plus d’outils > Outils de développement

• Depuis la touche F12

Je ne détaillerai pas toutes les fonctionnalités de ces outils dans cet article : ils sont si complets qu’ils méritent un article dédié.

 

Regardons tout de même dans les grandes lignes les possibilités qui nous sont offertes :

 

On y retrouve de gauche à droite dans les onglets :

1. le code HTML et CSS

2. La console

3. La liste des sources chargées par la page

4. L’onglet réseau, qui nous donne des indications sur toutes les requêtes effectuées (statut, temps, poids, type, etc.)

5. L’onglet performance, qui, après rechargement de la page, va nous fournir de précieuses informations concernant le temps de chargement de la page, avec ses différentes étapes

6. Mémoire : pour avoir un détail de la mémoire consommée pour chacune des tâches nécessaires à l’affichage de la page

7. Application, qui nous donne diverses informations sur la mise en cache, les données stockées en local ou en session, les cookies, etc.

8. L’onglet sécurité qui nous indique en détail si nous sommes sur un site sécurisé ou non

9. Audits : avec Lighthouse (disponible également sous forme d’extension), nous pouvons obtenir un audit de notre site sur divers points : performances, PWA, bonnes pratiques, accessibilité et SEO

Enfin, tout en haut à gauche de ces outils, on trouve également deux icônes : la première nous permet de cibler un élément du DOM pour afficher directement le code HTML correspondant et les styles CSS qui y sont appliqués, et la seconde, qui nous permet de simuler l’affichage de notre site sur différents écrans.

 

Les extensions

IE Tab

Bien qu’étant de moins en moins utilisé (6,97% en mai 2018), Internet Explorer reste un navigateur qu’on ne peut pas négliger. L’extension IE Tab permet d’afficher son site web en utilisant le moteur d’Internet Explorer directement dans un onglet de Chrome pour s’assurer que notre site est bien compatible avec ce navigateur.

 

Check My Links

Check My Links est une extension qui va scanner notre page pour rechercher tous les liens, et mettre en évidences les liens morts.

 

Sizzy

Cette extension, Sizzy, nous permet de tester si votre site est bien responsive, en affichant les prévisualisations de notre page sur sur différents appareils.

 

Perfect Pixel

Pour les plus pointilleux, l’extension Perfect Pixel est vraiment pratique ! Elle permet de superposer une image semi-transparente (la maquette 😉 ) sur notre site, et donc de vérifier que celui-ci répond parfaitement (au pixel près !) à l’attendu.

 

Web Developer

Cette extension est un véritable couteau suisse ! Web Developer nous propose un très grand nombre de fonctionnalités, dont : la possibilité de désactiver JavaScript, de supprimer les cookies, d’éditer le CSS, de remplir, ou réinitialiser un formulaire, d’afficher les attributs alt des images présentes sur la page, d’afficher les éléments cachés, de valider notre code HTML… et bien d’autres encore !

C’est une extension vraiment complète, que je vous invite à essayer !

 

EyeDropper

EyeDropper est une extension qui va nous permettre d’obtenir la couleur (son nom, ses codes hexadécimal, rgb et hsl) de n’importe quel élément sur une page web.

 

WhatFont

Dans le même esprit que l’extension précédente, mais appliqué aux polices, WhatFont nous permet de voir quelle est la police utilisée sur un site Web, son style, sa graisse, sa couleur.

 

Dimensions

Cette extension, Dimensions, va nous permettre, comme son nom l’indique, d’obtenir les dimensions des éléments d’une page : boutons, images, champs de formulaire, etc.

 

RDS Bar

RDS Bar est une extension qui permet une analyse rapide des indicateurs de base du référencement naturel.

 

Fireshot

Cette extension nous permet de faire des captures d’écran de notre page dans son intégralité ou uniquement de sa partie visible, de les annoter, et de les sauvegarder. Fireshot est une extension vraiment pratique, puisqu’elle permet également, entre autres, d’imprimer, d’envoyer par emails ou de sauvegarder sous plusieurs formats nos captures.

 

Wappalyzer

Wappalyzer est une extension qui va nous permettre de scanner n’importe quel site web pour obtenir des informations sur les différentes technologies utilisées (CMS, frameworks, outils analytics, etc.).

 

Je pourrais poursuivre cette liste encore un bon moment, tant le Chrome Web Store regorge d’extensions ultra-pratiques !

N’hésitez à les essayer, à les comparer, afin de choisir celles qui vous conviennent le mieux, et être ainsi parés à checker vos sites web (presque) sous toutes les coutures !