Pascal Kremp

Google Chrome für den Web Developer aufmotzen

4 minutes

Hast du schon mal in einer Runde gefragt, wer welchen Browser benutzt? Teilweise entfacht diese Frage einen regelrechten „ich muss meinen Browser verfechten“-Krieg. Ich will mitmachen und hebe meine Hand für Google Chrome! In diesem Beitrag möchte ich keinen bekehren zur guten Seite überzuwechseln. Ich möchte aufzeigen, wie du deinen Google Chrome für dich als Web Developer aufmotzen kannst.

1. Google-Konto anlegen!

Besitzt du schon ein Google Konto? Wenn nein, dass solltest du dir ein Google-Konto anlegen! Wenn ja, solltest du sicherstellen, dass du dich in deinem Google Chrome auch mit diesem Konto angemeldet hast. Der Vorteil an dieser Sache ist es, dass alle Suchanfragen, Verläufe, Favoriten, Erweiterungen, ggfs. Passwörter und Einstellungen im Konto gespeichert werden. Das heißt, solltest du dein Betriebssystem mal neu aufsetzen müssen oder Chrome auf einem anderen Rechner installieren, so findest du Chrome nach wenigen Sekunden in deinem gewohnten Zustand wieder.

2. Entwicklertools

Erst vor kurzem habe ich im Beitrag Editor und Programme für Web Developer darauf aufmerksam gemacht, dass man Chrome als Webentwickler installieren sollte. In dem Beitrag ist ein interessantes Video beigefügt, welches die Entwicklertools kurz und deutlich veranschaulicht. Auch hier möchte ich keine Überzeugungsarbeit leisten. Wer dieses Tool noch nicht nutzt, sollte sich definitiv damit auseinandersetzen!

3. Erweiterungen

Google Chrome Web StoreThe Fun Part! Erweiterungen bieten dir die Möglichkeit deinen Browser für deine Bedürfnisse anzupassen. Öffnest du im Chrome einen neuen Tab (strg+t/cmd+t), befindet sich unten rechts ein Verweis zum Chrome Web Store. Diese Plattform bietet dir eine Übersicht über alle offiziellen Erweiterungen (Extensions/Plugins). Folgende Erweiterungen, dürfen auf keinen Fall fehlen:

Google Mail

Wenn du nicht nur Besitzer eines Google Kontos bist, sondern auch noch Google Mail benutzt, solltest du gleich mehrere Erweiterungen installieren:

  • Google Mail – Bietet dir einen dicken, fetten, nicht zu übersehenden Button, wenn du einen neuen Tab öffnest
  • Google Mail Checker – Fügt neben der Adressleiste ein kleines Gmail-Symbol hinzu. Dieses Symbol zeigt dir, ob sich ungelesene E-Mails im Postfach befinden und befördert dich bei einem Klick auf dieses Symbol direkt zu Google Mail
  • Boomerang for Gmail – Du schreibst öfters abends E-Mails, willst dem Empfänger diese aber erst morgens früh um 8:00 senden und hast keine Lust so früh aufzustehen? Boomerang for Gmail ermöglicht es dir unter anderem E-Mails zu einem festen Termin zu versenden.

RSS Erweiterungen

Ich nutze meinen Browser auch zum Lesen und organisieren von RSS-Feeds. Dabei schwöre ich auf den Reader von Google. Um mein Verhalten mit diesem Programm zu verbessern, habe ich ebenfalls drei nützliche Erweiterungen installiert.

  • Google Reader – Dicker fetter Button in der Apps Übersicht (Wie bei Google Mail)
  • Google Reader Notifier – Zeigt ebenfalls wie der Google Mail Checker ungelesene Beiträge aus deinem Google Reader an. Ich empfehle hier außerdem in den Optionen (Rechte Maustaste auf den Notifier) die Möglichkeit „Bei Mausklick:“ auf „Google Reader öffnen“ zu stellen.
  • Erweiterung „RSS-Abonnement“ – Fügt der Adressleiste einen Button hinzu, der angezeigt wird, wenn RSS-Feeds auf der aktuell aufgerufenen Webseite existieren und ermöglicht dir diese zu abonnieren.

Spätestens jetzt solltest du meinen RSS-Feed abonniert haben!

PageSpeed Insights

Langsame Webseiten mag keiner. Vor allem Google nicht. Langsame Webseiten kosten Geld. PageSpeed Insights von Google untersucht die Webseite auf ihre Ladegeschwindigkeit und zeigt die Ursachen für Tempoeinbüßen an. Es ist bekannt, dass die Geschwindigkeit einer Seite relevant für die Platzierung in den Suchmaschinen ist. Also, von nun an nur noch schnelle Seiten entwickeln!

Die ermittelten Werte können von denen in Page Speed Online Tool abweichen!

Weitere nützliche Extensions

Chrome DevTools Autosave

Wenn du es bis hierhin geschafft hast, sollst du belohnt werden. Das Beste zum Schluss. Chrome DevTools Autosave ist einfach der Hammer! Dieses Programm wurde sogar auf der  Google I/O 2012 vorgestellt! In Verbindung mit node.js ermöglicht diese Erweiterung das Ändern von beispielsweise CSS- und JS-Dateien im Browser. Wie du hoffentlich schon festgestellt hast, kann man mit den Entwicklertools direkt auf der Webseite CSS-Eigenschaften verändern und deren Auswirkung sehen. Chrome DevTools Autosave speichert diese Änderungen direkt in deinen Dateien. Dieses Werkzeug beschleunigt das Arbeiten bzw. Entwickeln von Webseiten ungemein. Erspart einiges an hin- und hertabben!

Zusammenfassung

Ich kann nur empfehlen Chrome eine Chance zu geben. Mein Workflow und meine Arbeitsgeschwindigkeit haben sich dank diesem Browser erheblich gesteigert. Wie sieht es bei dir aus? Lust auf „ich muss meinen Browser verfechten“-Krieg? Oder habe ich etwas im Extension Jungle übersehen? Lass es mich in den Kommentaren wissen.

 


2 Kommentare

  • PCDKai

    Hallo,

    gute Zusammenstellung! Viele davon nutze auch ich schon sehr lange.

    Ich hätte da noch etwas aus eigener Hand anzubieten: „PageLiner“ (http://goo.gl/RY4pRD)

    PageLiner ermöglicht das setzen von Hilfslinien auf Webseiten, wie man es von Photoshop kennt.

    Ich weiß, dass eine ähnliche Funktion bereits in der „Web Developer“-Extension vorhanden ist, welche jedoch nicht so viele Möglichkeiten in dem Bereich bietet.

    Der Vorteil an PageLiner ist, dass Chrome sich diese pro Webseite merkt und diese auch farblich verändert werden können.

    Von den anderen Features solltet ihr euch einfach selbst überzeugen. 🙂

    Gruß,

    Kai

  • ADD A COMMENT