Opera Software
  1. Barre degli Strumenti
  2. Menu
  3. Pannelli
  4. Accesso Rapido
  5. Segnalibri
  6. Widget
  7. Note
  8. Blocco dei Contenuti
  9. Protezione Anti-Frode
  10. BitTorrent
  11. Modalità di Visualizzazione
  12. Strumenti per gli Sviluppatori
  13. Preferenze
  14. Preferenze Avanzate
  15. Skin
  16. Scorciatoie da tastiera
  17. Utilizzo del mouse
  18. Interfaccia vocale
  19. E-mail e News
  20. Feed
  21. Chat
  22. Finestre di dialogo
  23. Backup di Opera

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:

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à:

  1. Salvare nella cache e visualizzare immediatamente i cambiamenti apportati cliccando su "Applica cambiamenti" o premendo Ctrl+R.
  2. 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.