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. Troveraitop
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:
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.