[Update] Top Chrome Erweiterungen für Webdeveloper

Tipps zu Chrome:

  1. in Chrome kann man verschiedene User anlegen, welche auch unterschiedliche Chrome-Erweiterungen installieren können (man kann z.B. einen Privacy-User anlegen): chrome://settings/
  2. die DevTools sollte man kennen: https://speakerdeck.com/addyosmani/whats-new-in-chrome-devtools
  3. Chrome-Extensions kann man auch ganz einfach selber erstellen:

Code: https://github.com/voku/Web-Analyse-Tools-for-Chrome

Demo: https://chrome.google.com/webstore/detail/web-development-analysis/ebhbpdaejpgndphbdcphdiefknmeciph

Beispiele: https://developer.chrome.com/extensions/samples)

Dev-Tools:

Name Url Info
Accessibility Developer Tools Link Barrierefreiheit von Webseiten Testen via Chrome-Dev-Tools
Blackfire Companion Link PHP: Better app performance with a low-overhead Profiler
Caspr: Enforcer Link Content Security Policy (CSP) Änderungen prüfen und testen
Codecov Extension Link Code-Coverage Report-Overlay innerhalb von Github und Bitbucket
Ember Inspector Link Debugging für Ember-Anwendungen
GitHub Linker Link Verlinkte Packages via npm, bower, composer etc.
GitHub Mate Link Extra Features für github.com z.B. Download-Button
HTML5 Outliner Link Zeigt eine Übersicht über alle Inhalte einer Webseite an, wenn HTML korrekt ver
HTTP/2 and SPDY indicator Link Zeigt in der Adresszeile an, ob HTTP/2 verwendet wird
JetBrains IDE Support Link HTML/CSS/JavaScript editing and JavaScript debugging using JetBrains IDEs
JetBrains Toolbox Extension Link Adds link to open project from GitHub in JetBrains IDEs
JSON Editor Link JSON Editor, welcher sowohl einen Daten-Tree in JSON also auch JSON in einen Daten-Tree konvertieren kann
JSONView Link Validiert und zeigt JSON an
LiveReload Link CSS kann ohne Browser-Reload aktualisiert werden (siehe z.B. grunt-contrib-watch)
Lovely forks Link Zeigt Forks auf github.com Seiten an
Octotree Link Zeigt GitHub-Code in einer Baumstruktur dar
SelectorGadget Link CSS (xPath) Elemente auf Webseiten per Maus auswählen
Web Developer Checklist Link Schnelle Check-Liste für Webseiten (Favicon, robots.txt, …)
WAVE Evaluation Tool Link Barrierefreiheit-Overlay für Webseiten

Privacy-Tools:

Name Url Info
 AdBlock Link  Entfernt Werbung von Webseiten …
Deaktivierungs-Add-on von Google Analytics Link Weist das JavaScript (ga.js) von Google Analytics an, keine Informationen an Google Analytics zu übermitteln
 Disconnect Link Ein weites Privacy-Tool …
HTTPS Everywhere Link Sichern Sie Ihre Internetverbindung! Automatische HTTPS-Sicherheit auf vielen Webseiten
uBlock Link Ein effizienter Blocker …
uMatrix Link Kontrolliere alle Anfragen deines Browsers …

Organisation- / Extra-Tools:

Name Url Info
Boards for Trello Link Schnellzugriff auf trello.com
Der Camelizer Link Einfaches Anzeigen historischen Preisdaten direkt in Amazon
feedly Link Ein sehr guter RSS-Reader
Google Cast Link Senden Sie Inhalte an Ihren Chromecast und andere Geräte, die Google Cast unterstützen.
Lazarus: Form Recovery Link Speichert alle Daten von Formularen ab, so dass diese Informationen nicht verloren gehen
SimpleExtManager Link Eine schnelle Verwaltung für Chrome-Erweiterungen
Tabs Outliner Link  Session- und Tab-Manager für Chrome
OneTab Link Tabs in einer Liste zusammenfassen, um Speicher zu sparen
Save to Pocket Link Speicher Artikeln, Videos und mehr …
Web Timer Link Zeigt an wie viel Zeit man auf den jeweiligen Webseiten verbringt

HTTP/2 ist angekommen | Apache 2.4.17

Was ist HTTP/2? Diese Frage haben andere bereits ausführlich geklärt. https://http2.github.io/faq/ :) daher wollen wir dies heute in Kombination mit dem Apache Webserver ausprobieren.

Im Februar 2015 hat Google den Support für SPDY bereits zugunsten von HTTP/2 eingestellt. Und die Kompatibilität von HTTP/2 ist in fast allen aktuellen Webbrowsern gegeben, so das es bereits seit einiger Zeit keinen Grund gibt, nicht auf das neue Protokoll zu setzen. Seit dieser Woche unterstützt auch der Apache Webserver (2.4.17) das Protokoll, “Stefan Eissing” hat das Module “mod_http2” gesponsert, welches wir im folgenden testen werden.

Installation unter Ubuntu 14.04 via Fremdquellen (PPA)

Warnung: “Zusätzliche Fremdquellen können das System gefährden.”
–> https://wiki.ubuntuusers.de/paketquellen_freischalten/ppa

Zu beginn stellen wir sicher, dass SPDY nicht mehr verwendet wird.

a2dismod spdy

Und deinstallieren dies am besten direkt, falls dies über den Paket-Manager installiert wurde.

apt-get purge mod-spdy-beta

service apache2 restart

Um die Quellen (/etc/apt/sources.list.d/) nicht manuell zu ändern, installieren wir kurzerhand das Programm “add-apt-repository” via:

aptitude install software-properties-common

# Web: https://launchpad.net/~ondrej/+archive/ubuntu/apache2
# Issues: https://github.com/oerdnj/deb.sury.org/issues
#
add-apt-repository ppa:ondrej/apache2

Falls es beim Hinzufügen des Keys zu Problem kommt, kann man dies auch manuell durchführen:

apt-key adv –keyserver keyserver.ubuntu.com –recv-keys 4F4EA0AAE5267A6C

Anschließend installieren wir das Update via “aptitude“, sodass wir mehr Kontrolle über den Update-Prozess haben.

apt-get update; aptitude

aptitude

Nach der Installation können wir das “http2”-Module wie folgt aktivieren.

cd /etc/apache2/mods-available/

vim http2.load

# Depends: setenvif mime socache_shmcb
LoadModule http2_module /usr/lib/apache2/modules/mod_http2.so

vim http2.conf

<IfModule http2_module>
ProtocolsHonorOrder On
Protocols h2 h2c http/1.1
</IfModule>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

Und anschließend muss das Module nur noch aktiviert werden:

a2enmod http2

service apache2 restart

Um zu testen, ob HTTP/2 via https genutzt wird, können wir z.B. direkt im Chrome nachschauen. Dafür öffnen wir einfach die Seite chrome://net-internals und nutzen oben links im DropDown-Menü den Punkt “HTTP/2”.

chrome_http2

 

Quellen:

Blackfire PHP-Profiler: Fire up the Performance

Am Wochenende habe ich mal wieder ein neues Tool ausprobiert: “Blackfire” ist ebenso wie “Insight” von SensioLabs entwickelt und kann die Performance einer PHP-Anwendung “on the fly” analysieren und visualisieren.

Die Installation besteht aus folgenden Komponenten:

  • Probe: dies ist die PHP-Extension welche wir auf dem Server installieren
  • Agent: Dies ist ein Programm, welches ebenfalls auf dem Server installiert wird und die Performance-Daten zu blackfire.io weiterleitet, wo diese dann visualisiert werden
  • Client (optional): ein CLI-Tool um PHP-Profiling auf der Kommandozeile auszuführen
  • Companion: dies ist eine Chrome-Extension, welche auf Knopfdruck das PHP-Profiling ausführt
  • Website: die blackfire.io Webseite zur Darstellung der Ergebnisse

Die Installationsanleitung ist innerhalb von zirka 5 Minuten abgearbeitet und schon kann man schnell und bequem die Leistung / Performance von Änderungen testen und die entsprechenden Ergebnisse miteinander vergleichen.

blackfire.io
blackfire.io: Beispiel-Profile von “http://moelleken.org

 

PS: wer noch mehr Information benötigt sollte sich Xdebug lokal installieren bzw. aktivieren und die Profile-Daten anschließend via WinCacheGrind (Windows) oder direkt via KCachegrind (Linux) auswerten und visualisieren.

KCachegrind
KCachegrind

 

Sozial-Browser – RockMelt

RockMelt ist ein (Facebook-)Browser, welcher auf die Nutzung sozialer Netze (Facebook/Twitter) ausgerichtete ist. Die Software basiert auf Chromium, der Open-Source-Version des Google-Browsers. Die Beta ist momentan leider nur für Windows und Mac OS X verfügbar. Interessierte Nutzer können sich vor einem Download bei RockMelt als Betatester anmelden oder mich um eine Einladung bitten, noch habe ich zwei. ;-)

Beim Start von RockMelt kann man sich bei Facebook einloggt und erhält am linken Bildrand eine (anpassbare) Buddyleiste. Hier kannst du Links ,Bilder oder Videos per Drag and Drop in einen Facebook -Chat/-Message/-Wall deiner Freunde ziehen. Außerdem wird direkt angezeigt wer, momentan online ist.

Die zweite Leiste (am rechten Bildrand) enthält deine gewählten Websites und Dienste. Du kannst z.B. per RSS-Feed neue Blogeinträge erhalten oder Statusupdates von Twitter-Nutzern sehen. Mittels einer Schaltfläche (neben der Adressleiste) kannst du Inhalte mit einem Klick auf Facebook oder Twitter veröffentlichen. Zudem kann man Twitter-Nachrichten auch direkt im Browser als Pop-Up anzeigen lassen und mit dem Suchfeld kann man auch nach Freunden suchen.


Auch wenn ich bisher einiges an negativer Resonanz über RockMelt gelesen habe, bin ich bisher positiv überrascht. Natürlich kann man auch “Google Reader” für RSS-Feeds und “Tweetdeck” für die Kommunikation mit Twitter oder HootSuite, um sowohl Facebook als auch Twitter einfacher zu nutzen.


Überblick: Google – Chrome

“Google Chrome ist ein Webbrowser, der von Google Inc. entwickelt wird und seit dem 2. September 2008 verfügbar ist. Am 11. Dezember 2008 erschien die erste finale Version. Zentrales Konzept ist die Aufteilung des Browsers in optisch und aufProzessebene getrennte Browser-Tabs.” – Wiki


1.) Versionsgeschichte von Google Chrome (Quelle: Wiki)

Legende: Alte Version Aktuelle Version Aktuelle Vorabversion Zukünftige Version
Webkit-
Version

JS-Version

(V8)

Version Veröffentlichung Anmerkungen und wichtige Änderungen
522 0.3 0.2 2. September 2008 erste Veröffentlichung als Beta-Version für Windows
0.3 29. Oktober 2008 Verbesserte Pluginstabilität
525 0.4 24. November 2008 Lesezeichenmanager mit Export und Import, Datenschutzabschnitt in den Optionen, Sicherheitsupdates
528 1.0 11. Dezember 2008 erste stabile Version.
530 0.4 2.0 24. Mai 2009 Vollbild (F11), 35% schnelleres JavaScript beim SunSpider Benchmark Test, Unterstützung vom Mausrad
532 1.2 3.0 15. September 2009 Neue „Neuer Tab“-Seite, bis zu 25% schnelleres JavaScript, Unterstützung des HTML5-video-und-audio-Tags, Themes.
532.5 1.3 4.0 25. Januar 2010 Erweiterungen, native Unterstützung für Greasemonkey-Scripte, Lesezeichensynchronisierung, verbesserte Entwicklerwerkzeuge, verbesserte HTML5-Unterstützung[20]
4.1 17. März 2010 Integration des Google-Übersetzers und erweiterte Content-Einstellungen[21]
533 2.1 5.0 25. Mai 2010 Erste offizielle Version für Linux und Mac; bis zu 30% schnelleres JavaScript, Zoom-Einstellungen werden pro Seite gespeichert; verbesserte Unterstützung von HTML 5; Lesezeichenmanager als Tab, Synchronisierung von Browser-Einstellungen[22] integriertes Flash-Plugin
534 2.2 6.0 2. September 2010 Überarbeitetes Design der Omnibox (Adresszeile), bis zu 15% schnelleres JavaScript, Integration der Autofill-Funktion, Synchronisierung von Erweiterungen und Autofill, Unterstützung für das WebM-Format[23]
534 2.3 7.0 19. Oktober 2010 Verbesserte Unterstützung von HTML5, schnelleres JavaScript, Unterstützung des File-API, Behebung hunderter Bugs, erleichtertes Blockieren von Cookies
534 2.4 8.0 Dezember 2010 Hardwarebeschleunigung durch Grafikkarte, Instant-Suche, verbesserte HTML5-Unterstützung, “about:flags” zum Aktivieren von Vorabfunktionen, integrierter PDF-Betrachter[24]
534 2.4 9.0 2010/2011 Print Preview (Vorabfunktion; ist standardmäßig deaktiviert)


2.) Tastenkombination:

Tastenkombination Funktion
Strg + T Tab öffnen
Strg + 1…8 Tab 1/…/8 aufrufen
Strg + Tab Durchschalten der Tabs
Strg + Umschalt + T Geschlossen Tab zurückholen
Strg + B Bookmarks ein-/ausblenden
Strg + H Verlauf anzeigen
Strg + J Downloadseite aufrufen
Umschalt + Esc Task-Manager aufrufen
Strg + F Suchen

weitere Tastenkombis für Chrome:

[stextbox id=”warning”]Unterscheidung: Win, MAC, Linux[/stextbox]

-> http://www.google.com/support/chrome/bin/static.py?page=guide.cs&guide=25799&topic=28650


3.) Design (Theme) für Chrome

Wer ein neues Design (Theme) für Chrome sucht wird hier fündig:

-> https://tools.google.com/chrome/intl/de/themes/index.html


4.) WebInspector – Webseiten live ändern

Mit dem standardmäßig installiertem WebInspector kann man den Quell-Code einer Webseite ändern und diese Änderung auch direkt ansehen. Einfach einen bestimmten -> Bereich markieren -> rechte Maustaste -> “Element untersuchen”

http://trac.webkit.org/wiki/WebInspector


5.) Erweiterungen nachinstallieren

-> http://code.google.com/chrome/extensions/


5.1.) Xmarks Bookmark and Password Sync: (Synchronisiert auch zwischen verschiedenen Browsern, ggf. danach wieder deinstallieren)

https://chrome.google.com/extensions/detail/ajpgkpeckebdhofmmjfgcjjiiejpodla

5.2.) Erweiterung “RSS-Abonnement” (von Google):

https://chrome.google.com/extensions/detail/nlbjncdgjeocebhnmkbbbdekmmmcbfjd

5.3.) HTML Validator:

https://chrome.google.com/extensions/detail/cgndfbhngibokieehnjhbjkkhbfmhojo

5.4.) Firebug Lite for Google Chrome:

https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench



6.) neue Funktionen freischalten

In der Vorherigen Tabelle findet man bereits einige Funktionen, (interner PDF-Betrachter (+ Sandbox), Hardwarebeschleunigung …) um diese nutzen zu können muss man jedoch folgende Schritte befolgen:


6.1.) Vorabversion verwenden:

Natürlich läuft eine Stable-Version ggf. stabiler und eine Dev-Version noch unstabiler wie eine Beta, jedoch hatte ich bisher keine Probleme mit der Dev-Version. :-)


Windows:

MAC:

Linux:


Quelle: dev.chromium.org/getting-involved/dev-channel


6.2.) ggf. Plugins deaktivieren

Ich habe nun andere PDF-Reader deaktiviert…

about:plugins


6.3.) ggf. experimentelle Funktionen freischalten

about:flags


6.4.) ggf. nachschauen mit welchen Parametern Chrome nun gestartet wurde

about:version


Chrome-Cache zum RAM


Endlich mal wieder ein Post über Windows. Heute wollte ich kurz zeigen, dass man den Browser-Cache von Chrome nicht nur unter Ubuntu in den Arbeitsspeicher auslagern kann. ;-)


1.) RAM-Disk erstellen (getestet unter Win7 64-Bit)

Als erstes müssen wir Arbeitsspeicher frei haben, welchen wir gleich als Festplatte einbinden können. (Unter Linux würde man anstatt einer RAM-Disk -> tmpfs verwenden.)


1.1.) Download / Installation von “Dataram_RAMDisk”

http://memory.dataram.com/products-and-services/software/ramdisk


1.2) RAM-Disk anlegen

RAMDisk
RAMDisk
RAMDisk2
RAMDisk2


[stextbox id=”info”]Wer mehr Arbeitsspeicher übrig hat, kann natürlich auch mehr angeben.[/stextbox]


1.3) RAM-Disk formatieren

Start -> Systemsteuerung -> System und Sicherheit -> Verwaltung -> Computerverwaltung -> Datenträgerverwaltung


Nun wirst du direkt darüber benachrichtigt, dass eine neue Festplatte gefunden wurde und wird nun in der Datenträgerverwaltung angezeigt, schnell noch die neue Festplatte formatieren (NTFS) und schon lässt diese sich im Dateimanager finden. Und du kannst bereits ein Verzeichnis mit dem Namen “ChromeCache” anlegen.


[stextbox id=”info”]Du kannst auch andere Caches z.B. vom Firefox etc. hierher verschieben. :-)[/stextbox]


Am besten führen wir nun einen Neu-Start durch und schauen, ob diese nun Reboot-fest ist.


[stextbox id=”warning”]Info: Das Herunterfahren dürfte nun ein-wenig länger dauern, da der Speicher auf die Festplatte geschrieben wird.[/stextbox]


2) Link anlegen

Unter Linux würden wir nun einfach einen symbolischen Link anlegen und genau das selbe machen wir nun auch unter Windows. ;-)


2.1) Download / Installation von “Junction”


Entpacke “junction.exe” und speicher die Datei auf deinem Desktop.


2.2) Junction verwenden


Bevor wir weiter machen können, müssen wir unter …
C:\Users\<USER>\AppData\Local\Google\Chrome\User Data\Default\
… das Verzeichnis Cache umbenenne / löschen / verschieben wie auch immer, zumindest darf es nicht mehr vorhanden sein!


Start -> “Programme/Dateien durchsuchen -> “cmd” eintippen -> rechte Maustaste -> “Als Administrator ausführen”
cd \Users\<USER>\Desktop
z.B.: cd \Users\Lars\Desktop


junction "C:\Users\<USER>\AppData\Local\Google\Chrome\User Data\Default\Cache" E:\ChromeCache

Dies ist natürlich nur ein Beispiel, deine RAM-Disk kann auch einen anderen Buchstaben haben (!E).


chrome-cache
chrome-cache

Fertig…

Chromium mit gcc-4.5 bauen

Heute zeige ich wie du Chromium mit gcc-4.5 bauen kannst und den Browser somit ein wenig optimieren kannst.


Root-Rechte beschaffen…
sudo su
…nun fügen wie die aktuellen Chromium-Quellen in unser System ein:
add-apt-repository ppa:chromium-daily/ppa && apt-get update
(ls -al /etc/apt/sources.list.d/chromium-daily-ppa*)
Optional: Wer nun bereits die aktuelle Chromium-Version installieren möchte, kann dies mit folgendem Befehl bewerkstelligen.
sudo aptitude install chromium-browser chromium-browser-l10n chromium-codecs-ffmpeg-extra
Nun installieren wir einige Liberiers und Werkzeuge um Chromium per gcc-4.5 kompilieren zu können.
aptitude install g++-4.5 hardening-wrapper libbz2-dev lzma-dev libhunspell-dev libsqlite3-dev libxss-dev libgnome-keyring-dev gyp
(ggf. wirst du im laufe der Kompilierung aufgefordert noch weitere Liberiers nach zu installieren)
Als nächstes erstellen wir einen neues Verzeichnis…
cd /usr/src
mkdir chromium
cd chromium
… in diesem Verzeichnis, laden wir mit folgenden Befehlen die aktuellen Chromium-Browser-Quellen.
apt-get source chromium-browser
bzr get https://code.launchpad.net/~chromium-team/chromium-browser/chromium-browser.head
Wechseln nun in folgendes Verzeichnis und kopieren ggf. die neuen Konfigurationen hinzu…
cd chromium-browser-*
cp -pvr ../chromium-browser.head/ .
… nun müssen wir noch einige Änderungen / Optimierungen vornehmen, dazu editieren wir folgende Datei:
(dabei sollte man beachten, dass nicht alle CPUs “SSE2” unterstützen)
vim debian/rules
———————————————————-
54c54
< GYP_DEFINES = disable_sse2=1
> #GYP_DEFINES = disable_sse2=1
59a60,62
> # Enable gcc4.5
> GYP_DEFINES=’werror=’
>
119d121
< # Set this to use gcc 4.3 instead of 4.4
122,127d123
<
< ifeq (1/4.4,$(AVOID_GCC_44)/$(CC_VERSION))
< CC  := gcc-4.3
< CXX := g++-4.3
< BUILD_ARGS += CC=$(CC) CXX=$(CXX) CC.host=$(CC) CXX.host=$(CXX)
< endif
129,131c125,130
< ifeq (4.4,$(CC_VERSION))
< GYP_DEFINES += no_strict_aliasing=1 gcc_version=44
< endif
> # gcc-4.5
> CC  := gcc-4.5
> CXX := g++-4.5
> BUILD_ARGS += CC=$(CC) CXX=$(CXX) CC.host=$(CC) CXX.host=$(CXX)
> CFLAGS += -O3
> GYP_DEFINES += no_strict_aliasing=1 gcc_version=45 linux_strip_binary=1 remove_webcore_debug_symbols=1
182c181
< USE_SYSTEM_SQLITE := 0
> USE_SYSTEM_SQLITE := 1
186c185
< GYP_DEFINES += use_system_zlib=0
> GYP_DEFINES += use_system_zlib=1
192,197c191,206
< use_system_bzip2=1 \
< use_system_libjpeg=1 \
< use_system_libpng=1 \
< use_system_sqlite=$(USE_SYSTEM_SQLITE) \
< use_system_libxml=0 \
< use_system_libxslt=1 \
>         gcc_version=45 \
>         no_strict_aliasing=1 \
>         use_system_sqlite=$(USE_SYSTEM_SQLITE) \
>         use_system_libxml=0 \
>         use_system_libxslt=1 \
>         use_system_ffmpeg=1 \
>         proprietary_codecs=1 \
>         use_system_libjpeg=1 \
>         use_system_libxslt=1 \
>         use_system_libxml=1 \
>         use_system_bzip2=1 \
>         use_system_zlib=1 \
>         use_system_libpng=1 \
>         use_system_yasm=1 \
>         use_system_libevent=1 \
>         use_system_ssl=0 \
270c279
< rm -f $(subst_files)
> rm -f $(subst_files) *.cdbs-config_list
———————————————————-
Als nächstes ändern wir noch folgende Datei…
vim debian/control
———————————————————-
15c15
< g++-4.3 | g++-4.2,
> g++-4.5,
———————————————————-
Nun können wir aus diesen Quellen eine neue “.deb”-Datei bauen. :-)
export DEBFULLNAME='chromium-browser';export DEBEMAIL='deine@mail-adresse.de';debuild -i -us -uc
Auf meinem Netbook hat dieser Vorgang zirka 4 Stunden gedauert und schon hat man Chromium neu gebaut ;-) und kann diesen per dpkg installieren.
cd ..
dpkg -i *.deb


Hier noch meine Version: http://drop.io/wbrejzv


Wenn noch jemand Erfahrungen mit dem kompilieren von Programmen hat und mir diesbezüglich (Chromium – Optimierung) noch weitere Tipps geben kann, wäre ich euch sehr dankbar.


PS: Wer Chrom / Chromium unter Windows nutzen möchte, solle sich einmal SRWare Iron anschauen.