Come aprire gli strumenti di sviluppatori di Google Chrome?
Google Chrome Developer Tools è un'ottima caratteristica di Google Chrome per gli sviluppatori Web. È un insieme di strumenti direttamente integrato a Google Chrome per aiutare gli sviluppatori a apportare modifiche alla pagina web e diagnosticare i problemi con i loro siti Web al volo. Aiuta gli sviluppatori web a creare e ottimizzare i siti Web più velocemente.
In questo articolo, ti mostrerò come aprire gli strumenti per sviluppatori di Google Chrome in Google Chrome e alcune delle funzionalità che offre.
Sommario:
- Apertura degli strumenti di sviluppatori di Google Chrome
- Aggancio Strumenti per sviluppatori di Google Chrome in diverse posizioni
- Alcune delle caratteristiche degli strumenti per sviluppatori di Google Chrome
- Chiusura degli strumenti per sviluppatori in Google Chrome
- Conclusione
- Riferimenti
Apertura degli strumenti di sviluppatori di Google Chrome
Un modo per aprire gli strumenti di sviluppatori di Google Chrome è da Google Chrome.
Innanzitutto, apri Google Chrome e fai clic su > Altri strumenti> Strumenti per sviluppatori dall'angolo in alto a destra di Google Chrome.
Gli strumenti per sviluppatori di Google Chrome dovrebbero essere visualizzati.
Puoi anche visitare un sito Web da Google Chrome e ispezionare un elemento dal sito Web per aprire gli strumenti per sviluppatori.
Per ispezionare un elemento da una pagina web, fare clic con il pulsante destro del mouse (RMB) e fare clic su Ispezionare.
Puoi anche premere + + C Per ispezionare un elemento da una pagina Web e aprire gli strumenti di sviluppatori di Google Chrome.
Gli strumenti per sviluppatori di Google Chrome dovrebbero essere aperti.
Allo stesso modo, puoi aprire la console degli strumenti di sviluppatori di Google Chrome premendo + + J.
Aggancio Strumenti per sviluppatori di Google Chrome in diverse posizioni
Se non si dispone di un monitor abbastanza grande, potresti non voler che gli strumenti per sviluppatori di Google Chrome siano ancorati sul lato destro di Google Chrome.
Fare clic su e selezionare una posizione di docking da Lato dock Sezione per modificare la posizione di aggancio di Google Chrome.
Strumenti di sviluppatori di Google Chrome in una finestra separata.
Dock Google Chrome Developer Strumenti a sinistra.
Dock Google Chrome Developer Strumenti verso il basso.
Dock Google Chrome Developer Strumenti a destra.
Alcune delle caratteristiche degli strumenti per sviluppatori di Google Chrome
Google Chrome Developer Tools ha alcune schede e puoi fare cose specifiche da ciascuna delle schede.
Dal Elementi Scheda, è possibile ispezionare diversi elementi dalla pagina web; Controllare gli stili CSS e le dimensioni calcolate degli elementi; apportare modifiche istantanee al DOM HTML e CSS della pagina web e consultare i risultati; e molti altri.
Dal Console Scheda, è possibile visualizzare i messaggi di registro ed eseguire i codici JavaScript.
Dal Fonti Scheda, è possibile eseguire il debug di codici JavaScript, salvare ed eseguire frammenti di codice JavaScript, persistere sulle modifiche agli strumenti di sviluppatori di Google Chrome attraverso la ricarica di pagina e salvare le modifiche apportate utilizzando gli strumenti di sviluppatori di Google Chrome sul disco.
Dal Rete Scheda, è possibile monitorare l'attività di rete, i file richiesti dalla pagina Web e il tempo necessario per caricare e eseguire il debug dell'attività di rete della pagina Web.
Dal Prestazione Scheda, è possibile registrare il tempo di caricamento della pagina e le prestazioni del sito Web. Puoi anche trovare modi per migliorarli.
Dal Memoria Scheda, è possibile monitorare l'utilizzo della memoria del tuo sito Web e risolvere i problemi di memoria insoliti.
Dal Applicazione Scheda, puoi ispezionare tutte le risorse caricate del tuo sito Web come:
- Indiceddb
- Database Web SQL
- Memoria locale
- Archiviazione della sessione
- Biscotti
- Cache dell'applicazione
- immagini
- Caratteri
- Fogli di stile
Dal Sicurezza Scheda, è possibile eseguire il debug di problemi di certificazione, problemi di contenuto misto e molti altri problemi di sicurezza del sito Web.
Dal Faro Scheda, puoi generare un rapporto del faro.
Dal Registratore Scheda, è possibile misurare le prestazioni nell'intero flusso dell'utente del sito Web.
Dal Performance Insight Scheda, è possibile ottenere approfondimenti sulle prestazioni fruibili sul tuo sito Web.
Puoi vedere come appare il tuo sito Web su dispositivi di dimensioni dello schermo diverse utilizzando il Modalità dispositivo di Strumenti per sviluppatori di Google Chrome.
Per passare a Modalità dispositivo, Fare clic sul pulsante Attiva / disattivazione.
Il tuo sito Web deve essere visualizzato in diverse dimensioni dello schermo in modalità dispositivo. Puoi modificare le dimensioni dello schermo e vedere come apparirà il sito Web sui dispositivi con quella dimensione dello schermo.
Chiusura degli strumenti per sviluppatori in Google Chrome
Per chiudere gli strumenti per sviluppatori di Google Chrome, fare clic su X.
Gli strumenti per sviluppatori di Google Chrome dovrebbero essere chiusi.
Conclusione
Ti ho mostrato come aprire gli strumenti di sviluppatori di Google Chrome e ho discusso alcune delle funzionalità degli strumenti di sviluppatori di Google Chrome. Per saperne di più sugli strumenti di sviluppatori di Google Chrome e ciascuna delle sue funzionalità, controlla i collegamenti nella sezione Riferimenti seguenti.
Riferimenti:
- Panoramica - sviluppatori Chrome
- Registrare, riprodurre e misurare i flussi degli utenti - Chrome Developer
- Performance Insights: Ottieni approfondimenti fruibili sulle prestazioni del tuo sito Web - Chrome Developer