Responsive-Inspektor für Chrome ist ein großes Learning Tool für Responsive Design

Chrome ist nicht sehr groß an Entwickler-Tools, und das ist einer der Gründe, warum Firefox ist die Go-to-Browser für die meisten Entwickler. Doch für diejenigen, die Chrome tun verwenden, gibt es viele Erweiterungen zur Verfügung, sie in dieser Hinsicht zu helfen. Responsive Inspector ist eine Chrome-Erweiterung, die die Responsive Design Ansicht zu Recht konkurrieren kann, dass Mozilla 15. Responsive Inspector ist ein zwei in einem Werkzeug in Firefox eingeführt; es zeigt Ihnen die Bildschirmgrößen eine Website für, optimiert und schnell können Sie mit einem anderen aus dem Pop-up wechseln. Darüber hinaus kann es Screenshots von einer Webseite, auf einen dieser Größen eingestellt. Für Websites, die bereits optimiert für bestimmte Bildschirmgrößen sind, können Sie den CSS-Code für das sehen, es zu einem großartigen Lernwerkzeug für Responsive Design-Entwickler als auch zu machen.

Responsive Inspector fügt eine rechteckige Schaltfläche neben der URL-Leiste, die ein Pop-up öffnet. Die Erweiterung zeigt Ihnen alle Bildschirmgrößen, die die aktuell geladene Webseite für über Bars optimiert ist. Die Bildschirmgröße ist am Ende jeder Stange geschrieben, und eine Pixelskala oben zeigt Ihnen verschiedene Bildschirmgrößen. Bewegen Sie die Maus über die Waage und für jede Kalibrierungslinie, wird ein Popup angezeigt, die Sie die Bildschirmgröße zeigen, die sie darstellt. Auf diesem Pop-up gibt es eine Resize-Taste sowie eine Kamera-Taste. die ehemaligen klicken, wird automatisch ein Browserfenster mit dieser Breite ändern. Anschließend können Sie die Kamerataste klicken, um einen Screenshot davon zu nehmen, wenn Sie möchten. Der Screenshot kann auf dem lokalen Laufwerk gespeichert werden, oder zu Behance.net hochgeladen. Wenn Sie die Notwendigkeit einer feineren Pixelskala fühlen, klicken Sie auf den Zoom-in-Taste es zu vergrößern.

Um die CSS verwendet, um die Anzeigeoptionen zu codieren, bewegen Sie die Maus über einen der Balken, der eine Bildschirmgröße repräsentieren die Website für optimiert wurde, und Sie werden eine {} Taste erscheinen am Ende sehen. Klicken Sie auf den CSS-Code in einem neuen Tab zu sehen. Der Code ist nicht direkt bearbeitet werden, aber Sie können es kopieren oder inspizieren verwenden Werkzeug, Änderungen vorzunehmen. Responsive Inspector ahmt die Responsive Design Ansicht in Firefox ziemlich gut; in der Tat wäre es nicht falsch zu sagen, dass die Erweiterung ein Schnitt über dem Werkzeug. Wo Firefox gibt Ihnen Größe Voreinstellungen Bildschirm, Responsive Inspector bietet Ihnen eine ganze Skala und viel Freiheit, und dann gibt es das Screenshot-Tool. Presets würde allerdings Responsive Inspector viel nützlicher machen, und hinzugefügt werden sollte. Obwohl auch ohne diejenigen, arbeitet die Erweiterung außerordentlich gut.

Installieren Sie Responsive-Inspektor von Chrome Web Store