Chrome DevTools – parte 2

Proseguiamo con la seconda parte sui suggerimenti su come ...

Proseguiamo con la seconda parte sui suggerimenti su come utilizzare al meglio  Chrome DevTools :

Selezione degli elementi nella console
La console DevTools supporta alcune pratiche  funzioni che selezionano gli elementi DOM:

$ () – Questo comando abbreviato, corrispondente a document.querySelector (), la console restituisce il primo elemento, corrispondente a un selettore CSS ( ad esempio $ (‘div’) restituirà il primo elemento div nella pagina ).

$$ () – Questa abbreviazione invece ( document.querySelectorAll () ) restituisce una serie di elementi che corrispondono al selettore CSS specificato.

$ 0 – $ 4 – Una cronologia dei cinque elementi DOM più recenti che hai selezionato nel pannello degli elementi, $ 0 è l’ultimo.

Scrivere su più righe contemporaneamente
Una caratteristica presente anche  in Sublime Text : per modificare un file è possibile impostare più righe tenendo premuto Ctrl (Cmd per Mac) e facendo clic nel punto in cui si desidera aggiornare il codice; consentendo così di scrivere in più posti contemporaneamente.

Conservare il registro
Selezionando l’opzione Preserve log nella scheda Console ( o network ), è possibile fare in modo che la console di DevTools mantenga il registro anziché cancellarlo ad ogni caricamento di pagina. Fuunzone utile quando si vuole approfondire  sui bug che compaiono poco prima che la pagina venga caricata.

Opzione Pretty Print {}
Gli Strumenti per sviluppatori di Chrome sono dotati di un’utile funzione di formattazione del codice che  aiuterà a rendere il codice ridotto e leggibile. Il pulsante Pretty Print si trova nella parte inferiore sinistra del file attualmente aperto nella scheda Sources.

Alla prossima puntata.

Kenji Agency : creazione  siti web a Treviso