Tutorial, suggerimenti, trucchi per gli strumenti di sviluppo di Chrome

Google Chrome è uno dei browser Web più diffusi per lo sviluppo Web, grazie alle sue funzionalità avanzate. Gli strumenti per sviluppatori di Chrome(Chrome Developer Tools) possono essere molto utili durante il debug. La maggior parte di noi sa già che possiamo modificare il CSS live utilizzando Chrome Dev Tools , ma ci sono altri suggerimenti che condivideremo con te oggi.

Suggerimenti e trucchi per gli strumenti di sviluppo di Chrome

Suggerimenti per gli strumenti di sviluppo di Chrome

Ci sono molti trucchi sconosciuti e nascosti di Chrome Dev Tools e esamineremo i trucchi più utili tra di loro. Per aprire gli strumenti per sviluppatori in Chrome , premi F12 sulla tastiera e prova i seguenti trucchi.

1. Trova e apri qualsiasi file

Quando ci occupiamo di 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 specifico per semplificare il tuo lavoro. Basta(Just) premere Ctrl + P e iniziare a digitare il nome del file. Questo ti aiuta a trovare il file particolare dall'elenco dei file.

trova file

2. Cerca all'interno del file di origine

Nel trucco precedente, abbiamo imparato come cercare un file particolare. Puoi anche cercare una stringa particolare in tutti i file caricati. Premi Ctrl + Shift + F per cercare una stringa nei file. Supporta anche le espressioni regolari.

Cerca all'interno dei file

3. Vai a una riga particolare

Dopo aver aperto qualsiasi file sorgente e voler passare a una riga particolare, premere Ctrl + G e fornire il numero di riga e premere invio.

Vai alla riga

4. Selezionando DOM Elements nella scheda Console

Dev Tools ti consente anche di selezionare elementi nella console.

  • $() – Restituisce(Returns) la prima occorrenza del selettore CSS corrispondente.(CSS)
  • $$() – Restituisce l'array di elementi corrispondenti al selettore CSS specificato.(CSS)

Selezione di elementi DOM

Per altri comandi della console, vai a questo post.(this post.)

5. Usa più punti di accento

A volte, vuoi impostare più punti di inserimento in luoghi diversi e puoi farlo facilmente negli 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 è posizionato in vari punti selezionati.

Utilizza più punti di inserimento

6. Conserva registro

Conserva(Preserve) log ti aiuta a mantenere il log anche se la pagina viene caricata. Seleziona l'opzione accanto a Mantieni registro(Preserve log ) nel registro della console e il registro viene conservato. Questo mostra il registro prima che la pagina sia scaricata e utile per indagare sui bug.

conserva registro

7. Usa l'abbellimento del codice integrato

Chrome Dev Tools ha l'abbellitore di codice integrato chiamato Pretty print "{}" . Lo strumento per sviluppatori mostra il codice ridotto a icona e non è così facile da leggere. Fare clic(Click) 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.

bel pulsante di stampa

8. Il tuo sito web è mobile friendly? Controllalo qui

Chrome Dev Tools ci consente anche di verificare se un sito Web è ottimizzato per i dispositivi mobili o meno. Puoi controllare come appare il tuo sito web su vari dispositivi. Vai agli strumenti di Chrome Dev e nella scheda Emulazione(Emulation ) puoi archiviare vari dispositivi. Seleziona il dispositivo che desideri e verifica l'aspetto del tuo sito Web su quel dispositivo.

mobile friendly

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

9. Emula sensori e posizione geografica(Geographical Location)

Puoi persino emulare sensori come touch screen e accelerometri. Puoi persino emulare la posizione geografica. Per fare ciò, vai su Emulation -> Sensors.

emulare sensori

10. Selezionare l'occorrenza successiva della parola corrente

Se vuoi sostituire la parola in tutte le sue occorrenze, seleziona la parola e premi Ctrl + D per selezionare l'occorrenza successiva della parola selezionata. Quindi, puoi modificare quella parola in tutte le sue occorrenze in un colpo solo.

Selezione multipla

11. Modifica formato colore

Basta usare Shift + Click sull'anteprima del colore per modificare le modifiche tra la formattazione rgba, esadecimale e hsl.

formato colore

12. Aggiungere(Add) modifiche ai file locali tramite l'area di lavoro

Siamo in grado di modificare i file di origine e apportare alcune modifiche a CSS , JavaScript e altri file negli strumenti di Chrome Dev . Per aggiungere queste modifiche ai file locali, non è necessario copiare e incollare le modifiche dall'area di lavoro ai file su disco. Gli strumenti di sviluppo di Chrome(Chrome Dev) ti consentono di abbinare i file e aggiornare il file locale con le modifiche apportate negli strumenti di sviluppo. Per farlo, fai clic con il pulsante destro del mouse sul file di origine sul lato sinistro della scheda Sorgenti e seleziona (Sources )Aggiungi cartella all'area di lavoro.(Add Folder to workspace.)

Spero questo sia di aiuto.



Edoardo Fabbri

About the author

Sono uno sviluppatore web con esperienza di lavoro sia con Windows 11 che con Windows 10. Sono anche un utente di Firefox da molti anni e sono diventato abbastanza abile nell'uso della nuovissima console di gioco Xbox One. I miei interessi principali risiedono nello sviluppo di software, in particolare nello sviluppo web e mobile, nonché nella scienza dei dati. Sono molto ben informato sui vari sistemi informatici e sul loro utilizzo, quindi posso fornire un feedback imparziale su vari programmi o servizi che potresti utilizzare.


Related posts