Strumenti di sviluppo web Google: la guida completa ai tool

Tutti gli strumenti di sviluppo web di Google, i tool per la programmazione: dai DevTool ai debugger, lista e spiegazione dei tool per la programmazione web

Tutti gli strumenti di sviluppo web di Google, i tool per la programmazione: dai DevTool ai debugger, ecco come ottenere il meglio dagli strumenti di Google per la progettazione e lo sviluppo web.

Big G offre agli sviluppatori una miriade di strumenti volti a semplificare il web design. In questa sede, esaminiamo alcuni dei migliori strumenti di Google disponibili e mostriamo come utilizzarli nel flusso di lavoro di progettazione e sviluppo web.

Strumenti di sviluppo web di Google: la guida completa ai tool

Abbiamo esaminato una serie di strumenti di sviluppo web e programmazione, quindi abbiamo suddiviso il contenuto in diverse sezioni per semplificarne la navigazione.

Sempre che i siti web non siano minificati, il loro contenuto può essere visualizzato da chiunque. I DevTool di Chrome rendono semplice visualizzare e modificare HTML, CSS e JavaScript. Successivamente vedremo anche più da vicino come utilizzare altre strumenti di sviluppo web come il debugger di Google, per correggere gli errori di codice in modo rapido e semplice. Poi vedremo anche come funziona il device mode di Google, che si può utilizzare per testare le versioni mobile delle pagine web. Ancora più avanti introdurremo le nozioni di base per iniziare a implementare i principi del Material Design nei progetti e, infine, daremo uno sguardo alle Progressive Web Apps, l’ultima grande novità nel settore del web design.

Strumenti di Sviluppo web: visualizza e modifica HTML, CSS e JS

Finché il codice di un sito web non è stato “minificato”, può essere visualizzato da chiunque usi gli strumenti di sviluppo web di Google Chrome. Prima di tutto, bisogna controllare la versione di Chrome in uso: i seguenti passaggi funzionano sulla versione 70.0.3538.67 . Aprite il menu e fate clic su Altri strumenti> Strumenti per sviluppatori.

Avviate gli Strumenti per Sviluppatori e dovreste vedere una schermata simile a questa qui riportata.

Il browser risponde aprendo un riquadro sul lato sinistro dello schermo. Dovrebbe essere, in primis, ridimensionato, perché, per impostazione predefinita, il browser non alloca abbastanza spazio sullo schermo. Al termine del processo, lo schermo dovrebbe essere simile a quello mostrato nell’immagine.

Per impostazione predefinita, i tool di sviluppo si avviano con la scheda Console: contiene l’output emesso dalle invocazioni della funzione di registrazione della console. Vengono anche visualizzati gli errori di rendering vengono e, se trovate delle linee rosse, qualcosa non va nel codice della pagina. Un clic sul “URL” sul lato destro porta alla linea, che ha causato la visualizzazione del messaggio di erroe

Tool Sviluppo web, ispezionare il markup

Se il vostro interesse si concentra sul markup, usate la scheda Elementi mostrata nella figura più in basso: mostra il markup che il browser esegue. È possibile espandere la visualizzazione o compattarla in modo simile a una visualizzazione ad albero, poiché nasconde gli elementi non necessari per evitare un sovraccarico di informazioni.

La ragion d’essere della scheda è la visualizzazione della struttura dei CSS. I widget raccolgono i CSS da varie fonti e vengono visualizzati ordinatamente uno accanto all’altro. Nel caso dell’esempio mostrato nella figura, vediamo che gli stili sono stati forniti sia col tag “div” che col “principale” markup della pagina.

Gli strumenti di sviluppo web di Google Chrome consentono di modificare la maggior parte degli attributi al volo. Bisogna fare doppio clic su un testo nero qualsiasi per trasformare attivare l’editor, quindi immettete il valore desiderato e premere il tasto Invio. Il renderer prende queste modifiche e le applica al volo. Questo è particolarmente utile quando si tenta di ottimizzare i colori o i problemi di posizionamento; poiché dover ricaricare una pagina per visualizzare l’anteprima delle modifiche diventa faticoso, ma per fortuna grazie a questi tool di sviluppo non è necessario.

Uno sfondo giallo indica che il contenuto della finestra è soggetto a filtri.

Infine, date un’occhiata alla casella di testo in cima al riquadro mostrato: consente di filtrare gli elementi mostrati: ad esempio, si può inserire “mdc” per limitare la visualizzazione a tutti gli stili ereditati dalla libreria Material Design descritta più avanti in questo articolo. Quando un filtro è attivo, uno sfondo giallo si presenta in una maniera simile a quella mostrata sopra.

Strumenti di sviluppo web Google: Eseguire un’analisi dettagliata

Nei moderni browser web, il DOM non si limita ai problemi di presentazione “statici”, ma regola anche il flusso e il posizionamento degli eventi. Basta passare alla scheda Computed per visualizzare un elenco di proprietà “dimensionali”; questo è estremamente utile quando si organizzano i widget sullo schermo.

Il passaggio alla scheda per gli eventi offre una panoramica dei flussi: utilizzate questa funzione per eliminare rapidamente i problemi relativi all’interazione con l’utente: se un evento non si avvia, iniziate dal controllo delle connessioni del gestore eventi.

Infine, la finestra Proprietà consente di dare un’occhiata agli attributi memorizzati all’interno dei singoli nodi DOM. Se hai passato parecchio tempo a cercare il codice che manipola i DOM, il valore è chiaro.

Strumenti di sviluppo web: il debugger Google

Ai bei tempi, gli sviluppatori eseguivano il debug con procedure lente, riga per riga. L’introduzione di debugger dedicati ha accelerato il processo di ricerca degli errori.

Il lavoro del debugger è incentrato sui breakpoint, che fungono da punto di partenza nella sessione di debug, se il codice li colpisce, la sua esecuzione si interrompe. Il modo più semplice per aggiungere un breakpoint è con la scheda del Sorgente, dove si può cliccare al margine per aggiungere un rombo blu.

Quando viene colpita la linea pertinente, appare un inserto giallo sopra la vista renderizzata; inoltre, la finestra del debugger viene compilata con varie informazioni sul “contesto” corrente. Spostando il mouse su qualsiasi variabile si apre una finestra pop-up simile a quella mostrata nella figura appena riportata. Se l’elemento in questione è un oggetto, verrà visualizzata una vista ad albero. Questo consente di approfondire le singole variabili ed e rende, grazie all’utilizzo di questo tool web, molto più veloce il processo

Le variabili globali vengono visualizzate nel nodo. Bisogna fare clic e attendere un secondo o due; il suo popolamento non può essere realizzato istantaneamente a causa del numero di elementi, mentre la casella di testo Filtro nella parte superiore dello schermo è altamente raccomandata per la sua usabilità.

Poiché la compilazione dell’intero albero di stato è lenta, alcuni campi vengono visualizzati come (…). Fate doppio clic su uno di questi attributi per caricare il suo valore. Infine, usate l’albero delle call per scoprire dove siete.

Esecuzione avanzata con gli strumenti di sviluppo web Google

Posizionare breakpoint dappertutto è inefficiente. Analizzate il flusso di una variabile facendo clic sui tre puntini accanto al pulsante blu Play: questo consente di eseguire una singola riga o di tornare da una funzione mantenendo attivo il debugger durante il procedimento. Questo è utile per cercare i cambiamenti di valori mentre un algoritmo è in esecuzione.

Un altro trucco prevede l’uso di breakpoint condizionali. Chrome ne supporta una mezza dozzina, la tabella seguente li descrive.

L’impostazione di questi viene eseguita al di fuori del debugger. Nel caso dell’albero DOM, ad esempio, un nodo deve essere selezionato nella vista Elemento. È quindi possibile specificare che una sessione di debug debba essere avviata ogni volta che cambia il contenuto di tale nodo.

Fornire una panoramica di tutte le modalità di trigger richiederebbe un libro a parte. Terminiamo, quindi, questa breve guida con un riferimento a developers.google.com/web/tools/chrome-devtools/javascript/breakpoints : fornisce un’eccellente panoramica delle possibilità.

Strumenti di sviluppo web Google: la modalità device

Sebbene l’emulazione completa dei dispositivi mobili su Chrome sia impossibile anche con tutti i tool di sviluppo web, la Modalità dispositivo semplifica la vita: prima di tutto, bisogna fare clic sul piccolo logo dello smartphone mostrato nell’angolo in alto a sinistra della schermata Strumenti per sviluppatori. Chrome adatta la visualizzazione in modo simile a quanto mostrato nella figura.

Le caselle combinate nella parte superiore dello schermo consentono di scegliere vari dispositivi comunemente usati che vanno dal vecchio Samsung Galaxy S5 a prodotti più recenti come l’iPhone X. Bisogna ricordare che questa funzione non cambia il motore di rendering. Il browser fa la sua magia semplicemente regolando le dimensioni della visualizzazione. Questa limitazione si applica anche alla rotazione dello schermo, abilitata tramite il pittogramma Rotazione nella barra degli strumenti. Insomma gli Strumenti di sviluppo web Google non riescono ad riprodurre esattamente il device mobile.

Le app mobili solitamente utilizzano i dati provenienti dai sensori. Chrome può emularle: apri il menu di Developer Tools, quindi, seleziona Altri strumenti> Sensori. La finestra della console occupa un riquadro aggiuntivo con le impostazioni del sensore e fornisce accesso a geolocalizzazione, accelerometro e input tattile avanzato.

Per completezza, è importante sottolineare che i test sul desktop non possono sostituire quelli sui dispositivi, anche se si utilizzano i migliori strumenti di sviluppo web.

Al momento, Google non ha “unificato” i vari aspetti della modalità dispositivo – come viene spiegato in modo esauriente qui. Le varie funzioni potrebbero sicuramente giovare dall’ottenere una nuova interfaccia utente in futuro.

Tool web, cos’è la console?

Inviare informazioni di log semplicemente tramite console.log sa tanto di anni 90. Perché non utilizzare invece alcune funzionalità più avanzate? Una delle caratteristiche principali di Android èil  LogCat: gli sviluppatori possono emettere messaggi di registrazione con vari livelli di gravità. Chrome supporta anche questa funzione. Basta usare uno dei seguenti metodi:

La console di Google Chrome non si limita alla visualizzazione delle informazioni, permette anche di interagire con il contenuto del sito web in modo simile a PowerShell o BASH. Quando si lavora sul codice, bisogna fare attenzione a guardare la casella combinata nella parte superiore dello schermo.

Consente di selezionare la posizione in cui verrà eseguito JavaScript: molti tipi di contenuti nei loro iframe; non possono essere raggiunti dal codice inserito nel contesto di esecuzione superiore. Una volta selezionata l’area di esecuzione corretta, la modifica del contenuto degli elementi è facile come inserire un singolo comando:

La console di Chrome tende ad “annegare” quando i progetti diventano complessi e la questione viene affrontata collegando messaggi simili. Fate clic su un pulsante cinque volte ed emettete lo stesso messaggio ogni volta: verrà visualizzato una volta. Disabilita questa funzione aprendo Impostazioni > Generali, quindi selezionate l’opzione per mostrare il timestamp; in alternativa, introduci i tag e utilizza la funzione Filtro.

Strumenti di sviluppo web: Analisi avanzata ed errori di codice

Trovare errori di codice è solo una parte della partita e, man mano che le applicazioni diventano più complesse, sorgono problemi di memoria, prestazioni e consumo della rete. Chrome assiste nell’affrontare questi problemi grazie a un set completo di funzioni di analisi avanzate per rintracciare i problemi di prestazioni.

Il browser fornisce analizzatori simili ai profiler presenti nei sistemi operativi integrati. Ad esempio, l’analizzatore di memoria fornisce una panoramica di quale parte del codice alloca la memoria. Questa informazione consente ottimizzazioni mirate.

Aprire la scheda Prestazioni consente di rallentare sia la rete che la CPU: in questo modo, la workstation simula computer più lenti. Combinando questa funzione con l’analisi del consumo di tempo, come spiegato a questo link, e si ottiene una visione a 360 gradi delle prestazioni dell’applicazione.

Sviluppo Material Design

Il Material Design di Google è stato inizialmente visto come solo un’altra riprogettazione dello stack della GUI, ma col passare del tempo, gli utenti hanno iniziato ad adottare l’approccio alla progettazione tipografico-centrica. Le tecnologie come le applicazioni web progressive richiedevano la presenza di una versione JavaScript.

Dato che gli stack della GUI JavaScript sono piuttosto comuni, Google non ha dovuto affrontare un compito difficile. Il modo preferito per includere i componenti di Material Design riguarda l’npm; non è facile ed ecco perché iniziamo con un semplice esempio.

Material design, da dove iniziare la programmazione

Testare la funzionalità del framework aggiungendo un pulsante al corpo della pagina:

I componenti di Material Design si comportano come la maggior parte degli altri stack della GUI JavaScript. Gli sviluppatori aggiungono widget alla pagina, le classi CSS assicurano che la decorazione venga implementata, infine, una chiamata JavaScript prevede il collegamento di handler di eventi.

Per proseguire

Gli sviluppatori esperti hanno bisogno solo di un’occhiata a mdc.ripple.MDCRipple per vedere la fonte del problema. I file JavaScript e CSS che abbiamo incluso provengono da un progetto complesso. Il modo più efficace consiste nel caricare l’intero framework sulla macchina.

Prima di tutto, bisogna ottenere la toolchain e fare il deploy in un progetto Node:

L’effettivo deployment dei moduli avviene tramite WebPack. Apri Package.json e aggiungi il seguente markup per configurare il flusso di lavoro:

 

WebPack si controlla tramite un file chiamato webpack.config.js. Crealo nella cartella contenente il package.json – un’installazione completa che gestisce tutte le funzionalità ha il seguente aspetto:

WebPack trasforma il codice inseguendolo attraverso una sequenza di processori, ognuno dei quali può assumere uno o più parametri.

Nel nostro caso, entrambi gli elementi CSS e JavaScript devono essere elaborati. In teoria, lo stack WebPack è pronto per essere eseguito a questo punto, purtroppo il processo di compilazione fallirà a causa della mancanza di risorse di input, come mostrato nell’immagine sopra.

Aggiungere componenti

Ora che è stato impostato il flusso di lavoro principale, si possono aggiungere i singoli componenti necessari per creare l’app. Vogliamo costruire un piccolo calcolatore di resistenza, che richiede il caricamento di un gruppo di widget:

Google “abbellisce” la situazione suddividendo il framework in centinaia di pacchetti. Nel caso della nostra casella di testo, ad esempio, devono essere presenti più sotto-elementi. Purtroppo, la documentazione non dice nulla a riguardo.

Nel passaggio successivo, si creano i due “contenitori”, che fungono da input per lo stack WebPack descritto sopra:

WebPack dovrebbe ora segnalare che il processo di compilazione ha funzionato:

Aggiungere widget

WebPack elimina le parti “non necessarie” dall’output compilato. L’aggiunta di widget inizia in app.scss, che ora deve assomigliare a questo:

In linea di principio, abbiamo bisogno di una inclusione per ogni componente che il nostro programma prevede di caricare. Dato che sia la casella di testo che il pulsante sono dotati di pochi colleghi, abbiamo bisogno di un totale di quattro righe di include. L’effetto a catena usato prima è ancora più complesso – lo ometteremo per ora.

Quindi, bisogna intervenire su un file denominato index.html. Funziona come punto di accesso principale e deve caricare i vari file di script emessi dal processo WebPack:

Infine, crea un file chiamato app.js. A questo punto, immetti nuovamente l’npm per verificare che la configurazione funzioni ancora. WebPack emette un URL simile a http: // localhost: 8080. I risultati del pacchetto possono essere scaricati tramite un server che vive in npm. Non dimenticare, tuttavia, di riavviare il server dopo aver modificato i file, poiché WebPack non rileva le modifiche.

Creare widget

Ora che il server è in esecuzione, bisogna tornare su index.html e sostituire il messaggio Hello World con un po’ di markup:

Proprio come nel caso del pulsante, una casella di testo è composta anche da un gruppo di attributi. Uno di questi mostra un suggerimento con informazioni su cosa inserire, mentre l’altro supporta l’animazione.

Tuttavia, per far funzionare le animazioni è necessario modificare app.js:

Questo snippet di codice è interessante poiché colpisce tutte e tre le caselle di testo in un colpo: Google ha progettato l’API per spazzare via interi selettori CSS in una volta sola.

A questo punto, il programma è pronto per essere eseguito – si presenterà come nella figura riportata.

La conclusione del nostro piccolo calcolatore richiede l’aggiunta di listener di eventi JavaScript.

Integrare i widget di Material Design nelle applicazioni richiede sicuramente un po’ di lavoro, ma il successo è sostanziale e sicuramente ne vale la pena.

Per approfondire è possibile visitare il sito dedicato Material Design.

 

Sviluppo web: usa HTTP

Idealmente pwas deve essere servito su HTTPS. Ciò impedisce fastidiosi attacchi man-in-the-middle, che si verificano spesso sulle reti Wi-Fi pubbliche.

Sviluppo web: cosa dire di AMP?

AMP – abbreviazione di Accelerated Mobile Pages – è una tecnologia completamente diversa con un simile insieme di obiettivi. Mentre i PWA creano esperienze utente ricche, un AMP è uno snippet di contenuti basati su JavaScript destinati a essere visualizzati nei risultati di ricerca.

In linea di principio, gli AMP vivono di un sottoinsieme di HTML, che contiene espansioni volte ad accelerare il rendering. Ad esempio, un’immagine AMP contiene proprietà aggiuntive. Consentono il completamento del processo di rendering prima che sia disponibile il file di immagine effettivo. JavaScript è gestito da una libreria dedicata che impone il multithreading in una maniera non dissimile da quella vista sulla piattaforma Metro. Infine, un sistema di memorizzazione nella cache CDN opzionale di Google garantisce che i contenuti vengano consegnati con un ritardo minimo.

L’implementazione degli AMP porta benefici nelle classifiche di ricerca mobile: se il tuo sito è dipendente dal SEO, investire qualche sforzo in tal senso potrebbe ripagare.

Strumenti si sviluppo web: cos’è Firebase?

Mentre fornire lo storage, inizialmente, non è un problema, la rapida crescita del sito web di solito porta a problemi di ridimensionamento. Fortunatamente, l’implementazione del servizio di archiviazione di Google Firebase è un modo rapido per aggirare il problema. Inoltre, Google offre anche soluzioni di autenticazione dei dati leader del mercato, con il cloud computing e la gestione dei dati in tempo reale.

La distribuzione del servizio di autenticazione di Google è vantaggiosa in quanto toglie il peso superfluo agli utenti finali: invece di dover ricordare più account utente per ciascun sito, un account Google o Facebook può essere utilizzato in modalità cross-service. Google può anche occuparsi della verifica del numero di telefono e di problemi simili a un costo modesto.

La nota funzionalità di messaggistica Cloud non dovrebbe essere nuova per gli sviluppatori esperti di Android: l’accesso alle API può essere effettuato anche dal web, garantendo così un grado di parità delle funzionalità con le PWA. Iniziare a cimentarsi con Firebase in JavaScript non è particolarmente difficile. Questo link fornisce alcune istruzioni utili.