Pendule - Neat Chrome Plugin für einen Webentwickler

Ich mache ziemlich viel Webentwicklung und Google Chrome ist heutzutage mein Hauptbrowser. Chrome ist ziemlich entwicklungsfreundlich, und Sie können Firebug auch in Chrome einrichten. So installieren Sie Firebug unter IE, Safari, Chrome und Opera. So installieren Sie Firebug unter IE, Safari, Chrome und Opera. Weitere Informationen. Aber heute wollte ich Ihnen eine andere Chrome-Erweiterung namens Pendule zeigen. Pendule ergänzt die integrierte Funktion „Inspect Element“ von Chrome um einige interessante Extras.

Das Pendelmenü

Die Symbolleistenschaltfläche von Pendule öffnet ein schick aussehendes Menü, das in sechs Hauptbereiche unterteilt ist. Zunächst einmal die Style Sheets Sektion. Das CSS anzeigen Diese Option scheint überflüssig zu sein - Chrome lässt uns CSS bereits anzeigen… oder macht es?

Viele Websites verwenden komprimiertes CSS, andere komprimieren sie bis zur Unleserlichkeit. Wenn Sie der einzige Webentwickler auf Ihrer Website sind, können Sie möglicherweise selbst entscheiden, wie stark Sie das CSS komprimieren möchten. Für mich gibt es kein solches Glück. Eine der Websites, für die ich arbeite, komprimiert das CSS mit einem PHP-Tool namens Minify. Wenn Sie also das CSS mit den integrierten Tools von Chrome untersuchen, zeigt sich Folgendes:

Nicht gerade das lesbarste Format, das man sich vorstellen kann. Mit Pendule kann ich das CSS auf meiner Seite leicht verschönern. Ich klicke einfach auf die Pendel-Schaltfläche und klicke auf CSS anzeigen. Ich bekomme dann so etwas:

Immer noch nicht gut lesbar. Klicken Sie aber auf Verschönern Sie CSS knöpfen Sie und beobachten Sie die Magie:

Jetzt reden wir! Während Sie in der CSS-Ansicht nichts ändern können, ist dies eine große Verbesserung, wenn es um komprimiertes CSS geht.

Umgang mit Bildern

Pendule bietet auch einige interessante Bildfunktionen:

“Bildinformationen anzeigen” führt Sie zu einer völlig neuen Webseite, die alle Bilder der aktuellen Seite enthält und jeweils eine Vielzahl verwandter Informationen enthält:

Dies ist praktisch, da Sie alle Bilder nacheinander durchblättern und einzeln prüfen können. Einige Websites bieten beispielsweise Inhalte von einem Server und verwandte Bilder von einem anderen Server (um die Abläufe zu beschleunigen). Mit dieser Ansicht können Sie genau sehen, wo jedes Bild herkommt, und leicht herausfinden, welche Bilder nicht von der richtigen Quelle geliefert werden.

Sie können auch den Alt-Text für jedes Bild lesen, das für SEO-Angebote von Bedeutung sein kann. Wenn Sie jedoch nur an dem Alt-Text interessiert sind, können Sie mit Pendule diese Seite auf einfache Weise überprüfen “Zeige alten Text” Möglichkeit. Wenn diese Option aktiviert ist, sehen die Bilder auf Ihrer Seite folgendermaßen aus:

Dies ist zufällig aus einem schönen Beitrag mit dem Titel 3 Zeichen, das Apple von Microsoft verdrängt, um das böse Imperium zu werden, aber der Punkt hier ist das Wenige “alt =” Ausschnitt über dem Bild. Es sieht aus wie ein Tooltip, aber Sie müssen nicht mit der Maus darüber fahren, damit es angezeigt wird. Mit “Zeige alten Text”, Sie können einfach durch Ihre Webseite blättern und genau sehen, welche Bilder fehlende oder falsche Alts enthalten.

Verschiedene Dienstprogramme

Das Menü "Verschiedenes" von Pendule enthält einige interessante Leckereien. Das JavaScript anzeigen Produkte eine einzelne Webseite, die in Abschnitte unterteilt ist, einen Abschnitt für jedes Skript, das die aktuelle Seite enthält. Ähnlich wie das “CSS anzeigen” Option, mit der wir angefangen haben, JavaScript anzeigen lässt Sie den Code verschönern, um ihn lesbar zu machen. JavaScript ist fast immer komprimiert (noch mehr als CSS). Dies ist eine sehr nützliche Option, wenn Sie Code lesen möchten, um herauszufinden, wie alles funktioniert.

Das “Lineal anzeigen” Diese Option dimmt die Seite ab und überdeckt sie mit einem anpassbaren, ziehbaren Rahmen mit einer kleinen Beschriftung, der die Abmessungen zu jeder Zeit anzeigt. Dies ist sehr praktisch, um beispielsweise zu überprüfen, ob Elemente korrekt ausgerichtet sind.

Erfahren Sie mehr über: Google Chrome, Webdesign, Webentwicklung, Webmaster-Tools.