L'inspecteur réactif pour Chrome est un excellent outil d'apprentissage pour une conception réactive

Chrome n'est pas très gros sur les outils de développement, et c'est l'une des raisons pour lesquelles Firefox est le navigateur incontournable pour la plupart des développeurs. Cependant, pour ceux qui utilisent Chrome, de nombreuses extensions sont disponibles pour les aider à cet égard. Inspecteur réactif est une extension Chrome qui peut à juste titre rivaliser avec le Responsive Design View que Mozilla a introduit dans Firefox 15. L'inspecteur réactif est un outil deux en un; il vous montre les tailles d'écran pour lesquelles un site Web est optimisé et vous permet de passer rapidement à un autre à partir de la fenêtre contextuelle. En outre, il peut prendre des captures d'écran d'une page Web ajustée à l'une de ces tailles. Pour les sites Web déjà optimisés pour certaines tailles d'écran, vous pouvez afficher le code CSS responsable de cela, ce qui en fait également un excellent outil d'apprentissage pour les développeurs de conception réactive.

Inspecteur réactif ajoute un bouton carré à côté de la barre d'URL qui ouvre une fenêtre contextuelle. L'extension vous montre toutes les tailles d'écran pour lesquelles le site Web actuellement chargé est optimisé via des barres. La taille de l'écran est écrite à la fin de chaque barre et une échelle de pixels en haut vous montre différentes tailles d'écran. Déplacez votre souris sur l'échelle et pour chaque ligne d'étalonnage, une pop apparaîtra pour vous montrer la taille de l'écran qu'elle représente. Sur ce même pop-up, il y a un bouton de redimensionnement ainsi qu'un bouton d'appareil photo. Cliquer sur le premier redimensionnera automatiquement la fenêtre de votre navigateur à cette largeur. Vous pouvez ensuite cliquer sur le bouton de l'appareil photo pour en faire une capture d'écran, si vous le souhaitez. La capture d'écran peut être enregistrée sur votre disque local ou téléchargée sur Behance.net. Si vous ressentez le besoin d'une échelle de pixels plus fine, cliquez sur le bouton de zoom avant pour l'agrandir.

Pour afficher le CSS utilisé pour coder les options de visualisation, passez la souris sur l'une des barres qui représentent une taille d'écran pour laquelle le site Web a été optimisé, et vous verrez un bouton {} apparaître à la fin. Cliquez dessus pour afficher le code CSS dans un nouvel onglet. Le code n'est pas directement modifiable, mais vous pouvez le copier ou utiliser l'outil d'inspection pour apporter des modifications. L'inspecteur réactif imite assez bien la conception responsive dans Firefox; en fait, il ne serait pas faux de dire que l'extension est une coupe au-dessus de l'outil. Lorsque Firefox vous donne des préréglages de taille d'écran, Responsive Inspector vous donne une échelle entière et beaucoup de liberté, puis il y a l'outil de capture d'écran. Les préréglages rendraient l'inspecteur réactif beaucoup plus utile et devraient être ajoutés. Bien que même sans ceux-ci, l'extension fonctionne exceptionnellement bien.

Installer l'inspecteur réactif à partir du Chrome Web Store