Panoramica del riquadro delle origini

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Utilizza il riquadro Fonti per visualizzare e modificare le risorse del tuo sito web, come fogli di stile, file JavaScript e immagini.

Panoramica

Il riquadro Fonti ti consente di:

Apri il riquadro Origini

Per aprire il riquadro Origini:

  1. Apri DevTools.
  2. Apri il menu dei comandi premendo:
    • macOS: Comando+Maiusc+P
    • Windows, Linux, ChromeOS: Controllo+Maiusc+P
  3. Inizia a digitare sources, seleziona Mostra riquadro Fonti e premi Invio.

In alternativa, nell'angolo in alto a destra, seleziona more_vert Altre opzioni > Altri strumenti > Fonti.

Visualizza file

Fai clic sulla scheda Pagina per visualizzare tutte le risorse caricate dalla pagina.

La scheda Pagina.

Come è organizzata la scheda Pagina:

  • Il livello superiore, ad esempio top nello screenshot precedente, rappresenta un frame HTML. Troverai top su ogni pagina che visiti. top rappresenta il frame del documento principale.
  • Il secondo livello, ad esempio developers.google.com nello screenshot sopra, rappresenta un'origine.
  • Il terzo livello, il quarto livello e così via rappresentano le directory e le risorse caricate da questa origine. Ad esempio, nello screenshot riportato sopra, il percorso completo della risorsa devsite-googler-button è developers.google.com/_static/19aa27122b/css/devsite-googler-button.

Fai clic su un file nella scheda Pagina per visualizzarne i contenuti nella scheda Editor. Puoi visualizzare qualsiasi tipo di file. Per le immagini, viene visualizzata un'anteprima.

Visualizzazione di un file nella scheda Editor.

Modificare CSS e JavaScript

Fai clic sulla scheda Editor per modificare CSS e JavaScript. DevTools aggiorna la pagina per eseguire il nuovo codice.

L'Editor ti aiuta anche a eseguire il debug. Ad esempio, sottolinea e mostra descrizioni comando di errore in linea accanto a errori di sintassi e altri problemi, come istruzioni CSS @import e url() non riuscite e attributi HTML href con URL non validi.

Una descrizione comando con errore di sintassi incorporato.

Se modifichi il background-color di un elemento, vedrai che la modifica viene applicata immediatamente.

Modifica del CSS nella scheda Editor.

Affinché le modifiche JavaScript abbiano effetto, premi Comando+S (Mac) o Ctrl+S (Windows, Linux). DevTools non esegue nuovamente uno script, quindi le uniche modifiche JavaScript che vengono applicate sono quelle apportate all'interno delle funzioni. Ad esempio, nota come console.log('A') non viene eseguito, mentre console.log('B') sì.

Modifica di JavaScript nella scheda Editor.

Se DevTools ha eseguito di nuovo l'intero script dopo aver apportato la modifica, il testo A sarebbe stato registrato nella console.

DevTools cancella le modifiche CSS e JavaScript quando ricarichi la pagina. Consulta Configurare un workspace per scoprire come salvare le modifiche al file system.

Creare, salvare ed eseguire snippet

Gli snippet sono script che puoi eseguire su qualsiasi pagina. Immagina di digitare ripetutamente il seguente codice nella console per inserire la libreria jQuery in una pagina, in modo da poter eseguire i comandi jQuery dalla console:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

Puoi invece salvare questo codice in uno snippet ed eseguirlo con un paio di clic, ogni volta che ti serve. DevTools salva lo snippet nel file system. Ad esempio, esamina uno snippet che inserisce la libreria jQuery in una pagina.

Uno snippet che inserisce la libreria jQuery in una pagina.

Per eseguire uno snippet:

  • Apri il file nella scheda Snippet e fai clic su Esegui Il pulsante Esegui. nella barra delle azioni in basso.
  • Apri il menu dei comandi, elimina il carattere >, digita !, digita il nome del tuo snippet, quindi premi Invio.

Per scoprire di più, consulta Eseguire snippet di codice da qualsiasi pagina.

Eseguire il debug di JavaScript

Anziché utilizzare console.log() per dedurre dove si verifica l'errore in JavaScript, ti consigliamo di utilizzare gli strumenti di debug di Chrome DevTools. L'idea generale è impostare un punto di interruzione, ovvero un punto di arresto intenzionale nel codice, e quindi eseguire il codice un'istruzione alla volta.

Messa in pausa in un punto di interruzione.

Man mano che esegui il codice, puoi visualizzare e modificare i valori di tutte le proprietà e le variabili attualmente definite, eseguire JavaScript nella console e altro ancora.

Consulta Inizia a eseguire il debug di JavaScript per scoprire le nozioni di base del debug in DevTools.

Concentrati solo sul codice

Chrome DevTools ti consente di concentrarti solo sul codice che crei filtrando il rumore generato dai framework e dagli strumenti di compilazione che utilizzi durante la creazione di applicazioni web.

Per offrirti un'esperienza di debug web moderna, DevTools esegue le seguenti operazioni:

Inoltre, se supportato dai framework, lo stack di chiamate nel debugger e le analisi dello stack nella console mostrano la cronologia completa delle operazioni asincrone.

Per saperne di più, vedi:

Configurare un workspace

Per impostazione predefinita, quando modifichi un file nel riquadro Origini, le modifiche vengono perse quando ricarichi la pagina. Le aree di lavoro ti consentono di salvare le modifiche apportate in DevTools nel tuo file system. In sostanza, ti consente di utilizzare DevTools come editor di codice.

Per iniziare, consulta Modificare i file con gli spazi di lavoro.