Strumenti di sviluppo Chrome Tutorial, suggerimenti, trucchi

Google Chrome è uno dei browser Web più diffusi 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 Strumenti e vedremo tra i trucchi più utili. Per aprire gli strumenti per sviluppatori in Chrome, premi F12 sulla tastiera e prova i seguenti trucchi.

1. Trova e apri qualsiasi file

Quando facciamo lo sviluppo web ci occupiamo di molti file HTML, CSS, JS e altri. 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 iniziare 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. Premere Ctrl + Maiusc + F per cercare una stringa nei file. Supporta anche le espressioni regolari.

3. Vai a una particolare riga

Una volta aperto qualsiasi file sorgente e vuoi spostarti su una particolare linea, premi Ctrl + G e dai il numero della linea e premi invio.

4. Selezionando Elementi DOM nella scheda Console

Strumenti di sviluppo 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.

Per ulteriori comandi della console, vai a questo post.

5. Utilizza più riquadri

A volte, vuoi impostare i vari riquadri in luoghi diversi e puoi farlo facilmente con gli strumenti di Chrome Dev tenendo premuto il tasto Ctrl e facendo clic nel punto in cui desideri 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. Controllare l`opzione accanto a Conserva registro nel registro Console e il registro viene conservato. Questo mostra il log prima della pagina in download e utile per indagare sui bug.

7. Usa l`abbellitore di codice incorporato

Chrome Dev Tools ha l`abbellitore di codice incorporato chiamato pretty print "{}". Lo strumento di sviluppo mostra il codice ridotto al minimo e non è così facile da leggere. Fai 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? 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. Accedi agli strumenti di Chrome Dev e nella scheda Emulazione , puoi archiviare vari dispositivi. Seleziona il dispositivo che desideri e verifica come appare il tuo sito Web in quel dispositivo.

Per ulteriori informazioni, dai un`occhiata al seguente video.

9. Emulazione di sensori e posizione geografica

È anche possibile emulare i sensori come touch screen e accelerometri. Puoi persino emulare la posizione geografica. Per fare ciò, vai su Emulazione -> Sensori.

10. Selezionare la ricorrenza 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.

11. Modifica formato colore

Usa solo Maiusc + Fai clic su nell`anteprima del colore per cambiare 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ò, fai clic con il pulsante destro del mouse sul file sorgente sul lato sinistro della scheda Origini e seleziona Aggiungi cartella allo spazio di lavoro.

Per ulteriori informazioni sugli spazi di lavoro, vai su Chrome.com.