Skip to content

Si parla spesso di strumenti SEO e di quale sia il migliore, credo quindi che valga la pena parlare dei DevTools, una suite gratuita di strumenti di analisi presente in Google Chrome che ogni SEO dovrebbe conoscere ed utilizzare.

Nei convegni a cui partecipo e nei vari blog che seguo di rado sento parlare degli strumenti a disposizione nei browser e non capisco perché: c’è un mondo qui dentro e si potrebbe parlare per giorni di tutti i controlli che è possibile eseguire. Questa guida vuole fare ordine e chiarezza sulle principali funzioni disponibili in Chrome DevTools, cercherò di tenere aggiornate le informazioni con il progredire delle versioni di Chrome.

Firefox non è da meno, ha i suoi strumenti per sviluppatori e sono molto simili a quelli che vedremo, quindi la guida potrà servirti anche se sei un appassionato utilizzatore della volpe.

Avviare Strumenti per sviluppatori

Chrome DevTools è un set di strumenti per sviluppatori web integrato direttamente nel browser Google Chrome. DevTools può aiutarti a modificare le pagine al volo e a diagnosticare rapidamente i problemi, il che alla fine ti aiuta a costruire siti web migliori, più velocemente.

Esistono molti modi per aprire DevTools dato che gli utenti desiderano accedere rapidamente a diverse parti dell’interfaccia utente, il metodo secondo me più rapido è premere f12. Quando vuoi lavorare con il DOM o CSS, fai clic con il pulsante destro del mouse su un elemento nella pagina e seleziona Ispeziona per passare al pannello Elements. Oppure premi Command + Option + C (Mac) o Control + Maiusc + C (Windows, Linux, Chrome OS). Quando vuoi aprire la Console premi Command + Option + J (Mac) o Control + Maiusc + J (Windows, Linux, Chrome OS).

Puoi lanciare i singoli tool anche usando la linea di comando attivabile con CTRL + SHIFT + P. Tutti gli elementi che iniziano con “Panel show …” rappresentano le varie tab attivabili, puoi farti aiutare dalla funzione auto-complete.

Elements

Google Chrome Dev Tools - Elements
Google Chrome DevTools – Elements

TLTR: Visualizzare e modificare DOM e CSS

Nell’albero DOM del pannello Elements è possibile eseguire tutte le attività relative al DOM. Quando usi la funzione ispeziona elemento si apre la finestra Elements evidenziando nella sezione a sinistra la parte di DOM e, a destra, le regole CSS della classe o id dell’elemento selezionato.

In questa tab puoi modificare in tempo reale il DOM e CSS e visualizzare il risultato finale. Vuoi cambiare il colore di background per vedere come potrebbe stare? Vuoi aggiungere una regola CSS ad una classe? Qui puoi farlo senza dover modificare davvero le tue pagine.

Cos’è il DOM?

Document Object Model (DOM), letteralmente modello a oggetti del documento, è una forma di rappresentazione dei documenti strutturati come modello orientato agli oggetti. È lo standard ufficiale del W3C per la rappresentazione di documenti strutturati in maniera da essere neutrali sia per la lingua che per la piattaforma. Il DOM non è l’HTML nativo della pagina come molti credono, è l’HTML finale della pagina web, quando tutti i vari script sono stati eseguiti.

Cliccando un elemento del DOM con il tasto destro del mouse puoi nascondere l’elemento (tra le varie opzioni), oppure con il pulsante sinistro puoi trascinare un elemento per spostarlo, ad esempio puoi riordinare una ul – unsorted-list. Cliccando l’icona dello smartphone in alto a sinistra ai DevTools è possibile abilitare la funzione Device mode per emulare la navigazione da device mobile, utile ad esempio per testare design responsive e valutare layout ed esperienza utente da mobile. Per un developer queste funzioni credo siano basilari.

Si imparano molte cose usando questi strumenti e la possibilità di giocare e modificare i valori a piacimento ed in tempo reale è davvero utile sia per fare debugging sia per migliorare tutti gli elementi della pagina web (e per imparare cose nuove!).

Console

Google Chrome Dev Tools - Console
Google Chrome DevTools – Console

TLTR: Visualizza i messaggi ed esegui JavaScript dalla console.

Con la Console puoi leggere i messaggi ed eseguire Javascript. I messaggi possono essere errori di qualche script, avvertimenti oppure semplici messaggi lasciati dal developer. Gli sviluppatori web registrano i messaggi principalmente per 3 motivi:

  • Debug
  • Assicurarsi che il codice sia eseguito nell’ordine giusto.
  • Ispezionare i valori delle variabili in un determinato momento.

Prova anche tu, per mostrare un messaggio, inserisci il comando console.log (‘Ciao!’) nella console e premi invio.

Sui siti di grandi dimensioni, la Console può essere rapidamente inondata da messaggi irrilevanti. Utilizza la barra laterale sinistra della console per ridurre il rumore e concentrarti sui messaggi importanti per te. Nel blog che stai leggendo uso console.log per monitorare le attività del service worker della PWA, puoi aprire la console e verificare.

La console è anche una REPL (Read–eval–print loop). Puoi eseguire JavaScript nella Console per interagire con la pagina che stai ispezionando. Ad esempio, con le funzioni document.queryselector e textcontent puoi modificare il titolo della pagina dalla console.

Sources

Google Chrome Dev Tools - Sources
Google Chrome DevTools – Sources

TLTR: Eseguire debug di JavaScript, mantenere le modifiche apportate in DevTools anche dopo aver ricaricato la pagina, salvare ed eseguire frammenti di JavaScript ed esportare su file le modifiche apportate su DevTools.

L’interfaccia utente del pannello Sources è composta da 3 parti:

  • Il riquadro File Navigator a sinistra. Ogni file richiesto dalla pagina è elencato qui.
  • Il riquadro dell’editor del codice al centro. Dopo aver selezionato un file nel riquadro File Navigator, i contenuti di quel file vengono visualizzati qui.
  • Il riquadro Debug JavaScript. Vari strumenti per l’ispezione del JavaScript della pagina. Se la finestra di DevTools è ampia, questo riquadro viene visualizzato a destra del riquadro Editor di codice.

Con Sources gli sviluppatori possono eseguire debug dei loro script grazie a diverse funzioni specifiche come i breackpoint. I breackpoint fermano l’esecuzione di uno script ad un momento preciso che tu definisci, come ad esempio il click su un elemento. In certi casi i breackpoint sono più efficaci del semplice console.log dato che non devi modificare il codice e personalizzare ogni comando console.log con la variabile che vuoi vedere.

Selezionando nella colonna di sinistra uno script è possibile visualizzare il codice nel riquadro a fianco, editarlo e salvare con nome la nuova versione.

Network

Google Chrome Dev Tools - Network
Google Chrome DevTools – Network

TLTR: Visualizza ed esegui il debug delle attività di rete.

Il pannello Network si utilizza per assicurarsi che le risorse necessarie al rendering della pagina HTML vengano scaricate come previsto. I casi d’uso più comuni sono:

  • Assicurarsi che le risorse vengono effettivamente scaricate.
  • Ispezionare le proprietà di una singola risorsa, ad esempio intestazioni HTTP, protocollo utilizzato, tipologia di contenuto, dimensioni e così via.

Nota: se stai cercando idee per migliorare le prestazioni di caricamento delle tue pagine, non iniziare con il pannello Network. Esistono molti tipi di problemi che non sono correlati all’attività di rete. Ti consiglio di iniziare con il pannello Audit perché ti offre suggerimenti mirati su come migliorare la tua pagina.

Per visualizzare l’attività di rete generata da una pagina devi prima di tutto ricaricare la pagina. Il pannello Network registra tutte le attività di rete nel Registro di rete che contiene la lista di tutte le dipendenze scaricate dal browser. Ogni riga del registro di rete rappresenta una risorsa. Per impostazione predefinita, le risorse sono elencate in ordine cronologico (in ordine di richiesta). La risorsa principale è generalmente la prima in elenco, il documento HTML. La risorsa in basso è l’ultima richiesta. Ogni colonna rappresenta informazioni su una risorsa:

  • Stato – Il codice di risposta HTTP, utile per individuare eventuali dipendenze che restituiscono un errore 404.
  • Genere – Il tipo di risorsa, come un documento HTML, un’immagine, un pdf, un JS oppure un foglio di stile.
  • Iniziatore – Cosa ha causato la richiesta di una risorsa, potrebbe essere la pagina HTML oppure uno script. Facendo clic su un collegamento nella colonna Initiator si accede al codice sorgente che ha causato la richiesta.
  • Tempo – Quanto tempo è stato necessario per soddisfare la richiesta.
  • Cascata – Una rappresentazione grafica delle diverse fasi della richiesta: attesa, TTFB e TTLB. Passa il mouse sopra una cascata per vedere i dettagli.

Cliccando con il tasto destro su un’intestazione di colonna puoi abilitarne di nuove, io di solito voglio vedere anche il Protocollo per analizzare quale protocollo di trasmissione viene usato dal web server.

Selezionando una risorsa lo strumento visualizza dettagli specifici come l’intestazione HTTP, i tempi di download, la risposta e la preview.

Google Chrome Dev Tools - Network Headers
Google Chrome DevTools – Network Headers

Se hai abilitato gli screenshot (capture screenshot), prima del registro di rete è visibile la rendering-timeline con gli screenshot della pagina in ogni istante della fase di caricamento. Un sito veloce mostra subito all’utente gli elementi principali per interagire con la pagina, questo piccolo report può farti notare inefficienze nel rendering.

In alto alla tab Network c’è la spunta per disabilitare la cache di Chrome ed è presente anche l’opzione per il throttling, ovvero la possibilità di simulare velocità di rete differenti come 3G oppure andare totalmente offline per testare una PWA.

La tab Network è uno strumento potente che permette di ottimizzare il processo di consegna delle dipendenze: aiuta ad identificare colli di bottiglia, code eccessive di file in download, file lenti a scaricare e server lenti a rispondere.

Performance

Google Chrome Dev Tools - Performance
Google Chrome DevTools – Performance

TLTR: Trova soluzioni per migliorare le prestazioni runtime.

Utilizza il pannello Performance di Chrome DevTools per analizzare le prestazioni di runtime. Le prestazioni di runtime sono le prestazioni della tua pagina quando è in esecuzione, anziché in caricamento. In termini di modello RAIL, le informazioni fornite da questo strumento sono utili per analizzare le fasi di risposta, animazione e inattività della pagina.

I dispositivi mobili hanno una potenza della CPU molto inferiore rispetto a desktop e laptop. Ogni volta che testi una pagina, utilizza la funzione CPU Throttling per simulare il rendimento della pagina sui dispositivi mobili. Selezionando rallentamento 2x, DevTools limita la tua CPU in modo che sia 2 volte più lenta del solito.

Per avviare la registrazione delle prestazioni di runtime clicca su Record. DevTools acquisisce le metriche delle prestazioni durante l’esecuzione della pagina. Aspetta qualche secondo e fai clic su Stop. In alternativa puoi premere la freccia circolare (start profiling and reload page) e farà tutto da solo. DevTools interrompe la registrazione, elabora i dati, quindi visualizza i risultati. Ti verrà restituita una quantità enorme di dati ma non preoccuparti, (quasi) tutto avrà più senso a breve. Ora che hai registrato le prestazioni della pagina, puoi misurare il suo rendimento e trovare le cause di eventuali problemi.

Per prima cosa analizza i fotogrammi al secondo nella barra orizzontale più in alto. La metrica principale per misurare le prestazioni di qualsiasi animazione è fotogrammi al secondo (FPS). Gli utenti sono felici quando le animazioni vengono eseguite a 60 FPS. Guarda il grafico FPS, ogni volta che vedi una barra rossa significa che il framerate è sceso così in basso che probabilmente sta danneggiando l’esperienza dell’utente. In generale, maggiore è la barra verde, maggiore è l’FPS.

Sotto lo schema FPS viene visualizzato lo schema della CPU. I colori nel grafico della CPU corrispondono ai colori nella scheda Riepilogo, nella parte inferiore del pannello Prestazioni. Il fatto che il grafico della CPU sia pieno di colore significa che la CPU è stata massimizzata durante la registrazione. La CPU non dovrebbe funzionare al massimo per lunghi periodi.

Passando il mouse sopra i grafici FPS, CPU o NET, DevTools mostra uno screenshot della pagina in quel momento. Sposta il mouse a sinistra e a destra per ripetere la registrazione. Questo si chiama scrubbing ed è utile per analizzare manualmente la progressione delle animazioni.

Nella scheda Summary – Riepilogo, DevTools mostra un diagramma con le attività sul thread principale, nel tempo. L’asse x rappresenta la registrazione, nel tempo. Ogni barra rappresenta un evento. Una barra più ampia significa che l’evento ha richiesto più tempo. L’asse y rappresenta lo stack di chiamate. Quando vedi gli eventi impilati uno sopra l’altro, significa che gli eventi superiori hanno causato eventi inferiori.

Per sentirti più a tuo agio con il pannello Performance, la pratica rende perfetti. Prova a profilare le tue pagine e ad analizzare i risultati. Se hai domande sui risultati, apri una domanda Stack Overflow taggata con google-chrome-devtools. Includi schermate o collegamenti a pagine riproducibili, se possibile. Per padroneggiare davvero le prestazioni di runtime, devi imparare come il browser traduce HTML, CSS e JS in pixel su uno schermo. Il punto migliore da cui iniziare è la panoramica delle prestazioni di rendering.

Memory

Google Chrome Dev Tools - Memory
Google Chrome DevTools – Memory

TLTR: Utilizzo della memoria e ricerca delle inefficienze.

La tab Memory fornisce informazioni sull’uso della memoria da parte della pagina web, questa analisi è particolarmente utile per pagine dinamiche in costante aggiornamento. Memory può aiutarti a capire:

  • Quanta memoria attualmente utilizza la tua pagina.
  • L’utilizzo della memoria nel tempo.
  • Alberi DOM distaccati (una causa comune di perdite di memoria) con Heap Istantanee.
  • Quando viene allocata nuova memoria nell’heap JS.

Nello spirito del modello prestazionale RAIL, il focus dei tuoi sforzi dovrebbe essere rivolto alla soddisfazione dei tuoi utenti. I problemi di memoria sono importanti perché sono spesso percepibili dagli utenti. Gli utenti possono percepire i problemi di memoria nei seguenti modi:

  • Le prestazioni di una pagina peggiorano progressivamente nel tempo. Questo è probabilmente un sintomo di una perdita di memoria. Una perdita di memoria si verifica quando un errore nella pagina fa sì che la pagina utilizzi progressivamente sempre più memoria nel tempo.
  • Il rendimento di una pagina è costantemente negativo. Questo è probabilmente un sintomo di memory bloat. La memoria si “gonfia” quando una pagina utilizza più memoria di quella necessaria per una velocità ottimale della pagina.
  • Le prestazioni di una pagina laggano, sono ritardate o sembrano bloccarsi frequentemente. Questo è probabilmente un sintomo di frequenti garbage collection (raccolte di rifiuti). La garbage collection si verifica quando il browser recupera la memoria. Il browser decide quando recuperare la memoria. Durante le raccolte, tutta l’esecuzione dello script viene messa in pausa. Quindi, se il browser esegue spesso garbage collection gli script verranno bloccati spesso.

Una perdita di memoria è facile da definire. Se un sito utilizza progressivamente sempre più memoria, hai una perdita. Ma situazioni di memory bloat sono più difficili da definire. Quale limite rispettare? Quando la pagina “usa troppa memoria”? Non ci sono valori fissi, perché diversi dispositivi e browser hanno potenzialità diverse. La stessa pagina che funziona senza problemi su uno smartphone di fascia alta potrebbe bloccarsi su uno smartphone di fascia bassa. La chiave qui è usare il modello RAIL e concentrarsi sui tuoi utenti. Scopri quali dispositivi sono popolari tra i tuoi utenti, quindi prova la tua pagina su tali dispositivi. Se l’esperienza è costantemente negativa, la pagina potrebbe superare le capacità di memoria di tali dispositivi.

Application

Google Chrome Dev Tools - Application
Google Chrome DevTools – Application

TLTR: Ispeziona tutte le risorse caricate, inclusi database IndexedDB o Web SQL, archiviazione locale e di sessione, cookie, cache dell’applicazione, immagini, caratteri e fogli di stile.

Utilizza il pannello Application dedicato alle Progressive Web App per ispezionare, modificare ed eseguire il debug del file Manifest.json, dei Service Worker e della relativa cache. Con questo tool puoi fare molte analisi sulle PWA, le più importanti secondo me sono:

  • Utilizzare il riquadro Manifest per:
    • ispezionare l’omonimo file di configurazione della PWA,
    • attivare gli eventi Aggiungi alla schermata Home.
  • Utilizzare il riquadro Service Worker per tutta una serie di attività relative a questo script, come:
    • annullare la registrazione o l’aggiornamento di un servizio,
    • emulare eventi push,
    • disconnettersi o interrompere un service worker.
  • Visualizzare la cache del service worker dal riquadro Cache Storage.
  • Annullare la registrazione di un service worker.
  • Cancellare tutta la memoria e le cache con un solo clic sul riquadro Clear storage.

Nel caso tu stia implementando una PWA nel tuo sito web, Application e Audit sono i due riquadri più indicati per analisi dedicate a questa tecnologia.

Security

Google Chrome Dev Tools - Security
Google Chrome DevTools – Security

TLTR: Debug di problemi relativi a contenuti misti, problemi con i certificati e altro.

Utilizza il pannello Security in Chrome DevTools per assicurarti che il protocollo HTTPS sia implementato correttamente. Questa è la tab principale per l’ispezione della sicurezza di una pagina ed il suo certificato SSL.

Uno dei problemi più comuni che puoi trovare in questo tool viene chiamato Non-secure main origins – Pagina non sicura. Quando l’origine principale di una pagina non è criptata, la tab Security indica che questa pagina non è sicura. Questo problema si verifica quando l’URL visitato è stato richiesto su HTTP. Per renderlo sicuro è necessario richiederlo tramite HTTPS.

  • Se hai già impostato il certificato HTTPS sul tuo server, tutto ciò che devi fare per risolvere questo problema è configurare il tuo server per reindirizzare tutte le richieste HTTP su HTTPS.
  • Se non hai impostato il certificato HTTPS sul tuo server, Let’s Encrypt è una soluzione gratuita e relativamente semplice. In alternativa, potresti considerare di ospitare il tuo sito su una rete CDN. La maggior parte dei fornitori di questo servizio offrono anche certificati, ad esempio con Cloudflare puoi attivare gratuitamente un certificato basic.

Un altro problema abbastanza comune è quello del mixed-content. Il contenuto misto indica che l’origine principale di una pagina è sicura, ma la pagina ha richiesto risorse da origini non sicure, come ad esempio un file .css o un’immagine. Le pagine con contenuto misto sono protette solo parzialmente perché il contenuto HTTP è accessibile agli sniffer e vulnerabile agli attacchi man-in-the-middle.

Quindi una pagina in HTTPS che richiama una dipendenza in HTTP risulterebbe essere un mixed-content.

Audits

Google Chrome Dev Tools - Audits
Google Chrome DevTools – Audits

TLTR: Verifica performance ed usabilità delle tue pagine per trovare possibili miglioramenti.

Audit è la tab che include un importante strumento di analisi: Lighthouse. Lighthouse è un tool open source sviluppato per aiutare i webmaster a migliorare la qualità delle loro pagine web. L’applicazione viene eseguita localmente lato client, quindi puoi analizzare qualsiasi pagina, pubblica o che richiede autenticazione. Lighthouse è predisposto per eseguire diversi controlli come prestazioni, accessibilità, PWA e altro ancora.

Puoi eseguire Lighthouse in Chrome DevTools, dalla riga di comando, con PageSpeed Insights o come modulo Node. Dopo aver fornito a Lighthouse un URL per il controllo, esegue una serie di analisi sulla pagina e quindi genera un rapporto sul rendimento. Non resta che utilizzare i controlli falliti come indicatori su come conviene migliorare nella pagina. Ogni audit ha un documento di riferimento che spiega perché quello specifico aspetto è importante e come risolverlo.

More tools

Cliccando sui tre puntini verticali in alto a destra dei DevTools puoi visualizzare il menu e aprire la tendina More tools per avere accesso ad ulteriori strumenti di analisi.

Network conditions

Google Chrome Dev Tools - Network conditions
Google Chrome DevTools – Network conditions

La tab Network conditions permette di modificare tre importanti impostazioni del browser:

  • Disabilitare la cache di Chrome. Spuntando questa opzione il browser visualizzare i contenuti recuperati dal web e non precedentemente salvati in cache.
  • Throttling. Puoi modificare lo stato della rete (online/offline) e ridurre la banda per emulare device e network meno veloci.
  • User-agent. Questa funzione è molto utile, lo uso in fase di auditing di un sito web. Permette di presentarsi al web server con un differente user-agent, utile per molti scopi: testare siti web mobile dedicati (molto vintage), scoprire tecniche di cloaking oppure per verificare web server configurati con regole specifiche per user-agent.

Performance monitor

Google Chrome Dev Tools - Performance monitor
Google Chrome DevTools – Performance monitor

Performance Monitor è un tool che permette di visualizzare in tempo reale vari aspetti del carico di una pagina o delle prestazioni di runtime, tra cui:

  • Uso della CPU.
  • Dimensione heap JavaScript.
  • Il numero totale di nodi DOM, listener di eventi JavaScript, documenti e frame nella pagina.
  • Layout e ricalcoli di stile al secondo.

Se i tuoi utenti segnalano che l’app è lenta o soffre di lag, controlla la tab Performance Monitor per trovare utili indizi. Nella tab sono mostrati i grafici di utilizzo CPU, dimensione heap JS e listener di eventi JS.

Il metodo migliore per usare questo strumento è navigare il sito, scrollare le pagine ed usarlo come se fossimo un classico utente. In parallelo dobbiamo monitorare in tempo reale cosa succede ai vari indicatori. La CPU lavora troppo? Quanta memoria viene occupata dai vari script? Quanti nodi ha la pagina visualizzata? Quanti listeners sono attivi? Conoscere questi valori permette di risolvere problematiche legate all’eccessiva pesantezza del codice delle pagine web.

Coverage

Google Chrome Dev Tools - Coverage
Google Chrome DevTools – Coverage

La scheda Coverage in Chrome DevTools può aiutarti a trovare codice JavaScript e CSS inutilizzato per poterlo rimuovere. La rimozione di codice inutilizzato può accelerare il caricamento delle pagine e ridurre i dati necessari al download per gli utenti mobili.

Un avvertimento. Trovare codice inutilizzato è relativamente semplice. Ma sviluppare un sistema in grado di fornire per ogni pagina solo JavaScript e CSS di cui ha bisogno può essere difficile e il metodo di implementazione varia molto dallo stack tecnologico utilizzato. È normale che in una pagina ci siano delle regole CSS inutilizzate, il problema è quando ci sono regole che non vengono utilizzate mai, in nessuna pagina. Ad esempio i CSS dei template-builders o visual page builders, come DIVI (mannaggia a voi wannabe webmaster che li usate), sono enormi e pieni di regole che probabilmente non userai mai, in questo caso meglio editare un CSS minimal specifico per il tuo sito e sostituirlo a quello eccessivamente grande.

La presenza di JavaScript o CSS non utilizzati è un problema comune nello sviluppo web. Ad esempio, supponiamo che tu voglia utilizzare il pulsante di Bootstrap nel tuo sito non basato su Bootstrap. Per utilizzare il componente è necessario aggiungere un collegamento al foglio di stile Bootstrap nel codice HTML. Questo foglio di stile non include solo il codice per il pulsante, contiene il CSS per tutti i componenti di Bootstrap ma ne stai usando uno solo. Quindi la tua pagina sta scaricando un sacco di CSS di cui non ha bisogno. Questo CSS aggiuntivo è un problema per i seguenti motivi: il codice aggiuntivo rallenta il caricamento della pagina ed aumenta la banda necessaria.

Per avviare l’analisi Coverage premi il pulsante REC e ricarica la pagina (f5). A caricamento terminato interrompi la registrazione. La tabella nella scheda Coverage mostra quali risorse sono state analizzate e la quantità di codice utilizzato all’interno di ciascuna risorsa. Fai clic su una riga per aprire quella risorsa nel pannello Sources e visualizzare una suddivisione riga per riga del codice utilizzato e del codice non utilizzato.

Il report di base mostra i seguenti valori:

  • La colonna URL è l’URL della risorsa che è stata analizzata.
  • La colonna Tipo indica se la risorsa contiene CSS, JavaScript o entrambi.
  • La colonna Byte totali è la dimensione totale della risorsa in byte.
  • La colonna Byte inutilizzati è il numero di byte che non sono stati utilizzati.
  • L’ultima colonna senza nome è una visualizzazione delle colonne Byte totali e Byte inutilizzati. La sezione rossa della barra è di byte non utilizzati. La sezione verde rappresenta i byte utilizzati.

Slide Advanced SEO Tools Bologna 2021

Gli strumenti disponibili in Chrome sono estremamente utili nel mio lavoro quotidiano ma trovo che siano poco “sfruttati” dai colleghi. Ho quindi pensato fosse utile portare questo argomento ad un evento per mostrare alcuni casi pratici.

Di seguito trovi le slide che ho mostrato all’Advanced SEO Tools 2021 di Bologna.

Approfondimenti

Per maggiori informazioni sui DevTools fai riferimento alla guida ufficiale. Ti stai chiedendo quali sono le nuove funzionalità per sviluppatori offerte dall’ultima versione di Chrome? Su YouTube trovi una playlist ufficiale dove Kayce Basques presenta le novità di ogni nuova versione dei DevTools.

Articoli correlati

Autore

Commenti |2

Lascia un commento Lascia un commento
  1. Fabio Sermatica 8 commenti

    Ciao Giovanni,
    ora sono costretto a studiare il tuo articolo tanto è scritto bene. Grazie.

    1. Giovanni Sacheli 756 risposte

      Grazie Fabio, troppo gentile :) Mi auguro tu possa trovare qualcosa di nuovo che prima non sapevi. A presto!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ultimi articoli aggiornati

Richiedi un preventivo SEO e Google Ads

Porta il tuo sito web al livello successivo con l’expertise di EVE Milano. La nostra agenzia di Search Marketing ha ricevuto oltre 1129 richieste di preventivo, un segnale chiaro della fiducia che imprenditori e manager, come te, ripongono nella nostra specializzazione tecnica e verticale nella SEO e PPC. Se la tua organizzazione cerca competenze specifiche per emergere nei risultati di Google, noi siamo pronti a fornire quel valore aggiunto. Affidati alla nostra esperienza per fare la differenza.
Richiedi un preventivo

Non perderti altre guide, iscriviti per ricevere un avviso mensile con gli aggiornamenti del blog!

Iscriviti alla newsletter!

Informativa sui cookies

Noi e terze parti selezionate utilizziamo cookie o tecnologie simili per finalità tecniche e, con il tuo consenso, anche per le finalità di esperienza e misurazione come specificato nella cookie policy. Puoi liberamente prestare, rifiutare o revocare il tuo consenso, in qualsiasi momento, accedendo al pannello delle preferenze. Il rifiuto del consenso può rendere non disponibili le relative funzioni. Usa il pulsante “Accetta” per acconsentire. Usa il pulsante “Rifiuta” per continuare senza accettare.