Chrome n’est pas très gros sur les outils de développement, etC’est l’une des raisons pour lesquelles Firefox est le navigateur de référence pour la plupart des développeurs. Toutefois, pour ceux qui utilisent Chrome, de nombreuses extensions sont disponibles pour les aider à cet égard. Inspecteur réactif est une extension Chrome capable de rivaliser avec leResponsive Design Voir que Mozilla a introduit dans Firefox 15. Responsive Inspector est un outil deux en un; il vous indique les tailles d'écran pour lesquelles un site Web est optimisé et vous permet de passer rapidement à une autre de la fenêtre contextuelle. De plus, il peut prendre des captures d’écran d’une page Web ajustée à l’une de ces tailles. Pour les sites Web qui sont déjà optimisés pour certaines tailles d'écran, vous pouvez afficher le code CSS responsable, ce qui en fait un excellent outil d'apprentissage pour les développeurs de conceptions réactives.
Inspecteur réactif ajoute un bouton carré à côté dela 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 indique différentes tailles d'écran. Déplacez votre souris sur l'échelle et pour chaque ligne d'étalonnage, une fenêtre apparaît pour vous montrer la taille de l'écran qu'elle représente. Sur cette même fenêtre contextuelle, il y a un bouton de redimensionnement ainsi qu'un bouton de caméra. En cliquant sur le précédent, la fenêtre de votre navigateur sera automatiquement redimensionnée à cette largeur. Vous pouvez ensuite cliquer sur le bouton de l'appareil photo pour prendre une capture d'écran, si vous le souhaitez. La capture d'écran peut être sauvegardée sur votre disque local ou téléchargée sur Behance.net. Si vous avez besoin d'une échelle de pixels plus fine, cliquez sur le bouton de zoom avant pour l'agrandir.
Pour voir le CSS utilisé pour coder les options de visualisation,survolez l'une des barres représentant la taille d'écran pour laquelle le site Web a été optimisé et un bouton {} apparaît à 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 vue de conception réactive 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 complète 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. Même sans cela, l'extension fonctionne exceptionnellement bien.
Installer Responsive Inspector à partir du Chrome Web Store
commentaires