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.

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.

La Consola del Diseñador

La entrada del menú Herramientas > Avanzado > Herramientas del diseñador abre una página Web en Dev.Opera, cuyos enlaces incluyen una serie de aplicaciones JavaScript. La consola del diseñador es una de ellas y como todas las demás 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.

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:

"Search" permite la búsqueda en el árbol DOM de cualquier clase de nodos usando selectores CSS estándar, por ejemplo p > a para indicar una relación padre-hijo, o #menu para buscar alguna id.
"Snapshot" proporciona un vistazo completo del DOM.

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:

Guardar al caché y ver los cambios inmediatamente haciendo clic en "Aplicar cambios", o pulsando Ctrl+R.
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.