Una guida agli strumenti Web di Google

Sep 17, 2025
Come si fa

Big G, AKA Google, fornisce agli sviluppatori una pletora di strumenti destinati a rendere facile il web design. In questo articolo, passiamo attraverso alcuni dei migliori utensili di Google là fuori e ti mostriamo come usarli nel flusso di lavoro del web design e sviluppo.

Stiamo coprendo una gamma di diversi Strumenti di progettazione Web. Qui, quindi abbiamo diviso il contenuto in pagine per rendere più facile navigare. Utilizzare il menu a discesa sopra per passare alla sezione a cui ti interessa. Vuoi progettare un sito utilizzando un fornitore diverso? Le nostre guide a. web hosting e il top. Builder del sito web Hai coperto.

Finché i siti Web non sono minificati, il loro contenuto può essere visualizzato da chiunque. I devTools di Chrome rendono questo semplice - in questa pagina, ti mostriamo come visualizzare e modificare HTML, CSS e JavaScript. Su pagina 2 , prendiamo uno sguardo più da vicino su come utilizzare il debugger di Google per correggere gli errori di codifica rapidamente e facilmente. Pagina 3. Mette i riflettori sulla modalità dispositivo di Google, che è possibile utilizzare per testare le versioni mobili delle tue pagine tramite la macchina desktop. Su Pagina 4. Introduciamo le nozioni di base necessarie per essere consapevoli di iniziare a implementare i principi di progettazione dei materiali nei tuoi progetti. Infine, Pagina 5. Guarda le app progressive web, l'ultima grande cosa nel settore del web design.

Visualizza e cambia HTML, CSS & AMP; Js.

Finché il codice del sito web non è stato minificato, può essere visualizzato da chiunque utilizzi gli strumenti per gli sviluppatori di Chrome. Prima di tutto, controlla la versione di Chrome - i seguenti passaggi funzionano sulla versione 70.0.3538.67 in esecuzione su una workstation Ubuntu a 64 bit. Quindi, apri il menu Hamburger e fai clic su Altri strumenti e GT; Strumenti di sviluppo.

Launch Google's Developer Tools

Avvia gli strumenti sviluppatori e dovresti vedere una schermata simile a questo [Fare clic sull'icona in alto a destra per ingrandire]

Il browser risponde aprendo un pannello sul lato sinistro del tuo schermo. Dovrebbe essere ridimensionato nel primo passo: per impostazione predefinita, il browser non assegna abbastanza spazio per lo schermo. Al termine, lo schermo sembra simile a quello mostrato nell'immagine sopra.

Per impostazione predefinita, gli strumenti dello sviluppatore si avvia con la scheda Console caricata. Contiene l'uscita emessa da invocazioni della funzione di registrazione della console. Anche gli errori di rendering mostrano lì - se trovi linee rosse, qualcosa è sbagliato nel markup o nel codice della tua pagina. Un clic sul piccolo 'URL' sul lato destro ti porta alla linea, che ha causato il messaggio di presentarsi.

Ispezionare il markup.

Se il tuo interesse si concentra su Markup, usa la scheda Elementi mostrati nella figura. Mostra il markup il browser attualmente rende. È possibile espandere e compattarlo in modo simile a una vista ad albero - nascondere elementi non necessari per prevenire il sovraccarico sensoriale.

Il Ragione d'essere della scheda è la visualizzazione della struttura CSS. I widget 'raccolgono' CSS da varie fonti, che vengono visualizzate ordinatamente e accanto all'altra. Nel caso dell'esempio mostrato nella figura, vediamo che gli stili sono stati forniti sia dal tag "div" che dal marchio "principale" della pagina.

Chrome ti consente di modificare la maggior parte degli attributi al volo. Fare doppio clic su uno dei testi neri per trasformare l'etichetta in un editor, quindi inserire il valore appena desiderato e premere il tasto di ritorno. Il renderer prende queste modifiche e li applica al DOM al volo. Questo è particolarmente utile quando si cerca di ottimizzare i colori o i problemi di collocamento; Dovendo ricaricare una pagina per l'anteprima delle modifiche diventa noiose.

Google's web tools

Uno sfondo giallo indica che il contenuto della finestra è soggetto a filtraggio [Fare clic sull'icona in alto a destra per ingrandire]

Infine, dai un'occhiata alla casella di testo in cima al riquadro. Consente di filtrare gli elementi di markup visualizzati: ad esempio, inserire 'MDC' per limitare la vista a tutti gli stili ereditati dalla libreria di progettazione del materiale utilizzata in seguito in questo articolo. Quando un filtro è attivo, uno sfondo giallo si presenta in modo simile a quello mostrato sopra.

Eseguire un'analisi dettagliata

Nei moderni browser Web, il DOM non è limitato a problemi di presentazione "statica". Governa anche il flusso e il posizionamento degli eventi. Passa alla scheda calcolata per rivelare un elenco di proprietà "dimensionali". Questo è incredibilmente utile quando si organizzano widget sullo schermo in modo esatto.

Passare alla scheda Listener eventi fornisce una panoramica dei flussi di eventi. Utilizzare questa funzione per uscire rapidamente problemi relativi all'interazione dell'utente: se un evento non si attiva, inizia a verificare i collegamenti del gestore di eventi.

Infine, la finestra Proprietà ti consente di dare un'occhiata agli attributi memorizzati all'interno dei singoli nodi DOM. Se hai mai speso molto tempo a caccia di codice Dom-Manipulating, il valore è chiaro.

Pagina successiva: come utilizzare il debugger di Google

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

Pagina corrente: Visualizza e cambia HTML, CSS & AMP; Js.

Come si fa - Articoli più popolari

Come modificare un video su Tiktok

Come si fa Sep 17, 2025

(Immagine di credito: Mabel Wynne) Imparare a modificare un video su Tiktok probabilmente non sarebbe stato qualcosa ..

Come creare un logo in Photoshop

Come si fa Sep 17, 2025

Prima di iniziare con come creare un logo in Photoshop, dovremmo indirizzare l'elefante nella stanza - Photoshop cc. ..

Stile un sito usando Sass

Come si fa Sep 17, 2025

Puoi fare molto con CSS - forse più di quanto tu possa pensare - ma il venerabile lingua del foglio di stile ha i suoi limiti. I..

Crea quantità specifiche stili e layouts

Come si fa Sep 17, 2025

In questo tutorial daremo un'occhiata ai modi di cambiare gli stili di elementi di CSS, oltre a styling apparentemente i loro gen..

Crea un effetto testo wobbly con JavaScript

Come si fa Sep 17, 2025

L'introduzione di effetti al testo e alla tipografia può aggiungere una prospettiva completamente nuova al esperienza ut..

Inizia con la ruggine

Come si fa Sep 17, 2025

Pagina 1 di 2: Pagina 1 Pagina 1 Pagina ..

Aggiungi un effetto glitch al tuo sito web

Come si fa Sep 17, 2025

Un ottimo modo per attirare l'attenzione - e continua a tenerlo - è creare un Layout del sito web Questo mostra i tuoi talenti dal l..

12 Suggerimenti per l'illuminazione 3D realistica

Come si fa Sep 17, 2025

L'illuminazione è fondamentale in qualsiasi 3D Art. Progetto su cui lavori. A livello più elementare, è un modo..

Categorie