de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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

5 beste Tools zum Batch umbenennen Dateinamen in Windows

5 beste Tools zum Batch umbenennen Dateinamen in Windows

Im täglichen Berufsleben kann die Produktivität einer ganzen Reihe von Dateien oder Ordnern durch bestimmte Aktionen erhöht werden . Batch-Bildbearbeitung ist ein gutes Beispiel in dieser Hinsicht. Ebenso gibt es Tools, mit denen Sie Ihre Dateinamen auch im Stapel umbenennen können.Ja, es gibt solche Apps, die verfügbar sind, und in diesem Beitrag stelle ich Ihnen die besten kostenlosen Desktop-Tools vor, mit denen Sie Dateinamen in Windows umbenennen können . Lass

(Tech- und Design-Tipps)

So legen Sie neue Standard-Apps in Windows 10 fest

So legen Sie neue Standard-Apps in Windows 10 fest

Ich bin kein großer Fan von Windows 10-integrierten Apps. Aus diesem Grund lade ich immer Alternativen von Drittanbietern herunter, die normalerweise leistungsfähiger sind. Dies zwingt mich jedoch auch , Standard-Apps häufig zu verwalten .Leider hat Windows 10 anders als Windows 7 oder 8 eine völlig andere Benutzeroberfläche, um Standardanwendungen zu verwalten . Und

(Tech- und Design-Tipps)