BrowserSync ist ein Open-Source Projekt für schnellere und einfachere Multi-Device Web-Entwicklung und ermöglicht es, verschiedene Browser-Tabs/Fenster zu synchronisieren um z.B. Desktop/Tablet/Mobile-Ansicht gleichzeitig sehen und debuggen zu können (Responsive Design).
Node.js
Tritt bei der Anwendung ein Error auf, kann es sehr wahrscheinlich sein, dass die Synchronität nicht mehr gewährleistet ist!
BrowserSync eignet sich also mehr zum schnellen Debuggen mit responsive Live-Preview verschiedener Bildschirmgrößen und nicht so sehr zum QA-Testen!
Für AngularCLI Projekte:
(Projektspezifisch)
Installation:
Im Terminal zum Pfad der package.json wechseln:
cd <projektPfadZurPackageJson>
BrowserSync installieren und automatisch richtig in die package.json aufnehmen:
npm install browser-sync --save-dev
Konfiguration:
in der package.json das Script "browser-sync" hinzufügen und für das Start-Script " | npm run browser-sync" ergänzen, sodass es beim Starten des Projekts mit ausgeführt wird - Beispiel:
"scripts": {
"browser-sync": browser-sync start --files './*.html, ./*.tpl, ./*.js, ./*.css' --reload-delay=300 --reload-debounce=500" --proxy localhost:4200 --ws",
"start": "ng serve --host 0.0.0.0 --proxy-config proxy.conf.json --live-reload false | npm run browser-sync",
}
BrowserSync mit AngularCLI-Projekt starten:
Terminal:
npm start
IntelliJ:
Die "start"-RunConfiguration starten wenn vorhanden
Anwendung (Desktop und Mobile Ansicht):
Ein Browsertab öffnet sich nach dem Starten automatisch auf localhost:3000 (je nach --proxy Einstellung).
Wenn es nicht auf anhieb funktioniert/lädt, im Browser den entsprechenden Tab Hard-Reloaden via STRG-SHIFT-R und evtl. Cache leeren.
Wenn es eine Login-Maske gibt sollte man sich jetzt einloggen, bevor man fortfährt.
Eine zusätzliche Sitzung im Inkognito-Fenster starten und auch auf localhost:3000 gehen (und mit dem gleichen User einloggen!)
Das Inkognito-Fenster zum Mobile-View wechseln (Chrome: F12 dann STRG+SHIFT+M; Firefox: STRG+SHIFT+M)
Am besten die Fenster auf zwei Monitore verteilen um Live-Änderungen sofort zu sehen.
Für Sonstige Projekte:
Installation:
(Global, da das Projekt über keine package.json verfügt)
npm install browser-sync -g
BrowserSync starten via Terminal:
Statische Seiten:
(Wenn man nur .html Dateien debuggen will, muss man den Server-Modus benutzen. BrowserSync startet dann einen mini-server und stellt eine URL zum anzeigen der Seite bereit)
browser-sync start --files './*.html, ./*.tpl, ./*.js, ./*.css' --reload-delay=300 --reload-debounce=500" --server
Dynamische Seiten:
(Wenn man bereits einen Lokalen Server wie PHP oder ähnliches am Laufen hat, braucht man den Proxy-Modus. BrowserSync wrapt dann den virtuellen Host mit einer Proxy-URL um die Seite aufzurufen)
browser-sync start --files './*.html, ./*.tpl, ./*.js, ./*.css' --reload-delay=300 --reload-debounce=500" --proxy localhost
Websocket Unterstützung:
(Werden Websockets verwendet, muss der Parameter --ws angegeben werden)
browser-sync start --files './*.html, ./*.tpl, ./*.js, ./*.css' --reload-delay=300 --reload-debounce=500" --proxy localhost --ws