DevTools

Snippets E Ricerca

Stampa WhatsApp Email

Snippets, ricerca e modifiche locali: Search, Command Menu, Snippets, Overrides e limiti delle modifiche al browser.

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

Snippets, ricerca e modifiche locali

Durata: 50 minuti · Chrome o browser Chromium compatibile

Search, Command Menu, Snippets, Overrides e limiti delle modifiche al browser. 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

Esplorare snippets, ricerca e modifiche locali 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 Sources → Snippets (se necessario tramite il menu del pannello).
  2. Crea uno snippet con console.log(document.title).
  3. Eseguilo e controlla il titolo della pagina nella Console.
  4. Apri la ricerca globale dei file con Ctrl+Shift+F e cerca una parola presente nella pagina.
  5. Esplora il pannello Overrides senza abilitarlo, per comprenderne lo scopo.
  6. Ricarica la pagina e verifica che lo snippet rimanga disponibile nel browser.
  7. Spiega la differenza tra eseguire uno snippet e modificare il codice del sito.
Output atteso: Lo snippet stampa il titolo; non modifica i file originali del sito.
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?
Search, Command Menu, Snippets, Overrides e limiti delle modifiche al browser.
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.