Blocco per gli appunti

Il Blocco per gli appunti fornisce un ambiente per sperimentare con del codice JavaScript. Permette di scrivere, eseguire, ed esaminare i risultati del codice che interagisce con la pagina web.

Diversamente dalla Console web, che è studiata per interpretare una singola linea di codice alla volta, il Blocco per gli appunti permette di scrivere e modificare frammenti di codice JavaScript più grandi, per poi eseguirli in vari modi dipendentemente a come si vuole usare i risultati.

Uso

Aprire il Blocco per gli appunti in una finestra separata

Ci sono vari modi per aprire il Blocco per gli appunti in una finestra separata:

• premere Shift + F4, o dal menu Sviluppo web (che è un sottomenu nel menu Strumenti in OS X e Linux), selezionare Blocco per gli appunti
• cliccare l'icona della chiave inglese (), che è nella barra degli strumenti principale o dentro il menu Hamburger (), poi selezionare "Blocco per gli appunti".

Questo aprirà il Blocco per gli appunti in una finestra separata.

Aprire il Blocco per gli appunti nella Toolbox

A partire da Firefox 47, si può aprire il Blocco per gli appunti all'interno della Toolbox. Per farlo, come prima cosa bisogna selezionare "Blocco per gli appunti" nella sezione "Strumenti di sviluppo predefiniti di Firefox" della pagina Opzioni strumenti della Toolbox.

Ora il Blocco per gli appunti sarà disponibile nella Toolbox, con gli altri strumenti come Analisi pagina e la Web Console. Il Blocco per gli appunti nella Toolbox è molto utile nella modalità split Console: in questa configurazione si può usare il Blocco per gli appunti per avere un editor persistente, e multilinea, e la Console per interagire con la pagina.

Scrittura e modifica

La finestra del Blocco per gli appunti ha questo aspetto (su OS X la barra dei menu è nella parte alta dello schermo, separata dalla finestra):

Il menu File offre opzioni per salvare e caricare frammenti di codice JavaScript, in modo da poter riusare lo stesso codice più tardi, se si vuole.

Completamento del codice

Blocco per gli appunti integra tern come motore di analisi del codice, e lo usa per fornire suggerimenti per l'autocompletamento e popup contenenti informazioni sul simbolo che si sta scrivendo. Per visualizzare la lista dei suggerimenti dell'autocompletamento, premere Ctrl + Spazio.

Per esempio, provando ad inserire d, e successivamente premendo  Ctrl + Spazio, si può vedere la tendina dell'autocompletamento, come quella mostrata nell'immagine qua sotto:

L'icona a sinistra di ogni suggerimento indica il tipo, e per il suggerimento evidenziato viene mostrato un popup con più informazioni. ↑ e ↓ scorrono tra i suggerimenti e con Invio o Tab si può inserire il suggerimento evidenziato.

Documentazione in linea

Per mostrare il popup della documentazione in linea, premere Ctrl + Shift + Spazio quando il cursore è posizionato su un simbolo. Per esempio, scrivendo document.addEventListener, e successivamente premendo Ctrl + Shift + Spazio, si può vedere un popup che mostra un riassunto della sintassi della funzione e una breve descrizione:

Il link "[docs]" nel popup porta alla documentazione MDN per quel simbolo.

Executing

Una volta che hai scritto il tuo codice, seleziona la parte di codice che vuoi eseguire. Se non selezioni alcuna parte di codice, tutto il codice nella finestra verrà eseguito. Poi scegli il modo in cui vuoi che il codice venga eseguito usando uno dei bottoni nella parte alta della finestra, usando il menu Esecuzione, o usando il menu contestuale. Il codice è eseguito nel contesto (scope) della tab selezionata. Qualsiasi variabile dichiarata fuori dal contesto di una funzione sarà aggiunta all'oggetto globale di quella tab.

Ci sono quattro opzioni di esecuzione disponibili.

Esegui

Scegliendo l'opzione Esegui, il codice selezionato viene eseguito. Questa opzione è quella da usare per eseguire una funzione o altro codice che manipola il contenuto della pagina senza la necessità di vedere il risultato.

Analizza

L'opzione Analizza esegue il codice esattamente come l'opzione Esegui; differentemente da Esegui, dopo che il codice è stato eseguito, viene aperto un oggetto analisi che permette di esaminare il valore restituito.

Ad esempio, inserendo il codice:

window

e scegliendo successivamente Analizza, l'oggetto analisi viene mostrato e ha l'aspetto visibile nella figura successiva:

Visualizza

L'opzione Visualizza esegue il codice selezionato, inserendo però il risultato direttamente nella finestra dell'ediro del Blocco per gli appunti sottoforma di commento, rendendo possibile utilizzare il Blocco per gli appunti come REPL.

Ricarica ed esegui

L'opzione Ricarica ed esegui è disponibile solo nel menu Esecuzione. In primo luogo ricarica la pagine, poi esegue il codice quando l'evento "load" della pagina viene scatenato. L'utilità consiste nella possibilità di eseguire il codice in un ambiente fresco.

Eseguire Blocco per gli appunti nel contesto del browser

Puoi eseguire il Blocco per gli appunti nel contesto del browser piuttosto che in quello di una singola pagina web. Questo è utile se stai lavorando su Firefox stesso o ad un componente aggiuntivo. Per farlo è necessario marcare l'opzione "Abilita debug chrome del browser e componenti aggiuntivi" nella sezione "Impostazioni avanzate" della pagina Opzioni strumenti della Toolbox. Fatto questo, appare un nuovo menu Ambiente che ha un'opzione Browser; quando viene selezionata, lo scope diventa l'intero browser invece che il contenuto della pagina, come evidenziato esaminando alcune delle variabili globali disponibili:

window
/*
[object ChromeWindow]
*/

gBrowser
/*
[object XULElement]
*/

Il contesto di esecuzione del Blocco per gli appunti è settato a browser quando un file snippet ha
// -sp-context: browser
come prima linea.

Scorciatoie da tastiera

Scorciatoie dell'editor di testo

This table lists the default shortcuts for the source editor.

In the Editor Preferences section of the developer tools settings, you can choose to use Vim, Emacs, or Sublime Text key bindings instead.

To select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to that setting. If you do this, the selected bindings will be used for all the developer tools that use the source editor. You need to reopen the editor for the change to take effect.

From Firefox 33 onwards, the key binding preference is exposed in the Editor Preferences section of the developer tools settings, and you can set it there instead of about:config.