Gli Strumenti per sviluppatori di Chrome (DevTools) sembrano essenziali una volta che ci si abitua, ma all’inizio possono risultare un po’ complicati. Soprattutto se si cerca di curiosare nel codice di un sito web o di risolvere problemi senza alcuna esperienza di programmazione. A volte, le cose non funzionano come previsto: magari gli elementi non mostrano lo stile corretto o la pagina si carica molto lentamente. E, naturalmente, \u00e8 frustrante non riuscire a capire come aprirli senza dover esplorare i menu con un clic all’infinito. Fortunatamente, esistono alcuni metodi collaudati per aprire e utilizzare DevTools, quindi non si \u00e8 costretti a armeggiare ogni volta.<\/p>\n
Questo \u00e8 probabilmente il modo pi\u00f9 veloce, soprattutto se sei abituato ai comandi da tastiera. Su Windows o Linux, premi semplicemente Ctrl + Shift + C<\/kbd>per aprire la scheda Elementi<\/strong> e iniziare a ispezionare il contenuto. Se vuoi passare direttamente al registro della console, premi Ctrl + Shift + J<\/kbd>. E per un rapido passaggio generale, Ctrl + Shift + I<\/kbd>premi semplicemente F12<\/kbd>. Su Mac? \u00c8 praticamente lo stesso, ma scambia Ctrl<\/kbd>con Command<\/kbd>e Shift<\/kbd>con Option<\/kbd>. Ad esempio, Command + Option + C<\/kbd>apre Elementi. A volte, questo non funziona al primo tentativo, soprattutto se Chrome \u00e8 ostinato o se stai usando un layout di tastiera strano: riprova o riavvia Chrome se necessario.<\/p>\n Onestamente, queste scorciatoie sono una vera salvezza: \u00e8 un po’ strano che non siano pi\u00f9 evidenti, ma una volta memorizzate, sono pi\u00f9 veloci che cliccare sui menu.<\/p>\n Meno subdolo, ma altrettanto utile, \u00e8 cliccare con il tasto destro del mouse su un elemento qualsiasi di una pagina web e scegliere “Ispeziona”<\/strong>. Invece di dover scorrere i menu, si apre immediatamente DevTools ed evidenzia l’elemento nella scheda Elementi<\/strong>. In alternativa, clicca sul menu a tre puntini nell’angolo in alto a destra di Chrome, vai su ” Altri strumenti”<\/strong>, quindi seleziona “Strumenti per sviluppatori<\/strong> “.Questo metodo \u00e8 utile se non ti piacciono le scorciatoie o vuoi risparmiare un po’ di tempo cliccando qua e l\u00e0.<\/p>\n Se Chrome non si apre immediatamente o gli strumenti per sviluppatori non mostrano ci\u00f2 che ti aspetti, verifica che il tuo browser Chrome sia aggiornato. A volte, bug o versioni obsolete possono interferire con il corretto funzionamento degli strumenti per sviluppatori.<\/p>\n Molti sviluppatori e persone un po’ curiose usano DevTools per una vasta gamma di attivit\u00e0: ispezionare il codice HTML delle pagine, eseguire il debug di JavaScript, controllare le richieste di rete o persino testare l’aspetto delle loro pagine su diversi dispositivi. Ma tieni presente: qualsiasi modifica apportata \u00e8 solo temporanea. Ricarica la pagina e tutto verr\u00e0 ripristinato. Tuttavia, \u00e8 molto utile per provare soluzioni rapide o vedere cosa non va prima di modificare il codice base vero e proprio.<\/p>\n \u00c8 utile familiarizzare con le schede principali:<\/p>\n Vuoi vedere come appare il tuo sito su smartphone o tablet? Fai clic sul pulsante di attivazione\/disattivazione del dispositivo (la piccola icona dello smartphone) in DevTools, oppure premi Ctrl + Shift + M<\/kbd>. Puoi selezionare dispositivi preimpostati da un menu a discesa, come iPhone o Pixel, oppure impostare dimensioni personalizzate per testare schermi di dimensioni insolite. Di solito, questo aiuta a individuare problemi di layout che potrebbero sfuggire su un monitor di grandi dimensioni.<\/p>\n Ti sei mai chiesto perch\u00e9 il tuo sito sembra lento? Vai alla scheda Rete<\/strong>, aggiorna la pagina e vedrai tutte le richieste effettuate per caricarla. Guarda in basso: DOMContentLoaded<\/strong> e Tempi di caricamento<\/strong> indicano quanto tempo ci \u00e8 voluto per caricare l’HTML rispetto a tutto il resto. Se questi tempi sono elevati, forse alcune immagini sono troppo grandi o il tuo hosting \u00e8 lento. Puoi anche simulare connessioni pi\u00f9 lente dal menu a discesa “Throttling”, utile se vuoi vedere come funziona su dispositivi di fascia media.<\/p>\n Un altro strumento a tua disposizione \u00e8 Lighthouse, accessibile tramite il menu (icona a doppia freccia > Lighthouse<\/strong> ).Esegui un rapido audit SEO, un controllo delle prestazioni o una revisione delle best practice.\u00c8 un po’ come fornire un report sullo stato di salute del tuo sito web. Modifica le impostazioni in base al dispositivo di destinazione, scegli categorie come SEO ed esegui l’audit. I risultati richiedono in genere circa 30 secondi, ma possono fornire utili indicazioni su come correggere i meta tag, la struttura dei contenuti o i problemi di caricamento.<\/p>\n Consiglio: la documentazione di Chrome ([qui](https:\/\/developer.chrome.com\/docs\/devtools\/)) \u00e8 piuttosto dettagliata se vuoi andare oltre le basi.<\/p>\n Nel complesso, una volta acquisita familiarit\u00e0 con queste opzioni, usare DevTools diventa una seconda natura. Non \u00e8 perfetto \u2013 a volte \u00e8 lento o pieno di bug \u2013 ma in definitiva \u00e8 il modo pi\u00f9 veloce per risolvere i problemi e migliorare il tuo sito web senza dover aspettare gli sviluppatori o scrivere codice da zero.<\/p>\n Prendere confidenza con gli Strumenti per sviluppatori di Chrome apre molte possibilit\u00e0, sia per il debug che semplicemente per capire come sono costruiti i siti. All’inizio potrebbe essere un po’ macchinoso, soprattutto su alcune configurazioni, ma una volta che ci si abitua, fa risparmiare un sacco di tempo. E poi, se un po’ di pratica risparmia ore di frustrazione, ne vale assolutamente la pena. Incrociamo le dita affinch\u00e9 questo aiuti qualcuno a iniziare senza troppi problemi.<\/p>\n","protected":false},"excerpt":{"rendered":" Gli Strumenti per sviluppatori di Chrome (DevTools) sembrano essenziali una volta che ci si abitua, ma all’inizio possono risultare un po’ complicati. Soprattutto se si cerca di curiosare nel codice di un sito web o di risolvere problemi senza alcuna esperienza di programmazione. A volte, le cose non funzionano come previsto: magari gli elementi non […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-13000","post","type-post","status-publish","format-standard","hentry","category-how-to"],"acf":[],"_links":{"self":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts\/13000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/comments?post=13000"}],"version-history":[{"count":1,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts\/13000\/revisions"}],"predecessor-version":[{"id":13001,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/posts\/13000\/revisions\/13001"}],"wp:attachment":[{"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/media?parent=13000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/categories?post=13000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howtogeek.blog\/it\/wp-json\/wp\/v2\/tags?post=13000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Utilizzo del menu Chrome: nessuna scorciatoia necessaria<\/h3>\n
Come sfruttare al meglio Chrome DevTools<\/h2>\n
\n
Prova i test di progettazione reattiva<\/h3>\n
Controlla la velocit\u00e0 e le richieste del tuo sito<\/h3>\n
Che ne dici di SEO e audit di base?<\/h3>\n
Riepilogo<\/h2>\n
\n
Incartare<\/h2>\n