Come testare il sito web su più browser e dispositivi in ​​modo sincrono

Responsive Web Design (RWD) è ora un approccio comune nella costruzione di un sito web mobile friendly. Ma costruire un sito web reattivo può essere piuttosto irritante quando si deve testare il sito Web in più dispositivi e dimensioni dello schermo.

Supponiamo che tu abbia tre dispositivi per eseguire il test, potresti finire per dover aggiornare costantemente ogni browser in ognuno di questi dispositivi, il che è a dir poco ingombrante.

Quindi è emersa l'idea di "test sincronizzati" per affrontare questa situazione e rendere il flusso di lavoro più snello. C'è un plugin Grunt chiamato Browser Sync per eseguire questo, e ti mostreremo come distribuirlo nel tuo progetto, in questo post.

Perché utilizzare Browser Sync?

Innanzitutto, non sto dicendo che Browser Sync è lo strumento perfetto. Ci sono anche una serie di applicazioni GUI come Adobe Edge Inspect e Ghostlab che sono anche degli ottimi strumenti. Entrambi hanno una bella interfaccia grafica, ma ecco perché penso che Browser Sync sia meglio di queste applicazioni:

1) Browser Sync (così come Grunt) è gratuito e questo aiuta se hai poco o nessun budget con cui lavorare.

2) È open source . A seconda della tua competenza su JavaScript e Node.js puoi estenderlo per soddisfare le tue esigenze specifiche.

3) È multipiattaforma . Puoi usarlo su Windows, OS X e Linux . Ghostlab, d'altra parte, è disponibile solo in OS X e Windows.

Installazione

Per iniziare, installeremo il plugin Grunt chiamato Browser Sync. Sono sicuro che il nome dice tutto; questo plug-in sincronizza un numero di interazioni che si verificano sul sito Web, incluso lo scorrimento delle pagine, la compilazione dei campi modulo e il clic sui collegamenti.

Tutte queste azioni si rifletteranno sugli altri browser e dispositivi mentre stanno accadendo. Digitare il comando seguente per installare Browser Sync nella directory di lavoro:

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

Configurazione

Una volta installato, Browser Sync può essere caricato all'interno di Gruntfile.js, in questo modo.

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

Questa configurazione monitorerà il file navbar-fixed-top.css e aggiornerà automaticamente il browser quando viene modificato. Dovremmo anche consentire a ghostMode di tenere traccia delle interazioni sul sito web .

Nota: Browser Sync fornisce anche una serie di altre configurazioni, è possibile verificarle in dettaglio in questa pagina . Per il momento, la configurazione di cui sopra dovrebbe essere sufficiente per l'esempio di progetto in questo articolo.

Una volta impostata la configurazione, andare su Terminale (o Prompt dei comandi) ed eseguire l'attività utilizzando il seguente comando:

 grunt browser_sync 

Dopo aver eseguito il comando, ti verrà richiesto di aggiungere tre linee di script all'interno di etichetta.

Inoltre, quando visualizzi il tuo sito web in più browser, registra anche quei browser e ti avvisa in Terminal. In questo caso, ho aperto il sito Web in Chrome, Safari e Mobile Safari (tramite iPhone Simulator).

Controlla

Ora, come puoi vedere dalla seguente GIF animata, tutti gli aggiornamenti, le modifiche e le interazioni sono sincronizzati in tempo reale su tutti i browser.

Ulteriori risorse

Qui ci sono più risorse per scavare ulteriormente in Grunt e "Test sincronizzati".

• Meet Grunt: The Build Tool per JavaScript - Codice +
• Test mobili sincronizzati cross-device - HTML5 Rocks

Ottieni tutti i tuoi feed di social network in un unico posto con Feedient

I social media sono senza dubbio diventati parte integrante delle nostre vite. Ogni giorno, accediamo ai nostri account Facebook, Twitter e Instagram, controllando ciò che accade in tutto il mondo e tra la nostra cerchia di amici.Tuttavia, con così tanti social network là fuori, e così tante informazioni che vengono postate e caricate su queste reti, a volte può essere una seccatura enorme per tenersi aggiornato su ciò che accade sulle reti preferite . Non

(Consigli tecnici e di design)

Introduzione a ITCSS per sviluppatori Web

Esistono una serie di ottimi metodi per strutturare il codice CSS e tutti funzionano in modi diversi. I più popolari sono OOCSS e SMACSS, ma c'è anche un metodo meno conosciuto chiamato ITCSS (Inverted Triangle CSS) creato da Harry Roberts.Non è una libreria o un framework, ma una metodologia di scrittura di codice che è scalabile e facile da manipolare. I

(Consigli tecnici e di design)