DevTools

Console

Stampa WhatsApp Email

Console: messaggi, livelli e filtri: Console, log/info/warn/error, livelli, Preserve log, filtri testuali, contesto e cronologia.

Console E Codice | Console
Competenze: riconoscere gli strumenti trattati, interpretarli correttamente e applicarli durante un’analisi del browser.

Console: messaggi, livelli e filtri

Durata: 50 minuti · Chrome o browser Chromium compatibile

Console, log/info/warn/error, livelli, Preserve log, filtri testuali, contesto e cronologia. Gli strumenti di sviluppo permettono di osservare ciò che accade nel browser. Le opzioni possono variare tra versioni: se una scheda non compare, cercala nel menu » oppure More tools.

Che cosa osservare e perché

Usa gli strumenti solo su pagine che sei autorizzato a esaminare. La modifica di HTML, CSS o JavaScript in DevTools è in genere locale e temporanea: non equivale a modificare i file del sito. Una richiesta o un dato non presente non è necessariamente un errore.

LABORATORIO

Analizzare console: messaggi, livelli e filtri con Chrome DevTools

Procedura guidata, circa 20 minuti

Obiettivo: applicare le funzioni studiate su una pagina già disponibile nel browser. Occorrente: Chrome, DevTools e una pagina dimostrativa o del corso.

  1. Apri Console con la scheda o il tasto Esc.
  2. Esegui 2+3 e premi Invio.
  3. Esegui console.log("prova"), console.warn("attenzione") e console.error("errore simulato").
  4. Apri il filtro dei livelli e mostra solo Warnings oppure Errors.
  5. Inserisci una parola nel filtro testuale per restringere i messaggi.
  6. Attiva Preserve log e ricarica la pagina.
  7. Cancella la console con Clear console e disattiva Preserve log.
Output atteso: 2+3 restituisce 5; i tre messaggi compaiono con livelli differenti.
Se non trovi il comando: verifica il nome della scheda e usa », More tools o il Command Menu. Se un risultato non compare, annota ciò che osservi e confrontalo con il docente; non modificare impostazioni del server.

Esercizio autonomo: ripeti l’analisi su una seconda pagina e produci una tabella con azione, scheda usata, dato osservato e interpretazione.

Verifica dei concetti

Che cosa consente di osservare questa lezione?
Console, log/info/warn/error, livelli, Preserve log, filtri testuali, contesto e cronologia.
Le modifiche effettuate in DevTools vengono pubblicate sul sito?
No: salvo strumenti e procedure specifiche di sviluppo locale, le modifiche al DOM o agli stili sono temporanee e riguardano il browser.
Perché un pannello può apparire vuoto?
Perché la pagina non utilizza la funzione, non ci sono eventi o risorse pertinenti oppure la registrazione non era attiva.
Come si recupera una scheda non visibile?
Dal menu » della barra delle schede, More tools o Command Menu; le etichette dipendono dalla versione.
Che cosa va annotato nel rapporto finale?
Azione effettuata, strumento utilizzato, evidenza osservata e interpretazione, distinguendo fatti e ipotesi.
COLLEGAMENTO CON PROTOCOLLO HTTP

Distingui gli errori JavaScript dai codici di risposta HTTP.

Apri la lezione del corso PROTOCOLLO HTTP →