Herramientas de desarrollo

Presione Av Pág y Re Pág para cambiar entre diapositivas.

Opera tiene integradas varias herramientas para ayudar a los desarrolladores Web.

La consola de desarrollo es una herramienta para analizar y/o editar interactivamente una página Web durante el desarrollo o depuración, mientras que el visor de código fuente es una herramienta más sencilla para examinar el código fuetne de una página Web, y hacer cambios rápidos.

La consola de desarrollo

El elemento de menú Herramientas > Avanzado > Herramientas de desarrollo abre una página Web en Dev.Opera, cuyos enlaces incluyen varias aplicaciones. La consola de desarrollo es una de dichas aplicaciones, y como las otras, puede ser arrastrada y soltada en cualquier barra de herramientas de Opera. Cuando abre la consola de desarrollo, aparecerá una pequeña ventana sobre la página Web que será analizada, con cinco pestañas: DOM, JS, CSS, HTTP, y About.

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

La consola de desarrollo se abre en la pestaña DOM, con la lista de nodos colapsada bajo "document". Haga clic en el signo más para expandir la lista. Cuando haga clic sobre un nodo, la página Web parpadeará brevemente para indicar la región asociada con éste nodo.

De manera alternativa, hacer clic en cualquier parte de la página Web abrirá la lista de nodos DOM, con el nodo correspondiente a esa region de la página resaltado. Para encontrar la region relevante, presione y mantenga la tecla Mayús mientras recorre la página con el ratón.

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

"Search" le permite buscar en el árbol DOM un nodo de cualquier clase usando selectores CSS estándar, por ejemplo p > a para indicar una relación padre-hijo, o #menu para encontrar un id.
"Snapshot" le brinda una copia estática del DOM completo.

La consola de desarrollo puede ser usada para modificar interactivamente una página Web. El botón "Remove" en la pestaña DOM permite eliminar nodos, pero también se puede editar cualquier propiedad CSS desde la pestaña CSS, luego presionar el botón "Show rules" para obtener la hoja de estilos apropiada. El resultado de los cambios se muestra inmediatamente, y puede ser exportado para ser usado posteriormente.

Una discusión más detallada de la consola de desarrollo se puede encontrar en Dev.Opera.

Visor de Código Fuente

Opera tiene una herramienta más simple para analizar y modificar páginas Web, el visor de código fuente. Si necesita ver el código fuente de la página actual, todo lo que debe hacer es ir a Ver > Código Fuente, o presionar Ctrl+F3, or hacer clic derecho sobre la página y seleccionar "Ver código fuente".

El visor de código fuente abre una nueva pestaña en la barra de pestañas, y tiene resaltado de colores de acuerdo a la sintaxis para darle una mejor visión del código. Si desea editar la página, tiene dos opciones:

Guardar al caché y ver sus cambios aplicados inmediatamente al hacer clic en "Aplicar cambios", o presionar Ctrl+R.
Guardar a una ubicación de su preferencia al hacer clic en "Guardar", o presionar Ctrl+S.

Tenga en cuenta que si está editando un documento guardado localmente "Aplicar cambios" guardará sus cambios de manera permanente.

Si prefiere usar un programa externo para ver y editar código fuente, puede especificar ésto en las opciones de programas.