Google Chrome è uno dei popolari browser Web per lo sviluppo web, grazie alle sue funzionalità avanzate. Strumenti per sviluppatori di Chrome può essere molto utile durante il debug. Molti di noi già sanno che possiamo modificare il live CSS utilizzando Chrome Dev Tools, ma ci sono altri suggerimenti che condivideremo con voi oggi.
Suggerimenti per gli strumenti di sviluppo di Chrome
Ci sono molti trucchi sconosciuti e nascosti di Chrome Dev Tools e vedremo tra i trucchi più utili. Per aprire gli strumenti per sviluppatori in Chrome, premere F12 sulla tastiera e prova i seguenti trucchi.
1. Trova e apri qualsiasi file
Quando facciamo lo sviluppo web ci occupiamo di molti HTML, CSS, JS e altri file. Quando vogliamo eseguire il debug di qualsiasi cosa, apriamo gli strumenti di Chrome Dev. Puoi cercare e trovare rapidamente il file particolare per semplificare il tuo lavoro. Basta, premere Ctrl + P e inizia a digitare il nome del file. Questo ti aiuta a trovare il particolare file dall'elenco dei file.
2. Cerca all'interno del file sorgente
Nel trucco precedente, siamo venuti a sapere come cercare un particolare file. Puoi anche cercare una stringa particolare in tutti i file caricati. stampa CTRL + MAIUSC + F per cercare una stringa nei file. Supporta anche le espressioni regolari.
3. Vai a una linea specifica
Una volta aperto qualsiasi file sorgente e vuoi spostarti su una particolare linea, premi Ctrl + G e dare il numero della linea e premere invio.
4. Selezione di elementi DOM nella scheda Console
Dev Tools consente anche di selezionare elementi nella console.
- $() – Restituisce la prima occorrenza del selettore CSS corrispondente.
- $$() – Restituisce la matrice di elementi che corrispondono al selettore CSS specificato.
5. Utilizzare più pulsanti
A volte, vuoi impostare i vari riquadri in luoghi diversi e puoi farlo facilmente con gli strumenti di Chrome Dev tenendo premuto il pulsante Ctrl tasto e cliccando dove vuoi posizionarli. Quindi inizia a scrivere e vedrai che viene posizionato in vari luoghi selezionati.
6. Conserva registro
Conserva registro aiuta a mantenere il registro anche se la pagina è stata caricata. Controlla l'opzione a fianco Conserva registro nel log della console e il log è conservato. Questo mostra il log prima della pagina in download e utile per investigare sui bug.
7. Usa l'abbellitore di codice incorporato
Chrome Dev Tools ha chiamato l'abbellitore di codice incorporato bella stampa "{}". Lo strumento di sviluppo mostra il codice ridotto al minimo e non è così facile da leggere. Fare clic sul grazioso pulsante di stampa che è mostrato in basso a sinistra sul file sorgente aperto, per mostrare il file sorgente nel formato leggibile dall'uomo.
8. Il tuo sito web è mobile-friendly? Controlla qui
Chrome Dev Tools ci consente anche di verificare se un sito web è mobile friendly o meno. Puoi controllare l'aspetto del tuo sito web su vari dispositivi. Vai agli strumenti di Chrome Dev e sotto Emulazione scheda, è possibile archiviare vari dispositivi. Seleziona il dispositivo che desideri e verifica come appare il tuo sito web in quel dispositivo.
9. Emula sensori e posizione geografica
Puoi persino emulare i sensori come touch screen e accelerometri. Puoi persino emulare la posizione geografica. Per fare questo, vai su Emulazione -> Sensori.
10. Seleziona l'occorrenza successiva della parola corrente
Se si desidera sostituire la parola In tutte le occorrenze, selezionare la parola e premere Ctrl + D per selezionare l'occorrenza successiva della parola selezionata. Il, è possibile modificare quella parola in tutte le occorrenze in un colpo solo.
11. Modificare il formato colore
Basta usare MAIUSC + clic sull'anteprima del colore per modificare le alterazioni tra la formattazione rgba, esadecimale e hsl.
12. Aggiungi modifiche ai file locali attraverso lo spazio di lavoro
Siamo in grado di modificare i file sorgente e apportare alcune modifiche in CSS, Java Script e in altri file negli strumenti di Chrome Dev. Per aggiungere queste modifiche ai file locali, non è necessario copiare le modifiche incollate dallo spazio di lavoro ai file sul disco. Gli strumenti di sviluppo di Chrome ti consentono di abbinare i file e aggiornare il file locale con le modifiche apportate agli strumenti di sviluppo. Per fare ciò, fare clic con il tasto destro sul file sorgente sul lato sinistro del fonti scheda e selezionare Aggiungi cartella all'area di lavoro.
Per ulteriori informazioni sugli spazi di lavoro, vai su Chrome.com.
