Opera Software
  1. Barras de Ferramentas
  2. Menus
  3. Painéis
  4. Speed Dial (Marcação Rápida)
  5. Favoritos
  6. Widgets
  7. Notas
  8. Opera Link
  9. Bloqueio de Conteúdo
  10. Protecção de Fraude
  11. BitTorrent
  12. Modos de aparência
  13. Ferramentas de Desenvolvimento
  14. Preferences
  15. Advanced Preferences
  16. Temas
  17. Atalhos do Teclado
  18. Utilizar o Rato
  19. Utilizar a Voz
  20. E-mail e Notícias
  21. Feeds
  22. Conversação
  23. Caixas de diálogo
  24. Fazer Backup do Opera

Ferramentas de Desenvolvimento

Prima Page Down e Page Up para alternar diapositivos.

O Opera inclui várias ferramentas de desenvolvimento, sendo a mais importante o Opera Dragonfly, uma ferramenta que permite depuração remota de páginas Web.

A consola de desenvolvimento é uma ferramenta para analisar e/ou modificar de forma interactiva uma página Web durante o desenvolvimento e depuração, enquanto que o Visualizador do código fonte é uma ferramenta mais simples que permite examinar o código fonte de uma página Web e fazer alterações rápidas.

Opera Dragonfly

Nota: para utilizar o Opera Dragonfly, o JavaScript deverá estar activado.

O Opera Dragonfly é uma aplicação JavaScript utilizada para fazer depuração local e remota de páginas Web. Para abri-lo, seleccione o item do menu Ferramentas > Avançadas > Ferramentas de desenvolvimento. O interface do utilizador contém três separadores:

O Opera Dragonfly ainda está em desenvolvimento. Para mais informação, consulte os seguintes artigos:

A consola de desenvolvimento

Assim como noutras aplicações JavaScript em Dev.Opera, a consola de desenvolvimento poderá ser arrastada e largada em qualquer barra de ferramentas do Opera. Quando abrir a consola de desenvolvimento, irá surgir uma pequena janela no topo da página a ser analisada com cinco separadores: DOM, JS, CSS, HTTP, e Acerca.

Nota: para utilizar aplicações JavaScript em Dev.Opera, as janelas pop-up terão de estar activadas.

A consola de desenvolvimento abre o separador DOM com a lista de nós colapsados em "documento". Clique no sinal mais para expandir a lista. Quando clicar num nó, a página Web irá piscar brevemente para indicar a região associada a este nó.

Em alternativa, se clicar em qualquer parte da página Web irá abrir uma lista de nós DOM, com o nó relevante para esse região da página em destaque. Para localizar a região relevante, pressione a mantenha pressionada a tecla Shift enquanto percorre a página com o rato.

Esta são as principais funcionalidades do separador DOM:

A consola de desenvolvimento pode ser utilizada para modificar de forma interactiva uma página Web. O botão "Remover" no separador DOM permite remover nós, mas também qualquer propriedade CSS pode ser editada dentro do separador CSS, após pressionar o botão "Mostrar regras" para a folha de estilo apropriada. O resultado das alterações é exibido instantaneamente e poderá exportado para uma utilização a posteriori.

Uma discussão mais detalhada da consola de desenvolvimento pode ser encontrada em Dev.Opera.

O visualizador do código fonte

O Opera inclui uma ferramenta mais simples para analisar e modificar páginas Web, o visualizador do código fonte. Se deseja ver o código fonte da página Web actual, vá a Ver > Código fonte, ou primaCtrl+F3, ou clique-direito na página e seleccione "Código fonte".

O visualizador do código fonte será aberto num novo separador na sua barra de separadores e contém a sintaxe em destaque para lhe permitir uma melhor visualização geral do código. Se deseja editar a página, tem duas opções:

  1. Guarda na cache e veja as suas alterações aplicadas de imediato ao clicar "Aplicar alterações", ou pressionando Ctrl+R.
  2. Guarde numa localização à sua escolha ao clicar "Guardar", ou pressionando Ctrl+S.

Tenha em conta que se estiver a editar um documento guardado localmente ao "Aplicar alterações" irá guardar permanentemente as suas alterações.

Se prefere utilizar um programa externo para visualizar o código fonte e editá-lo, poderá especificá-lo nas preferências de programas.