Opera Software
  1. Barras de Herramientas
  2. Menús
  3. Paneles
  4. Acceso Rápido
  5. Marcadores
  6. Widgets
  7. Notas
  8. Bloqueo de contenidos
  9. Protección Anti-fraude
  10. BitTorrent
  11. Modos de pantalla
  12. Herramientas de desarrollo
  13. Opciones
  14. Opciones avanzadas
  15. Decorados
  16. Atajos de teclado
  17. Uso del ratón
  18. Uso de Voz
  19. Correo electrónico y noticias
  20. Fuentes (Feeds)
  21. Chat
  22. Cuadros de diálogo
  23. Copias de Seguridad en Opera

Herramientas de desarrollo

Pulsar Av Pág y Re Pág para cambiar diapositivas.

Opera incluye algunas herramientas que ayudan a los diseñadores del Web, especialmente Opera Dragonfly, una herramienta que permite el análisis y depuración remotas de páginas Web.

La consola del diseñador es una herramienta para analizar y/o modificar interactivamente una página Web durante su diseño o prueba de fallos, mientras que el visor de código fuente es una herramienta más simple para examinar el código subyacente de la página y permite hacer cambios rápidos en la misma.

Opera Dragonfly

Nota: para usar Opera Dragonfly, se debe activar JavaScript.

Opera Dragonfly, una aplicación JavaScript, es una herramienta que permite el análisis y depuración remotas de páginas Web. Para abrirla, se elije el elemento de menú Herramientas > Avanzado > Herramientas de desarrollo. La interfase de usuario tiene tres pestañas:

Opera Dragonfly está todavía en desarrollo. Hay más información disponible en los artículos siguientes (en inglés):

La consola del diseñador

Como otras aplicaciones JavaScript en Dev.Opera, la consola del diseñador es se puede arrastrar y dejar caer en cualquier barra de tareas de Opera. Cuando se abre esta consola aparece sobre la página Web a analizar una ventana pequeña con 5 pestañas: DOM, JS, CSS, HTTP, y Acerca de.

Nota: para usar las aplicaciones JavaScript en Dev.Opera, se deben permitir las ventanas emergentes.

La consola del diseñador se abre en la pestaña DOM, con la lista de nodos sin desplegar por debajo de "document". Se hace clic en el signo más para expandir esta lista. Cuando se hace clic en un nodo, la página Web se ilumina brevemente para indicar la región asociada a ese nodo.

Como alternativa, haciendo clic en cualquier parte de la página se abre una lista de nodos DOM, y el que corresponde a esa región de la página estará resaltado. Para encontrar esa región específica, se pulsa y mantiene presionada la tecla Mayús mientras se desliza el ratón sobre la página.

Las características principales de la pestaña DOM son las siguientes:

La consola del diseñador se puede usar para modificar una página en modo interactivo. El botón "Remove" de la pestaña DOM permite quitar nodos, aunque se puede editar cualquier propiedad CSS de una hoja de estilo, desde dentro de la pestaña CSS, tras pulsar el botón "Show rules". El resultado de esos cambios se aprecia inmediatamente y puede exportarse para usos posteriores.

Hay más discusión detallada sobre la consola del diseñador en Dev.Opera (en inglés).

El visor de código fuente

Opera incluye una herramienta más sencilla para analizar y modificar páginas Web: el visor de código fuente. Si se desea ver el código subyacente de la página se va a Ver > Código fuente, o se pulsa Ctrl+F3, o clic con el derecho sobre la página y se elije "Código fuente".

El visor de código fuente se abre como una página nueva en la barra de páginas y dispone de resaltado sintáctico para orientar mejor el código. Si se desea editar la página hay dos opciones:

  1. Guardar al caché y ver los cambios inmediatamente haciendo clic en "Aplicar cambios", o pulsando Ctrl+R.
  2. Guardar a un directorio específico haciendo clic en "Guardar", o pulsando Ctrl+S.

Si se está editando un documento guardado previamente, la opción "Aplicar cambios" hace que los cambios sean permanentes.

Si se desea usar un programa externo para ver y editar el código fuente, se puede indicar en las opciones de programas.