18 hilfreiche Firefox-Plugins nicht nur für Webentwickler stelle
ich in der vierundsiebzigsten Episode des
Anwendungsentwickler-Podcasts vor. TL;DR Für meinen Arbeitsalltag
habe ich Firefox mit 18 Erweiterungen angepasst, die dir auch als
IT-Azubi helfen können. Neun davon erleichtern den Umgang mit dem
Browser, etwa beim Anmelden, beim Schreiben in Formularen oder beim
Lesen und Anschauen gespeicherter Inhalte. Weitere neun helfen dir
bei der Webentwicklung, wenn du HTML prüfst, JavaScript debuggst
oder Layouts und HTTP-Daten untersuchst. Beim ergänzenden Thema
Tabs und Spaces kommt es darauf an, dass dein Team einheitlich
arbeitet. Kapitelmarken [00:00:01] Einführung: 18
Firefox-Erweiterungen [00:00:59] Firefox im Arbeitsalltag und
eigener Sync-Server [00:02:27] Allgemeine Plugins und Werkzeuge für
die Webentwicklung [00:04:05] Vimperator: Firefox mit
Vim-Tastenkürzeln steuern [00:05:47] FireGestures: Browserbefehle
über Mausgesten [00:07:33] KeeFox: Zugangsdaten aus KeePass
eintragen [00:09:01] It's All Text: Formulartexte im Texteditor
bearbeiten [00:11:04] Lazarus: Formulareingaben wiederherstellen
[00:12:21] Make Link: Formatierte Links kopieren [00:13:51] Send to
Kindle: Lange Artikel später lesen [00:14:51] Video DownloadHelper:
Videos offline anschauen [00:16:20] Zotero: Literatur und PDFs
verwalten [00:18:23] Web Developer Toolbar: Webseiten untersuchen
und verändern [00:19:23] HTML Validator: Gültiges HTML prüfen
[00:20:20] Firebug: JavaScript debuggen und Webseiten untersuchen
[00:21:12] ColorZilla: Farbcodes auslesen [00:22:16] MeasureIt:
Abstände und Maße in Pixeln prüfen [00:23:03] FireShot: Komplette
Webseiten als Screenshot speichern [00:24:22] Linkification:
Textadressen anklickbar machen [00:25:32] Live HTTP Headers:
Requests und Responses untersuchen [00:26:20] Advanced Cookie
Manager: Cookies prüfen und verändern [00:26:52] Überblick über die
18 Plugins und Shownotes [00:27:40] Tabs und Spaces: Konventionen
und einheitlicher Code im Team Inhalt Allgemein Vimperator: Ohne
Vim-Steuerung ist der Firefox nicht zu gebrauchen ;-) FireGestures:
Aber auch die Maussteuerung kann deutlich optimiert werden. KeeFox:
Nie wieder Passwörter eintippen! It's All Text!: Formulare im
Lieblingseditor ausfüllen. Lazarus: Form Recovery: Lazarus hat mich
schon mehrfach vor dem erneuten Eintippen riesiger Formulare
bewahrt. Make Link: Unerlässlich, wenn man Texte (wie diesen) mit
Markdown schreibt. Send to Kindle for Mozilla Firefox: Für lange
Artikel eine einfache Lösung, sie offline zu lesen. * Video
DownloadHelper: Wenn einem die doppelte Geschwindigkeit von YouTube
nicht reicht ;-) Zotero: Die Literaturverwaltung meiner Wahl.
Webentwicklung Web Developer: Das schweizer Taschenmesser für jeden
Webentwickler. Html Validator: Sauberes Markup sollte für jeden
Entwickler Pflicht sein. Firebug: Was kann dieses Tool nicht?
ColorZilla: Sehr hilfreich bei der Überprüfung von Farbvorgaben.
MeasureIt: Für pixelgenaue Layouts unerlässlich. Fireshot: Sehr
hilfreich bei der Abstimmung von Entwürfen mit dem Kunden.
Linkification: Ein nettes Helferlein. Live HTTP Headers: Gerade in
Zeiten von REST sehr hilfreich. Advanced Cookie Manager: Na, wer
spioniert mich da aus? Literaturempfehlungen Falls du den Vim noch
nicht "beherrschst", wird es Zeit! ;-) * Links Permalink zu dieser
Podcast-Episode RSS-Feed des Podcasts Zusammenfassung Firefox in
meinem Arbeitsalltag Ich arbeite seit Jahren mit Firefox und habe
den Browser durch Erweiterungen an meine Aufgaben angepasst. Für
meine Lesezeichen betreibe ich einen eigenen Sync-Server, damit die
Daten auf meinem Server liegen. Die hier vorgestellten 18 Plugins
verteilen sich auf neun allgemeine Erweiterungen und neun für
Webentwickler:innen. Über F12 erreichst du bereits die eingebauten
Entwicklerwerkzeuge von Firefox. Dort kannst du JavaScript
untersuchen und HTML sowie CSS verändern. Die zusätzlichen Plugins
erweitern diese Möglichkeiten. Neun Erweiterungen für den Alltag
Vimperator: Damit steuere ich Firefox über die Tastenkürzel aus
Vim. Mit D lässt sich ein Tab schließen, während T einen neuen
öffnet. Wenn du F drückst, erscheinen Zahlen an Links und
anklickbaren Formularelementen. Über diese Zahlen kannst du direkt
mit der Tastatur navigieren. Auch beim Scrollen stehen dir die
gewohnten Vim-Befehle zur Verfügung. FireGestures: Mit gedrückter
rechter Maustaste zeichnest du Gesten, die Browserbefehle
ausführen. So kannst du etwa einen Tab schließen oder zum
Seitenende springen. Eigene Gesten lassen sich zusätzlich
festlegen. KeeFox: Das Plugin verbindet Firefox mit KeePass, wo ich
meine Passwörter verschlüsselt speichere. Anhand hinterlegter URLs
erkennt es passende Zugangsdaten. Mit Strg + Umschalt + 2 werden
die Felder ausgefüllt und das Formular abgeschickt. It's All Text:
Über einen kleinen Button an einem Textfeld öffnest du dessen
Inhalt in einem frei wählbaren Texteditor. Dort stehen dir
beispielsweise die vertrauten Tastenkürzel und Syntax-Highlighting
für Markdown zur Verfügung. Sobald du die Datei speicherst,
erscheint der geänderte Text im Browser. Die Datei bleibt im
temporären Verzeichnis auf der Festplatte erhalten, sodass du nach
einem Browserabsturz darauf zugreifen kannst. Beim erneuten Öffnen
der Seite kann das Plugin den Text wieder dem Formular zuordnen.
Lazarus: Wenn du direkt in Formularfelder schreibst, merkt sich die
Erweiterung deine Eingaben. Nach einem Absturz kannst du sie über
das Kontextmenü wiederherstellen. Ich verwende das auch für
Formulare mit vielen einzelnen Feldern. Make Link: Über das
Kontextmenü kopierst du die aktuelle Seite als formatierten Link in
die Zwischenablage. Das Format lässt sich frei festlegen. Für meine
mit Markdown geschriebenen Artikel habe ich eine passende Vorlage
eingerichtet; auch HTML und BBCode sind möglich. Send to Kindle:
Längere Artikel schicke ich auf meinen Kindle, um sie später dort
zu lesen. Die Erweiterung bereitet den Inhalt auf und entfernt
Werbung, während die zum Text gehörenden Bilder erhalten bleiben.
Video DownloadHelper: Damit lade ich Videos herunter, etwa von
YouTube oder Vimeo, und schaue sie später offline. Das hilft mir
bei schlechtem WLAN und auf Zugfahrten. Die gespeicherten Dateien
lassen sich in einem Media Player abspielen, in dem ich auch die
Geschwindigkeit einstellen kann. Zotero: In dieser
Literaturverwaltung sammle ich Quellen mit ihren bibliografischen
Angaben und PDF-Anhängen. Bei einem geöffneten Buch auf Amazon
übernimmt das Plugin beispielsweise die Metadaten. Auch Inhalte
einer Website lassen sich als Screenshot oder PDF anhängen. Meine
Daten und Anhänge liegen auf meinem eigenen Server und werden
zwischen meinen Rechnern synchronisiert. Für Literaturempfehlungen
an IT-Azubis ergänze ich eigene Notizen, damit ich Quellen später
wiederfinde. Mit vielen installierten Plugins kann Firefox
langsamer werden. Für bereits eingegebene Texte bieten It's All
Text und Lazarus Wege, sie nach einem Absturz wiederzubekommen.
Neun Erweiterungen für Webentwickler:innen Web Developer Toolbar:
Die Werkzeugleiste bietet viele Funktionen, um Webseiten zu
untersuchen. Du kannst Cookies bearbeiten oder CSS-Stile verändern
und abschalten. Ebenso lassen sich Formulare deaktivieren sowie
Bilder ein- und ausblenden. HTML Validator: Ein Symbol zeigt dir,
ob das HTML der aktuellen Seite gültig ist. Bei Fehlern bekommst du
Hinweise auf die betroffene Stelle und darauf, wie du sie behebst,
etwa bei einem fehlenden schließenden Tag. In meiner Ausbildung
achte ich auf valides HTML; dabei spielt auch Barrierefreiheit eine
Rolle. Firebug: Das umfangreiche Werkzeug hilft unter anderem beim
Debuggen von JavaScript. Für Firebug gibt es eigene Erweiterungen.
Ein genanntes Beispiel von Yahoo untersucht, wie lange einzelne
Bestandteile einer Webseite zum Laden brauchen. ColorZilla: Mit der
Farbpipette liest du Farbcodes direkt im Browser ab und kopierst
sie in die Zwischenablage. So kannst du kontrollieren, ob die
Farben einer Website den Vorgaben entsprechen. MeasureIt: Du ziehst
ein Rechteck auf und bekommst dessen Breite und Höhe in Pixeln
angezeigt. Damit lassen sich Abstände im Layout prüfen, auch wenn
der betreffende Bereich aus mehreren Seitenelementen besteht.
FireShot: Die Erweiterung erstellt Screenshots kompletter Webseiten
einschließlich der Bereiche außerhalb des sichtbaren Fensters. Das
Ergebnis kannst du beispielsweise als JPEG oder PDF speichern und
per E-Mail verschicken. Ich verwende solche Bilder, um mit dem
Fachbereich Änderungen an einer Seite zu besprechen. Linkification:
Als Text eingetragene URLs werden automatisch anklickbar. Die
Erweiterung erkennt neben HTTP-Adressen auch FTP- und
Mailto-Verweise, sodass du sie direkt öffnen kannst. Live HTTP
Headers: Damit schaust du dir die HTTP-Header von Request und
Response an. Bei REST-Diensten kannst du beispielsweise prüfen,
welcher Accept-Header gesetzt wurde und welches Datenformat
zurückkommt. Auch Angaben zu gzip, Content-Length und Statuscodes
lassen sich untersuchen. Advanced Cookie Manager: Das Plugin zeigt
die Cookies im Browser an und erlaubt dir, Werte zu ändern oder
herauszukopieren. Ich verwende es unter anderem, um Session
Hijacking zu demonstrieren. Durch gezielt veränderte Cookie-Werte
lässt sich außerdem prüfen, wie eine Website auf fehlerhafte Daten
reagiert. Die Links zu den Erweiterungen stehen in meinen Shownotes
zur Episode 74 auf anwendungsentwicklerpodcast.de. Tabs und Spaces
im Quellcode Als ergänzenden Artikel habe ich eine Untersuchung
verlinkt, die sich mit Tabs und Spaces in vielen
Open-Source-Projekten beschäftigt. Bisher habe ich Tabs bevorzugt,
weil sich ihre angezeigte Breite im Editor individuell einstellen
lässt. Durch den Artikel denke ich darüber nach, künftig häufiger
mit Spaces zu arbeiten. Welche Variante du verwendest, hängt auch
vom Projekt und den Konventionen der jeweiligen Sprache oder
Plattform ab. In Java-Projekten sind Spaces häufig verbreitet....
Kommentare (0)
Melde dich an, um einen Kommentar zu schreiben.