Come Usare la Console di Sviluppo JavaScript

Introduzione

I browser moderni hanno strumenti di sviluppo integrati per lavorare con JavaScript e altre tecnologie web. Questi strumenti includono la Console, simile a un’interfaccia a shell, insieme a strumenti per ispezionare il DOM, debuggare e analizzare l’attività di rete.

La Console può essere utilizzata per registrare informazioni come parte del processo di sviluppo JavaScript, nonché consentirti di interagire con una pagina web eseguendo espressioni JavaScript nel contesto della pagina. In sostanza, la Console ti fornisce la possibilità di scrivere, gestire e monitorare JavaScript su richiesta.

In questo tutorial verrà illustrato come lavorare con la Console e JavaScript all’interno del contesto di un browser, e fornirà una panoramica degli altri strumenti di sviluppo integrati che è possibile utilizzare come parte del processo di sviluppo web.

Lavorare con la Console in un Browser

La maggior parte dei moderni browser web che supportano HTML e XHTML basati su standard ti forniranno accesso a una Console Sviluppatore in cui puoi lavorare con JavaScript in un’interfaccia simile a una shell terminale. Questa sezione illustra come accedere alla Console in Firefox e Chrome.

Firefox

Per aprire la Console Web in Firefox, vai al menu ☰ nell’angolo in alto a destra accanto alla barra degli indirizzi.

Seleziona Altri Strumenti. Con quello aperto, fai clic sull’elemento Strumenti Sviluppatore Web.

Una volta fatto ciò, comparirà un vassoio nella parte inferiore della finestra del tuo browser:

Puoi anche accedere alla Console Web premendo contemporaneamente i tasti CTRL + SHIFT + K su Linux e Windows, o COMMAND + OPTION + K su macOS.

Ora che hai accesso alla Console, puoi iniziare a lavorare al suo interno con JavaScript.

Chrome

Per aprire la Console JavaScript in Chrome, puoi navigare nel menu in alto a destra della finestra del browser, indicato da tre punti verticali. Da lì, puoi selezionare Altri strumenti e poi Strumenti sviluppatore.

Questo aprirà un pannello dove puoi fare clic su Console nella barra del menu superiore per visualizzare la Console JavaScript se non è già evidenziata:

Puoi anche accedere alla Console JavaScript utilizzando la scorciatoia da tastiera CTRL + SHIFT + J su Linux o Windows, o COMMAND + OPTION + J su macOS, che porterà immediatamente il focus alla Console.

Ora che hai accesso alla Console, puoi iniziare a lavorare al suo interno in JavaScript.

Lavorare nella Console

All’interno della Console, puoi digitare ed eseguire codice JavaScript.

Inizia con un alert che stampa la stringa Ciao, Mondo!:

alert("Hello, World!");

Dopo aver premuto il tasto INVIO seguendo la tua riga di JavaScript, comparirà un popup di avviso nel tuo browser:

Nota che la Console stamperà anche il risultato dell’valutazione di un’espressione, che verrà letto come undefined quando l’espressione non restituisce esplicitamente qualcosa.

Piuttosto che avere avvisi a comparsa che devi cliccare per chiudere, puoi lavorare con JavaScript registrandoli nella Console con console.log.

Per stampare la stringa Hello, World!, digita quanto segue nella Console:

console.log("Hello, World!");

All’interno della console, riceverai l’output seguente:

Output
Hello, World!

Puoi anche eseguire operazioni matematiche nella Console:

console.log(2 + 6);

Output
8

Puoi anche provare operazioni matematiche più complesse:

console.log(34348.2342343403285953845 * 4310.23409128534);

Output
148048930.17230788

Inoltre, puoi lavorare su più righe con variabili:

let today = new Date();
console.log("Today's date is " + today);

Output
Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)

Se hai bisogno di modificare un comando che hai passato attraverso la Console, puoi digitare la freccia su (↑) sulla tua tastiera per recuperare il comando precedente. Ciò ti permetterà di modificare il comando e inviarlo nuovamente.

La Console JavaScript ti fornisce uno spazio per provare il codice JavaScript in tempo reale, permettendoti di utilizzare un ambiente simile a un’interfaccia della shell del terminale.

Lavorare con un File HTML

Puoi lavorare nel contesto di un file HTML o di una pagina renderizzata dinamicamente nella Console. Questo ti offre l’opportunità di sperimentare con il codice JavaScript all’interno del contesto di HTML, CSS e JavaScript esistenti.

Tieni presente che non appena ricarichi una pagina dopo averla modificata nella Console, tornerà allo stato precedente alla modifica del documento. Assicurati di salvare eventuali modifiche che desideri conservare altrove.

Prendi un documento HTML, come il seguente file index.html, per capire come utilizzare la Console per modificarlo. Nel tuo editor di testo preferito, crea un file index.html e aggiungi le seguenti righe di HTML:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

Se salvi il file HTML sopra e lo carichi nel browser di tua scelta, verrà renderizzata una pagina vuota con il titolo Data odierna nel browser.

Apri la Console e inizia a lavorare con JavaScript per modificare la pagina. Inizia utilizzando JavaScript per inserire un’intestazione nell’HTML.

let today = new Date();
document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

Riceverai l’output seguente nella Console:

Output
"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"

La tua pagina dovrebbe essere simile alla seguente:

Puoi modificare lo stile della pagina, come il colore dello sfondo:

document.body.style.backgroundColor = "lightblue";

Output
"lightblue"

Così come il colore del testo sulla pagina:

document.body.style.color = "white";

Output
"white"

Ora la tua pagina dovrebbe mostrare qualcosa di simile a questo:

Da qui, puoi creare un elemento paragrafo <p>:

let p = document.createElement("P");

Con questo elemento creato, puoi poi creare un nodo di testo che può essere aggiunto al paragrafo:

let t = document.createTextNode("Paragraph text.");

Aggiungi il nodo di testo appendendolo alla variabile p:

p.appendChild(t);

E infine appendi p con il suo elemento paragrafo <p> e il nodo di testo aggiunto al documento:

document.body.appendChild(p);

Una volta completati questi passaggi, la tua pagina HTML index.html includerà gli elementi seguenti:

La Console fornisce uno spazio per sperimentare con la modifica delle pagine HTML, ma è importante tenere presente che non si sta modificando il documento HTML stesso quando si eseguono operazioni sulla Console. Una volta ricaricata la pagina, essa tornerà a essere un documento vuoto.

Comprensione di Altri Strumenti di Sviluppo

A seconda degli strumenti di sviluppo del browser che si utilizzano, si potranno utilizzare altri strumenti per aiutare il flusso di lavoro dello sviluppo web.

DOM — Document Object Model

Ogni volta che una pagina web viene caricata, il browser in cui si trova crea un Modello Oggetto Documento, o DOM, della pagina.

Il DOM è un albero di Oggetti e mostra gli elementi HTML all’interno di una vista gerarchica. L’albero DOM è disponibile per la visualizzazione all’interno del pannello Inspector in Firefox o del pannello Elements in Chrome.

Questi strumenti ti consentono di ispezionare e modificare gli elementi del DOM e ti permettono anche di identificare l’HTML relativo a un aspetto particolare di una pagina specifica. Il DOM può dirti se un frammento di testo o un’immagine ha un attributo ID e può aiutarti a determinare qual è il valore di quell’attributo.

La pagina che hai modificato sopra avrà una vista del DOM simile a questa prima di ricaricare la pagina:

Inoltre, vedrai gli stili CSS in un pannello laterale o sotto il pannello del DOM, consentendoti di vedere quali stili vengono utilizzati all’interno del documento HTML o tramite un foglio di stile CSS. Ad esempio, nota quali stili sono inclusi nel body della tua pagina di esempio nell’Inspector di Firefox:

Per modificare live un nodo DOM, fai doppio clic su un elemento selezionato e apporta modifiche. Ad esempio, puoi modificare un tag <h1> e renderlo un tag <h2>.

Come per la Console, se ricarichi la pagina tornerai allo stato originale salvato del documento HTML.

Rete

La scheda Rete degli strumenti di sviluppo integrati del tuo browser può monitorare e registrare le richieste di rete. Questa scheda rivela le richieste di rete che il browser effettua, incluso quando carica una pagina, quanto tempo impiega ogni richiesta e fornisce i dettagli di ciascuna di queste richieste. Questo può essere utilizzato per ottimizzare le prestazioni di caricamento della pagina e risolvere i problemi relativi alle richieste.

Puoi utilizzare la scheda Rete insieme alla Console JavaScript. In altre parole, puoi iniziare il debug di una pagina con la Console e poi passare alla scheda Rete per visualizzare l’attività di rete senza ricaricare la pagina.

Per saperne di più su come utilizzare la scheda Rete, puoi leggere informazioni su come lavorare con il Monitor di rete di Firefox o come iniziare ad analizzare le prestazioni di rete con gli strumenti di sviluppo di Chrome.

Design Responsivo

Quando i siti web sono responsivi, sono progettati e sviluppati per apparire e funzionare correttamente su una serie di dispositivi diversi: telefoni cellulari, tablet, desktop e laptop. La dimensione dello schermo, la densità dei pixel e il supporto al tocco sono fattori da considerare durante lo sviluppo su diversi dispositivi. Come sviluppatore web, è importante tenere presente i principi del design responsivo in modo che i tuoi siti siano pienamente accessibili alle persone indipendentemente dal dispositivo a cui hanno accesso.

Sia Firefox che Chrome ti forniscono modalità per garantire che i principi del design responsivo siano presi in considerazione mentre crei e sviluppi siti e app per il web. Queste modalità emuleranno diversi dispositivi che potrai esaminare e analizzare come parte del tuo processo di sviluppo.

Leggi di più su Modalità di design responsive di Firefox o Modalità dispositivo di Chrome per saperne di più su come sfruttare questi strumenti per garantire un accesso più equo alle tecnologie web.

Conclusione

Questo tutorial ha fornito una panoramica su come lavorare con una Console JavaScript all’interno dei browser web moderni, oltre a fornire informazioni su altri strumenti di sviluppo che puoi utilizzare nel tuo flusso di lavoro.

Per saperne di più su JavaScript, puoi leggere riguardo ai tipi di dati, o alle librerie jQuery o D3.