Chrome is niet erg groot in ontwikkeltools, endat is een van de redenen waarom Firefox voor de meeste ontwikkelaars de juiste browser is. Voor degenen die Chrome wel gebruiken, zijn er veel extensies beschikbaar om hen hierbij te helpen. Responsieve inspecteur is een Chrome-extensie die terecht kan concurreren met deResponsive Design Bekijk dat Mozilla introduceerde in Firefox 15. Responsive Inspector is een twee-in-één tool; het toont u de schermformaten waarvoor een website is geoptimaliseerd en laat u snel overschakelen naar een andere dan de pop-up. Bovendien kan het schermafbeeldingen maken van een webpagina die is aangepast aan een van die formaten. Voor websites die al zijn geoptimaliseerd voor bepaalde schermformaten, kunt u de CSS-code bekijken die hiervoor verantwoordelijk is, waardoor het ook een geweldig leermiddel is voor responsieve ontwerpontwikkelaars.
Responsive Inspector voegt een vierkante knop toe naastde URL-balk die een pop-up opent. De extensie toont alle schermformaten waarvoor de momenteel geladen website is geoptimaliseerd voor via bars. De schermgrootte wordt aan het einde van elke balk geschreven en een pixelschaal bovenaan toont verschillende schermformaten. Beweeg uw muis over de schaal en voor elke kalibratielijn verschijnt een pop om u de schermgrootte te laten zien. In dezelfde pop-up is er een knop voor het wijzigen van de grootte en een cameraknop. Als u op de eerste klikt, wordt het formaat van uw browservenster automatisch aangepast aan die breedte. U kunt vervolgens op de cameraknop klikken om er een screenshot van te maken, als u dat wilt. De schermafbeelding kan worden opgeslagen op uw lokale schijf of worden geüpload naar Behance.net. Als u behoefte hebt aan een fijnere pixelschaal, klikt u op de zoomknop om deze te vergroten.
Om de CSS te bekijken die wordt gebruikt om de weergaveopties te coderen,beweeg met uw muis over een van de balken die een schermgrootte vertegenwoordigen waarvoor de website is geoptimaliseerd, en aan het einde ziet u een knop {}. Klik erop om de CSS-code op een nieuw tabblad te bekijken. De code kan niet rechtstreeks worden bewerkt, maar u kunt deze kopiëren of de inspectietool gebruiken om wijzigingen aan te brengen. Responsive Inspector bootst de Responsive Design View in Firefox redelijk goed na; het zou zelfs niet onjuist zijn om te zeggen dat de extensie een snee boven het gereedschap is. Waar Firefox u voorinstellingen voor schermgrootte geeft, geeft Responsive Inspector u een volledige schaal en veel vrijheid, en dan is er de screenshot-tool. Voorinstellingen zouden Responsive Inspector echter veel nuttiger maken en moeten worden toegevoegd. Hoewel zelfs zonder die, werkt de extensie uitzonderlijk goed.
Responsive Inspector installeren vanuit Chrome Web Store
Comments