Ferramentas de Desenvolvimento

Prima Page Down e Page Up para alternar slides.

O Opera inclui várias ferramentas para ajudar aos desenvolvedores de Web.

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

A Consola do Desenvolvedor

O item do menu Ferramentas > Avançadas > Ferramentas de desenvolvimento abre uma página Web em Dev.Opera, cujas hiperligações incluem várias aplicações JavaScript. A consola do desenvolvedor é uma dessas aplicações, e como as outras, poderá ser arrastada e largada para qualquer barra de ferramentas do Opera. Ao abrir a consola do desenvolvedor surgirá uma pequena janela no topo da página Web para ser analisada, com cinco separadores: DOM, JS, CSS, HTTP, e About.

Nota: para utilizar as aplicações JavaScript em Dev.Opera, os pop-ups terão de estar activados.

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

Em alternativa, ao clicar em qualquer parte da página Web fará com que se abra a lista de nós DOM, com o nó relevante para essa região da página seleccionada. Para encontrar a região relevante, prima e mantenha a tecla Shift enquanto percorre a página com o rato.

Estas são as características principais do separador DOM:

"Search" permite-lhe pesquisar a árvore DOM por qualquer classe de nós utilizado seleccionadores CSS padrões, por exemplo p > a para indicar a relação pai-criança, ou #menu para encontrar uma id.
"Snapshot" dá-lhe uma imagem completa de DOM.

A consola do desenvolvedor poderá ser utilizada para modificar de forma interactiva uma página Web. O botãoThe "Remove" no separador DOM permite-lhe remover nós, mas também quaisquer propriedades CSS poderão ser editadas dentro do separador CSS, depois de pressionar o botão "Show rules" para a folha de estilo apropriada. O resultado das alterações será exibido instantaneamente e poderá ser exportado para uma utilização mais tarde.

Uma discussão mais detalhada sobre a consola do desenvolvedor poderá ser encontrada em Dev.Opera.

The Source Viewer

O Opera possui um visor interno do código fonte de páginas Web.Se deseja ver o código fonte da página actual, apenas terá que ir até Ver > Código Fonte, ou premir Ctrl+F3, ou clique-direito na página e seleccionar "Código Fonte".

O visor do código fonte abre um novo separador na sua barra de separadores e destaca a sintaxe para que possa visualizar melhor o código fonte. Se desejar editar a página, dispõe de duas opções:

Guardar em cache e ver as suas alterações aplicadas imediatamente ao fazer clique em "Aplicar alterações", ou premir Ctrl+R.
Guardar para uma localização à sua escolha ao clicar "Guardar", ou premir Ctrl+S.

Se estiver a editar um documento guardado localmente tenha em conta que ao "Aplicar alterações" fará com que as alterações fiquem permanentemente guardadas.

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