Strumenti per gli Sviluppatori

Premere Pag Giù e Pag Su per spostarsi fra le diapositive

Opera include numerosi strumenti per facilitare gli sviluppatori di pagine Web.

La console di sviluppo è uno strumento per analizzare e/o modificare interattivamente una pagina Web durante la fase di creazione o di debug; il visualizzatore dei sorgenti è invece uno strumento più semplice atto ad esaminare il codice sorgente di una pagina Web e ad apportarvi veloci modifiche.

Console di Sviluppo

Cliccando su Strumenti > Avanzate > Strumenti per gli sviluppatori viene caricata la pagina Web di Dev.Opera, questa pagina contiene link a numerose applicazioni JavaScript. La console di sviluppo è una di queste applicazioni e, come tutte le altre, può essere trascinata e rilasciata in una barra degli strumenti qualsiasi di Opera. Quando viene caricata, la console di sviluppo appare come una piccola finestra, in primo piano rispetto alla pagina Web che si desidera analizzare, contenente cinque schede: DOM, JS, CSS, HTTP e About.

Nota: per utilizzare le applicazioni JavaScript disponibili su Dev.Opera è necessario che i pop-up siano abilitati.

La console di sviluppo si apre sulla scheda DOM, contenente l'elenco contratto dei nodi afferenti a "document". Per espandere l'elenco selezionare il tasto segno di addizione (più).

Quando si fa clic su un nodo, la regione di pagina Web ad esso associata lampeggia brevemente. In alternativa, cliccando in un punto qualsiasi della pagina Web, viene visualizzato l'elenco dei nodi DOM con, in evidenza, il nodo relativo alla regione cliccata. Per individuare le varie regioni che compongono la pagina Web, tenere premuto il tasto Maiusc e spostarsi con il mouse sulla pagina.

Di seguito sono elencate le caratteristiche principali della scheda DOM:

"Search" permette di ricercare, all'interno dell'albero DOM, una qualunque classe di nodi utilizzando i selettori CSS standard, ad esempio p > a per indicare una relazione padre figlio, o #menu per trovare un id.
"Snapshot" fornisce una visione d'insieme dell'intero DOM.

La console di sviluppo può essere utilizzata per modificare interattivamente una pagina Web. Il tasto "Remove" della scheda DOM, ad esempio, permette di rimuovere dei nodi mentre la scheda CSS può essere utilizzata per modificare una qualsiasi proprietà CSS dopo aver cliccato sul tasto "Show rules" del foglio di stile prescelto. I risultati delle modifiche apportate vengono visualizzati istantaneamente ed è possibile esportarli per riutilizzarli in seguito.

Informazioni più dettagliate sulla console di sviluppo sono disponibili su Dev.Opera.

Visualizzatore dei Sorgenti

Opera include uno strumento molto semplice per analizzare e modificare le pagine Web, il visualizzatore dei sorgenti. Per ispezionare il codice sorgente della pagina Web attiva è sufficiente cliccare su Visualizza > Sorgenti, premere Ctrl+F3 oppure cliccare con il tasto destro sulla pagina e selezionare "Sorgenti della pagina".

Il visualizzatore dei sorgenti apre una nuova scheda sulla barra delle schede ed evidenzia la sintassi del codice per una più agevole lettura. Per modificare i sorgenti di una pagina ci sono due possibilità:

Salvare nella cache e visualizzare immediatamente i cambiamenti apportati cliccando su "Applica cambiamenti" o premendo Ctrl+R.
Salvare il codice in una destinazione a scelta cliccando su "Salva" o premendo Ctrl+S.

Se si modifica il codice sorgente di un documento salvato localmente e si clicca su "Applica cambiamenti", le modifiche apportate vengono salvate in modo permanente.

Se si preferisce utilizzare un programma esterno per la visualizzazione e la modifica dei sorgenti, è necessario specificarlo in preferenze per i programmi.