Esercizio 14: Developer Tools

Dev Tools

Per aprire i Dev tools, usate F12, Ctrl+Shift+I, o Cmd+Opt+I su un Mac.

Esercizio 1

1. Restando su questa stessa pagina, aprite i Dev Tools
2. Nella console, scrivete:

   document.designMode="on"

3. Modificate il testo dell'h1.

Esercizio 2

1. Sempre utilizzando i Dev Tools, usate il selettore
2. Andate sul box celeste, e vedete le classi che lo caratterizzano
3. Vedrete anche il margine, il padding, il font, il colore del testo...
4. Cliccando, potete vedere sulla console da cosa è costituito.
5. Cliccate su "p-3" e modificate il padding (e.g. "p-5").
6. Qualunque modifica sparirà una volta ricaricata la pagina

In fondo alla casella "Styles" potete vedere non solo quali sono le proprietà che vengono renderizzate per l'elemento, ma anche un box che vi mostra le dimensioni di un dato elemento.

Esercizio 3

1. Sempre utilizzando i Dev Tools, usate il selettore
2. Andate sul box celeste, e vedete le classi che lo caratterizzano
3. Disabilitate alcuni delle proprietà renderizzate così da vedere cosa cambia sulla pagina

In fondo alla casella "Styles" potete vedere non solo quali sono le proprietà che vengono renderizzate per l'elemento, ma anche un box che vi mostra le dimensioni di un dato elemento.

Esercizio 4

Scaricare questo zip, che contiene il materiale per il primo esericizo di oggi.

Scaricare questo zip, che contiene il materiale per il secondo esercizio di oggi.

Utilizziamo quattro importanti statement di JS per fare debugging.

1. console.log(x); è forse il più comune; serve per stampare qualcosa sulla console, una variabile etc. Per rendere più leggibile la stampa del valore spesso si utilizza insieme ad una stringa (e.g. console.log("L'output della funzione è " + x)
2. debugger; serve per dare uno stop all'esecuzione del codice, per poter controllare variabili, il flusso di chiamata, e altre informazioni di runtime. Può essere molto utile per cercare di capire il flusso di un algoritmo o per debuggare punti delicati del codice che possono essere meno chiari.
   • Si possono ispezionare variabili sia locali che globali;
   • Si può controllare passo dopo passo il codice, vedendo subito come cambiano le variabili; particolarmente utile in caso di e.g. for loops.
   • E' possibile modificare variabili e vedere come impattano il codice
   • Per poter fare tutto ciò è necessario aggiungere "debugger;" prima del punto finale del codice che si vuole controllare.

   function exampleFunction() {
   let a = 1;
   let b = 2;
   
   debugger; // This will pause the execution when the developer tools are open
   
   let c = a + b;
   console.log("The sum of a and b is:", c);
   }

   In questo caso, l'esecuzione verrà messa in pausa così da poter vedere come la funzione...funziona.

3. console.error(); serve per poter visualizzare nella console qualcosa come errore.
4. console.table(); serve per visualizzare dei dati in formato tabulare. Un esempio qui.