Panoramica del riquadro delle origini

Kayce Basques

Sofia Emelianova

Utilizza il riquadro Origini di Chrome DevTools per:

• Visualizza file
• Modificare il codice CSS e JavaScript.
• Crea e salva snippet di JavaScript, che puoi eseguire su qualsiasi pagina. Gli snippet sono in modo simile ai bookmarklet.
• Eseguire il debug di JavaScript.
• Configura un'area di lavoro, in modo che le modifiche apportate in DevTools vengano salvate nel codice nel file. di un sistema operativo completo.

Visualizza file

Utilizza il riquadro Pagina per visualizzare tutte le risorse caricate sulla pagina.

Come è organizzato il riquadro Pagina:

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

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

Modifica CSS e JavaScript

Utilizza il riquadro 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 le descrizioni comando per gli errori in linea accanto agli errori di sintassi e ad altri problemi, come le istruzioni @import e url() CSS non riuscite e gli attributi href HTML con URL non validi.

Se modifichi l'elemento background-color di un elemento, la modifica verrà applicata immediatamente.

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

Se DevTools avesse eseguito nuovamente l'intero script dopo aver apportato la modifica, il testo A sarebbe stato registrato nello script Console.

DevTools cancella le modifiche CSS e JavaScript quando ricarichi la pagina. Consulta la sezione Impostare un Workspace per scoprire come salvare le modifiche nel 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 puoi eseguire 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 salvare il codice in uno snippet ed eseguirlo con un paio di clic sul pulsante, in qualsiasi momento. ne hai bisogno. DevTools salva lo snippet nel tuo file system. Ad esempio, esamina uno snippet che inserisce la libreria jQuery in una pagina.

Per eseguire uno snippet:

• Apri il file nel riquadro Snippet e fai clic su Esegui nella barra delle azioni in basso.
• Apri il menu Comando, elimina il carattere >, digita !, digita il nome del tuo Snippet, quindi premi Invio.

Per scoprire di più, consulta la sezione Esegui snippet di codice da qualsiasi pagina.

Esegui il debug di JavaScript

Anziché usare console.log() per dedurre dove il codice JavaScript va storto, valuta la possibilità di utilizzare il gli strumenti di debug di Chrome DevTools. L'idea generale è impostare un punto di interruzione, ovvero una un'interruzione intenzionale del codice nel codice e quindi seguirne l'esecuzione, una riga alla volta nel tempo.

Mentre procedi nel codice, puoi visualizzare e modificare i valori di tutti e variabili, eseguire JavaScript nella console e altro ancora.

Consulta Iniziare a eseguire il debug di JavaScript per apprendere le nozioni di base del debug in DevTools.

Concentrati solo sul codice

Chrome DevTools ti consente di concentrarti solo sul codice che hai creato filtrando il rumore generato dai framework e di creare strumenti che usi durante la creazione di applicazioni web.

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

• Separa il codice creato da quello di cui è stato eseguito il deployment. Per aiutarti a trovare il codice più rapidamente, il riquadro Origini separa il codice che crei dal codice in bundle e minimizzato.
• Ignora il codice di terze parti noto:
  .
  • Il riquadro Origini nasconde queste origini dalla struttura dei file del riquadro Pagina.
  • La console nasconde questi frame dalle analisi dello stack.
  • Il menu Apri file nasconde questi file dai risultati di ricerca.

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

Per saperne di più, consulta:

• Debug web moderno in Chrome DevTools
• Case study: migliorare il debug Angular con DevTools

Configura un'area di lavoro

Per impostazione predefinita, se modifichi un file nel riquadro Origini, le modifiche andranno perse quando lo ricarichi. della pagina. Le aree di lavoro ti consentono di salvare nel file le modifiche apportate in DevTools di un sistema operativo completo. In pratica, questo ti consente di usare DevTools come editor di codice.

Per iniziare, vedi Modificare i file con le aree di lavoro.