Utilizza il riquadro Origini di Chrome DevTools per:
- Visualizza file.
- Modifica CSS e JavaScript.
- Crea e salva snippet di JavaScript, che puoi eseguire su qualsiasi pagina. Gli snippet sono simili ai bookmarklet.
- Debug di JavaScript.
- Configura un'area di lavoro, in modo che le modifiche apportate in DevTools vengano salvate nel codice nel tuo file system.
Visualizza file
Utilizza il riquadro Pagina per visualizzare tutte le risorse caricate dalla pagina.
Come è organizzato il riquadro Pagina:
- Il primo livello, come
topnello screenshot sopra, rappresenta un frame HTML. Troveraitopin ogni pagina che visiti.toprappresenta il frame del documento principale. - Il secondo livello, come
developers.google.comnello 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 sopra, 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 file. Per le immagini, viene visualizzata un'anteprima dell'immagine.
Modifica CSS e JavaScript
Utilizza il riquadro dell'Editor per modificare CSS e JavaScript. DevTools aggiorna la pagina per eseguire il nuovo codice.
Anche l'Editor è utile per il debug. Ad esempio, evidenzia e mostra le descrizioni comando degli errori incorporati accanto agli errori di sintassi e ad altri problemi, come le istruzioni CSS @import e url() non riuscite e gli attributi HTML href con URL non validi.
Se modifichi il background-color di un elemento, noterai che la modifica viene applicata immediatamente.
Per applicare le modifiche a JavaScript, premi Comando+S (Mac) o Ctrl+S (Windows, Linux). DevTools non esegue nuovamente uno script, pertanto le uniche modifiche apportate a JavaScript sono quelle apportate all'interno delle funzioni. Ad esempio, osserva che console.log('A') non viene eseguito, mentre console.log('B') sì.
Se DevTools eseguiva 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. Vedi Configurare un'area di lavoro 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 sul pulsante, ogni volta che 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 saperne di più, consulta Eseguire snippet di codice da qualsiasi pagina.
JavaScript di debug
Anziché utilizzare console.log() per dedurre dove JavaScript sta andando male, puoi utilizzare gli strumenti di debug di Chrome DevTools. L'idea generale è impostare un punto di interruzione, ovvero un'interruzione intenzionale del codice, per poi proseguire nell'esecuzione del codice, una riga alla volta.
Man mano che procedi nel codice, puoi visualizzare e modificare i valori di tutte le proprietà e le variabili attualmente definite, eseguire JavaScript nella console e altro ancora.
Consulta la guida introduttiva al debug di JavaScript per apprendere le nozioni di base sul debug in DevTools.
Concentrati solo sul tuo codice
Chrome DevTools ti consente di concentrarti solo sul codice che crei filtrando il rumore generato dai framework e creando strumenti che utilizzi per la creazione di applicazioni web.
Per offrirti la moderna esperienza di debug web, DevTools procede nel seguente modo:
- Separa il codice creato da quello di cui è stato eseguito il deployment. Per aiutarti a trovare più velocemente il codice, il riquadro Origini separa il codice che crei dal codice aggregato e minimizzato.
- Ignora il codice di terze parti noto:
- Il riquadro Origini nasconde queste origini dalla struttura dei file nel riquadro Pagina.
- La console nasconde questi frame dalle analisi dello stack.
- Il menu Apri file nasconde questo tipo di 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 scoprire di più, vedi:
Configura un'area di lavoro
Per impostazione predefinita, quando modifichi un file nel riquadro Origini, le modifiche andranno perse quando ricarichi la pagina. Le aree di lavoro ti consentono di salvare nel file system le modifiche apportate in DevTools. In sostanza, questo ti consente di utilizzare DevTools come editor di codice.
Per iniziare, vedi Modificare i file con gli spazi di lavoro.