So testen Sie Websites synchron über mehrere Browser und Geräte hinweg

Responsive Web Design (RWD) ist heute ein gängiger Ansatz beim Aufbau einer mobilen Website. Der Aufbau einer responsiven Website kann jedoch ziemlich irritierend sein, wenn Sie die Website in mehreren Geräten und auf verschiedenen Bildschirmgrößen testen müssen.

Angenommen, Sie haben drei Geräte, auf denen der Test ausgeführt werden kann. Möglicherweise müssen Sie dann jeden Browser in jedem dieser Geräte aktualisieren, was umständlich ist, um es gelinde auszudrücken.

Daher wurde die Idee des "synchronisierten Testens" entwickelt, um dieser Situation zu begegnen und den Arbeitsablauf zu vereinfachen. Es gibt ein Grunt-Plug-in namens Browser-Sync, um dies durchzuführen, und wir zeigen Ihnen, wie Sie es in Ihrem Projekt in diesem Post bereitstellen.

Warum Browser Sync verwenden?

Zunächst einmal sage ich nicht, dass Browser Sync das perfekte Werkzeug ist. Es gibt auch eine Reihe von GUI-Anwendungen wie Adobe Edge Inspect und Ghostlab, die ebenfalls großartige Werkzeuge sind. Beide haben eine nette GUI, aber ich denke Browser Sync ist besser als diese Anwendungen:

1) Browser Sync (sowie Grunt) ist kostenlos, was hilft, wenn Sie wenig oder kein Budget haben, um damit zu arbeiten.

2) Es ist Open-Source . Abhängig von Ihren JavaScript- und Node.js-Kenntnissen können Sie diese auf Ihre spezifischen Anforderungen erweitern.

3) Es ist plattformübergreifend . Sie können es in Windows, OS X und Linux verwenden . Ghostlab ist dagegen nur in OS X und Windows verfügbar.

Installation

Zu Beginn installieren wir das Grunt-Plugin namens Browser Sync. Ich bin sicher, der Name sagt alles; Dieses Plug-in synchronisiert eine Reihe von Interaktionen, die auf der Website stattfinden, einschließlich Seiten-Scrollen, Füllen von Formularfeldern und Klicken auf Links.

Alle diese Aktionen werden in den anderen Browsern und Geräten angezeigt, sobald sie ausgeführt werden. Geben Sie den folgenden Befehl ein, um Browser Sync in Ihrem Arbeitsverzeichnis zu installieren:

 npm install grunt --save-dev npm installieren grunt-browser-sync --save-dev 

Aufbau

Einmal installiert, kann Browser Sync auf diese Weise in die Gruntfile.js geladen werden.

 module.exports = function (grunt) {grunt.initConfig ({browser_sync: {dev: {bsFiles: {src: 'navbar-fixed-top.css', }, ghostMode: {klickt: true, scroll: true, links: true, Formen: true, }, }, }, }); grunt.loadNpmTasks ('grunt-browser-sync'); }; 

Diese Konfiguration überwacht die Datei navbar-fixed-top.css und aktualisiert den Browser automatisch, wenn er geändert wird. Wir sollten auch ghostMode, um die Interaktionen auf der Website zu verfolgen .

Hinweis: Browser Sync bietet auch eine Reihe anderer Konfigurationen, die Sie auf dieser Seite im Detail überprüfen können. Vorläufig sollte die obige Konfiguration für das Projektbeispiel in diesem Artikel ausreichen.

Sobald die Konfiguration eingestellt ist, gehen Sie zu Terminal (oder Eingabeaufforderung) und führen Sie die Aufgabe mit dem folgenden Befehl aus:

 grunzen browser_sync 

Nachdem Sie den Befehl ausgeführt haben, werden Sie aufgefordert, drei Zeilen von Skripten innerhalb des Befehls hinzuzufügen Etikett.

Wenn Sie Ihre Website in mehreren Browsern anzeigen, werden auch diese Browser aufgezeichnet und Sie werden im Terminal benachrichtigt. In diesem Fall habe ich die Website in Chrome, Safari und Mobile Safari (über iPhone Simulator) geöffnet.

Hör zu

Wie Sie in der folgenden animierten GIF sehen können, werden alle Updates, Änderungen und Interaktionen in allen Browsern in Echtzeit synchronisiert.

Weitere Ressourcen

Hier sind mehr Ressourcen, um weiter in Grunt und "Synchronized Testing" zu graben.

• Lernen Sie Grunt kennen: Das Build Tool für JavaScript - Code +
• Synchronisiertes geräteübergreifendes mobiles Testen - HTML5 Rocks

Ultimativer Leitfaden zu Getter und Setter in JavaScript

Getter und Setter sind Funktionen oder Methoden, die zum Abrufen und Festlegen der Werte von Variablen verwendet werden . Das Getter-Setter-Konzept ist in der Computerprogrammierung üblich : Fast alle höheren Programmiersprachen verfügen über eine Syntax zur Implementierung von Getter und Setter, einschließlich JavaScipt.In d

(Tech- und Design-Tipps)

Bootstrap 4: Neue und coole Funktionen, die Sie lieben werden

Die nächste große Version des Bootstrap-Frameworks steht vor der Tür. Die Alpha-Version kann bereits von der Bootstrap-Entwicklungswebsite heruntergeladen werden, und der Quellcode ist auch auf Github verfügbar.Twitter Bootstrap ist derzeit das beliebteste Frontend-Framework. Es ermöglicht Entwicklern , schnell mobile und schnell reagierende Websites zu erstellen . Boo

(Tech- und Design-Tipps)