Home-theater-designers
Chrome DevTools è una risorsa essenziale per gli sviluppatori. Mentre altri browser offrono strumenti di risoluzione dei problemi piuttosto utili, Chrome DevTools merita la tua attenzione per la sua interfaccia multifunzionale e la sua popolarità.
Chrome è il browser più popolare per gli sviluppatori grazie alla sua potente suite di strumenti di debug. Usare Chrome DevTools è facile, ma devi capire come funziona per ottenere il massimo da esso.
Come funzionano gli strumenti per sviluppatori di Chrome
Chrome DevTools ti consente di risolvere i problemi su un sito Web tramite la sua console di errore e altri strumenti di debug e monitoraggio. L'uso di DevTools espone le scappatoie del frontend e ti consente di monitorare come appare il tuo sito web su dispositivi mobili e tablet.
Con DevTools, puoi apportare modifiche in tempo reale al codice di un sito Web, come JavaScript, HTML e CSS, e ottenere risultati immediati delle tue modifiche.
Le modifiche apportate tramite DevTools non influiscono permanentemente sul sito web. Visualizzano solo temporaneamente il risultato previsto come se li avessi applicati al codice sorgente effettivo. Ciò ti consente di elaborare modi per caricare il tuo sito Web molto più velocemente e semplificare l'eliminazione dei bug.
Come accedere a Chrome DevTools
Puoi accedere a Chrome DevTools in diversi modi. Per aprire gli strumenti per sviluppatori con il metodo di scelta rapida su Mac OS, premere Cmd + Opt + I . Se stai utilizzando il sistema operativo Windows, premi il pulsante Ctrl + Maiusc + I tasti sulla tastiera.
In alternativa, puoi accedere agli strumenti per sviluppatori di Chrome facendo clic sui tre punti nell'angolo in alto a destra dello schermo. Dirigiti a Altri strumenti e seleziona Strumenti di sviluppo . Un'altra opzione è fare clic con il pulsante destro del mouse sulla pagina Web e fare clic su Ispezionare opzione.
Utilizzo degli strumenti per sviluppatori di Chrome per la diagnosi dei siti web
Chrome DevTools offre diversi modi per modificare e risolvere i problemi di una pagina web. Diamo un'occhiata ad alcuni dei modi in cui DevTools può aiutarti.
Guarda come appare il tuo sito web su uno smartphone
Una volta che il browser Chrome è passato alla modalità sviluppatore, viene visualizzata una versione dimezzata della tua pagina web. Tuttavia, questo non ti darà una visione reale di come sarebbe su uno smartphone o un tablet.
Per fortuna, oltre a impostare le dimensioni dello schermo di una pagina web, Chrome DevTools ti consente di passare anche da diversi tipi e versioni di schermo mobile.
Per accedere a tale opzione, attiva il Ispezionare modalità. Quindi, fai clic su Reattivo menu a discesa nell'angolo in alto a sinistra di DevTools e seleziona il tuo dispositivo mobile preferito. La pagina web quindi esegue il rendering e si adatta alle dimensioni del dispositivo mobile selezionato.
come tracciare la posizione del cellulare
Accedi ai file sorgente di una pagina Web
Puoi accedere ai file che compongono una pagina web tramite Chrome DevTools. Per accedere a questi file, fare clic su Fonti opzione nella parte superiore del menu DevTools. Questo espone il file system del sito Web e offre anche la modifica.
Puoi anche cercare file sorgente, il che può essere utile quando hai a che fare con una pagina web che ha molte risorse. Per cercare un file sorgente tramite DevTools, fare clic su Ricerca opzione appena sopra la console.
Tuttavia, se non riesci a trovare il Ricerca opzione, un'alternativa migliore è utilizzare le scorciatoie da tastiera. Su Mac OS, premi il tasto Cmd + Opt + F chiavi per cercare un file sorgente. Se stai utilizzando il sistema operativo Windows, premi il tasto Ctrl + Maiusc + F chiave per accedere alla barra di ricerca del file di origine.
Esegui modifiche dal vivo a una pagina Web
Uno degli scopi principali dell'utilizzo dei DevTools è quello di eseguire un modifica falsa istantanea degli elementi su una pagina web . Dopo essere passati agli strumenti per sviluppatori, è possibile modificare il contenuto HTML di un sito Web facendo clic sul pulsante Elementi opzione. Quindi, fai clic con il pulsante destro del mouse su qualsiasi punto a cui desideri applicare le modifiche all'interno dell'editor di codice e seleziona Modifica come HTML .
Per modificare le proprietà CSS che non sono in linea, seleziona Fonti . Quindi, seleziona il file CSS che desideri modificare. Posiziona il cursore sulla riga di tua scelta all'interno della console del codice per eseguire una modifica dal vivo. In questo modo avrai un feedback istantaneo su qualsiasi modifica di stile che applichi alla pagina web.
Tieni presente che quando modifichi una pagina tramite DevTools, ricaricando la pagina sul browser viene ripristinata la sua forma originale e la modifica è visibile solo a te. La modifica tramite DevTools non influisce sul buon funzionamento né sull'utilizzo di quel sito Web da parte di altri utenti.
Debug del codice JavaScript con la console DevTools
Uno dei modi migliori per eseguire il debug di JavaScript è utilizzare gli strumenti per sviluppatori di Chrome. Ti dà un rapporto diretto di script non validi e la posizione esatta del bug.
È buona norma mantenere sempre aperto DevTools durante la progettazione di un sito Web con JavaScript. Ad esempio, eseguendo il console.log() comando di JavaScript su una serie di istruzioni visualizza il risultato di quel registro nella console DevTools se il programma viene eseguito correttamente.
Per impostazione predefinita, la console segnala eventuali problemi JavaScript sul tuo sito web. Puoi trovare la console nella parte inferiore dei DevTools o accedervi facendo clic sul pulsante Console opzione nella parte superiore della finestra di Chrome DevTools.
Monitorare il caricamento delle risorse da un database
Oltre al debug di JavaScript, la console può anche fornire un dettaglio delle risorse che non vengono caricate correttamente dal database del sito web.
Anche se questo non è sempre il modo migliore per eseguire il debug dei problemi di backend, ti dice comunque quali risorse stanno tornando a 404 errore dopo aver eseguito una query di database di quegli elementi.
Correlati: errori comuni del sito Web e cosa significano
Cambia l'orientamento degli strumenti per sviluppatori di Chrome
Per modificare la posizione degli strumenti per sviluppatori di Chrome, fai clic sui tre punti del menu all'interno di DevTools (non su quello principale sul browser). Quindi seleziona la tua posizione preferita dal Lato banchina opzione.
Installa le estensioni di Chrome DevTools
Puoi anche installare estensioni specifiche per lingua o framework che funzionano con Chrome DevTools. L'installazione di queste estensioni ti consente di eseguire il debug della tua pagina web in modo più efficiente.
Puoi accedere a un elenco di estensioni disponibili per Chrome DevTools in Chrome's Estensioni degli strumenti di sviluppo in primo piano galleria.
Verifica problemi di sicurezza su un sito web
Chrome DevTools ti consente di valutare la sicurezza del tuo sito web, in base a parametri come la disponibilità di certificati di sicurezza web e quanto è sicura la connessione, tra le altre cose. Per verificare se il tuo sito web è sicuro, fai clic su Sicurezza opzione nella parte superiore di DevTools.
Il Sicurezza La scheda ti offre una panoramica dei dettagli di sicurezza del tuo sito web e ti dice qualsiasi potenziale minaccia.
Controlla il tuo sito web
Chrome DevTools ha una funzione che ti consente di controllare le prestazioni complessive del tuo sito web in base a parametri specifici.
Per accedere a tale funzione, seleziona il Faro opzione nella parte superiore della finestra DevTools. Quindi, seleziona i parametri che desideri controllare, quindi seleziona uno dei due Mobile o Desktop opzioni per vedere come si comporta la tua pagina web su piattaforme diverse.
Quindi, fai clic su Genera rapporto per eseguire un'analisi della tua pagina web in base ai parametri selezionati in precedenza.
Puoi anche valutare il tempo di esecuzione o le prestazioni di caricamento di un sito Web facendo clic sul pulsante Prestazione opzione. Per eseguire un test, fare clic sull'icona accanto al Fare clic sul pulsante di registrazione opzione per eseguire un'analisi in fase di esecuzione. In alternativa, fai clic sul pulsante di ricarica sotto di esso per valutare le prestazioni del tempo di caricamento. Clicca su Fermare per arrestare l'analizzatore e visualizzare i risultati.
Approfitta di Chrome DevTools
A seconda di cosa ti serve, Chrome DevTools ti consente di fare molto di più del semplice debug del sito web. Per fortuna, DevTools è facile da usare per i programmatori di tutti i livelli. Puoi anche imparare alcune nozioni di base sullo sviluppo del frontend del sito web cercando il codice sorgente dei siti web che visiti.
come riparare il tocco fantasma su iPhone
Potresti anche scoprire alcune altre opzioni che non abbiamo discusso in questo articolo. Quindi, sentiti libero di giocare con le funzionalità disponibili. Inoltre, modificare queste funzionalità non danneggia un po' un sito web.
Condividere Condividere Tweet E-mail Come utilizzare Chrome OS su un Raspberry PiNon puoi permetterti un Chromebook? Cerchi un'alternativa a Raspbian? Ecco come installare una versione di Chrome OS sul tuo Raspberry Pi.
Leggi Avanti Argomenti correlati- Internet
- Programmazione
- HTML
- Sviluppo web
- JavaScript
- Google Chrome
Idowu è appassionato di qualsiasi tecnologia intelligente e produttività. Nel tempo libero gioca con la programmazione e quando si annoia passa alla scacchiera, ma ama anche staccare ogni tanto dalla routine. La sua passione per mostrare alle persone la tecnologia moderna lo motiva a scrivere di più.
Altro da Idowu OmisolaIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti