In precedenza, su "Oltre console.log"

In questo articolo proverò a darti alcuni suggerimenti per quanto riguarda il pannello degli elementi in DevTools.

La saggezza convenzionale dice che un pessimo operaio ha sempre pessimi strumenti. Ma un buon sviluppatore web non utilizzerà mai la console di Internet Explorer, se non per eseguire il debug di bug specifici di questo browser, che ricorda più Titanic che Queen Mary II.

Basta battute.

Trova i listener di eventi di un elemento

Ecco come devTools mi ha salvato la giornata qualche tempo fa, quando un pulsante ha chiamato una funzione che era nascosta da qualche parte in poche migliaia di righe di codice della famiglia jQuery:

Verranno visualizzati i listener di eventi dell'elemento ispezionato. Ti consiglio di spuntare la casella  “Ascoltatori di framework” apparsi di recente in DevTools, che ti permetteranno di accedere alla tua funzione e non a quella del framework (se usi jQuery, per esempio).

Solo, possiamo osservare che c'è un ascoltatore per ogni antenato. Possiamo risolvere questo problema deselezionando la casella "antenati":

A volte vogliamo sapere come e con quale funzione un elemento viene modificato/cancellato/cambia attributi. Ecco a cosa serve il menu "Dom breakpoints".

 Dopo aver scelto quale tipo di evento ascoltare, compare un punto blu:

Se selezioni il nodo, sarai in grado di vedere quali tipi di eventi hai allegato ad esso:

Elementi di padronanza: alcuni suggerimenti CSS

Quando una regola CSS ha più selettori (separati da una virgola), i selettori che corrispondono all'elemento target vengono visualizzati in nero e gli altri in grigio. Inoltre, se si passa il cursore su un selettore, gli elementi da esso interessati appariranno evidenziati nella pagina.

Proprietà ereditate

Puoi anche vedere quali regole vengono ereditate dagli elementi padre: nelle regole ereditate, puoi vedere che le proprietà ereditate vengono visualizzate normalmente, mentre le proprietà che non vengono trasmesse da genitore a figlio, come flex o display, s sono visualizzate in grigio:

Proprietà calcolate

Devtools ordina le regole CSS in base alla priorità decrescente. Pertanto, è abbastanza facile capire perché una regola non viene applicata. Ma a volte ci sono così tante regole che diventa difficile trovare quale regola ha scavalcato la proprietà che volevi assegnare. Ago, pagliaio, tosse tosse... Ecco perché non dovresti esitare a dare un'occhiata alla scheda "Calcolato" del pannello degli stili. Qui, nessuna regola, solo l'elenco delle proprietà degli elementi che sono state modificate da te, un framework o stili del browser.

Espandi una proprietà e vedrai l'elenco delle regole che la riguardano. Facendo clic sul collegamento si fa un tour del pannello delle fonti. Se, al contrario, fai clic sulla freccia che appare quando passi il cursore, verrai portato alla scheda degli stili del pannello degli elementi, proprio nel posto giusto.

Ultimo consiglio (che mi sembra ovvio, ma non si sa mai):

se vuoi che lo stile di un elemento sia come se fosse posizionato al passaggio del mouse, puoi fare clic su "Attiva/disattiva stato elemento" (pulsante (":hov" nella scheda stili):

Ancora una cosa ...

animazioni

Descrivere come funziona l'editor di animazione richiederebbe troppo tempo, quindi ti mostro solo un'immagine:

Puoi riprodurre un'animazione, modificare gli offset, ogni elemento animato ha la sua sequenza temporale... È magico. Nota che puoi anche modificare le curve di Bézier che determinano la velocità di una transizione o animazione:

Ecco, mi fermo qui. Davvero. _{Devtools ha anche uno strumento di modifica delle ombre per le proprietà box-shadow e text-shadow!}. Grazie per aver dedicato del tempo a leggermi e soprattutto non esitate a tornare tra un po' per l'episodio 3.

Julien, JS-repubblicano @JSRepublic
[actionbox color=”default” title=”” description=”JS-REPUBLIC è una società di servizi specializzata nello sviluppo di JavaScript. Siamo un centro di formazione riconosciuto. Trova tutta la nostra formazione tecnica sul nostro sito partner dedicato alla Formazione” btn_label=”La nostra formazione” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]