Contenidos de "Herramientas de Desarrollo de Navegadores"

1. Opera + DragonFly
2. Firefox + Firebug
3. Internet Explorer + Developer Tools

Pues si, ha quedado para el final el mejor – mi preferido -, la combinación del navegador Safari y su aplicación interna Inspector Web, toda una maravilla de aplicación de debug y desarrollo web integrada en el navegador estrella de Apple.

Desde la versión 3, Safari tiene incluida esta herramienta, potente a la vez que sencilla de utilizar, que dispone de muchas virtudes. ¿Lo mejor de todo?, que no es nada comparada con la que viene incluida en Safari 4, aún en desarrollo pero ya disponible para los miembros del ADC en versiones para Mac OS X Tiger, Mac OS X Leopard y Windows.

El Inspector Web es, de lejos, la aplicación mas agradable y sencilla de utilizar de todas las que hemos cubierto en esta serie. Dispone de un resaltado de código realmente agradable y todo funciona suave y limpio, sin asperezas, como si no costara nada mostrar códigos internos. Una vez has probado el resto de herramientas, sobre todo la combinación Internet Explorer + Developer Tools, sabes apreciar la diferencia.

A simple vista parece que tiene un fallo notable, y es la posibilidad de hacer clic en un elemento para resaltarlo, como el “Inspect” de Firefox + Firebug pero afortunadamente lo consigue con honores – solo que no es muy obvio. Para hacerlo solo debes hacer clic derecho en un elemento de la página, hacer clic en el item del menú llamado “Inspeccionar elemento” y te la resalta y te muestra el código relacionado con el mismo, una maravilla. También lo puedes hacer al contrario, pues si seleccionas una parte de código igualmente te resalta la parte de la página afectada. De hecho puedes usar esta técnica en todos y cada uno de los elementos a inspeccionar y te mostrará una nueva ventana del Inspector Web con las propiedades de ese elemento en concreto. Es ciertamente exhaustivo.

Por supuesto, puedes editar CSS en directo y si quieres “inactivar” estilos. Dispones de una vista de plantilla, llamada Metrics para la visualización de los anchos, padding, etc. También hay debug de scripts que te “anuncia” con iconos de colores los errores existentes, visualización de las imágenes de la página, navegador de la ruta que has seguido para llegar a cada elemento (muy al estilo de la iTunes Store), “bocadillos” que te dan consejos, mas información al hacer clic en cada elemento de lista o ventana, de todo.

Es una herramienta tremendamente completa, que funciona a la perfección y una aplicación imprescindible para un desarrollador web, de hecho la mejor que he visto. Y no es pasión maquera, que también, sino pura y dura comparación de herramientas. De hecho me alegro de haberla probado la última porque sino las otras (salvo Firebug) habrían quedado fatal, es hasta decepcionante usar las Developer Tools de Microsoft o Dragonfly después de disfrutar la interfaz y enorme información que facilita el Inspector Web de Safari.

Bueno, nada mas, espero que hayas disfrutado esta serie o al menos hayas conocido estas herramientas.

Artículos Relacionados:

• Escritorio WordPress adaptado para móviles
• “La muerte es el destino que todos compartimos” Steve Jobs, descanse en paz
• WordPress para iOS 2.9, grandes novedades
• Convierte de texto a voz tus entradas
• Convierte de texto a voz tus entradas

Contenidos de "Herramientas de Desarrollo de Navegadores"

1. Opera + DragonFly
2. Firefox + Firebug
3. Internet Explorer + Developer Tools

Casi llegamos al final de esta serie de herramientas de desarrollo integradas en los navegadores. No cubriremos todos los navegadores existentes, pero si los mas importantes. Hoy vamos a adentrarnos en las posibilidades que nos ofrece Internet Explorer a la hora de ofrecer herramientas para webmasters o navegantes curiosos.

Para ello nos vamos a valer de las Developer Tools, ya incluidas de serie en la versión ßeta de Internet Explorer 8 y que pueden descargarse para Internet Explorer 7.

No obstante, la barra para desarrolladores de Internet Explorer 7 adolece de bastantes fallos por lo que es mas recomendable utilizar la DebugBar en su lugar, que ofrece la misma funcionalidad. Es de suponer que cuando salga a la luz la versión definitiva de Internet Explorer 8 salga como aplicación en descarga separada.

Metidos en harina, ciertamente no parece que vaya a ser mi preferida porque adolece de bastantes cuestiones. Por una parte, es interesante la opción de “Seleccionar elemento mediante clic“, similar a la herramienta Inspect que veíamos en el artículo de Firefox + Firebug, no es igual de potente pero funciona muy bien.

Un fallo importante es que no permite la edición “al vuelo”, por lo que no podrás visualizar cambios realizados en el PHP, CSS o XHTML de la página que visualizas.

Muy parecida a Dragonfly, el hecho es que es casi una necesidad la existencia de esta herramienta, a pesar de que no aporte nada de relevancia, y es necesaria para muchos desarrolladores que utilicen Internet Explorer como navegador principal.

Bueno, menos mal que mañana veremos la mejor herramienta de todas, y mi recomendación especial.

Artículos Relacionados:

• Cambia el estilo de tus smileys
• Hotfix, parcheando WordPress con estilo
• Formulario de acceso donde quieras
• Añadir extensiones (.html o .php) a páginas WordPress
• Quitar el aviso de navegador anticuado en WordPress

Artículos Relacionados:

• Precarga de WordPress en Google Chrome
• 2.400 blu ray de doble cara para almacenar un año de la comunidad WordPress
• 2.400 blu ray de doble cara para almacenar un año de la comunidad WordPress
• De qué están hechas las webs
• De qué están hechas las webs

Contenidos de "Herramientas de Desarrollo de Navegadores"

1. Opera + DragonFly
2. Firefox + Firebug
3. Internet Explorer + Developer Tools

Hace tiempo que quería comentar acerca de esos añadidos o herramientas que traen todos los navegadores y que ayudan a desarrolladores, y usuarios con ganas de aprender, a conocer mejor el diseño interno de los blogs que visitan o mantienen.

Y, aunque puedas pensarlo, no voy a empezar por los mas populares, sino que lo haré con el navegador Opera y su utilidad integrada llamada DragonFly.

Para utilizarlo no necesitas descargar nada pues Opera 9.5 ya viene con Dragonfly incorporado en el menú “Herramientas -> Avanzado -> Herramientas de desarrollo“.

Una vez seleccionado el menú correspondiente te muestra la aplicación al fondo del navegador, aunque puedes colocarlo fácilmente en su propia ventana. Navegando por los distintos apartados vas a poder inspeccionar los scripts y especialmente el DOM completo, que además soporta búsquedas por elemento. También vas a poder ver todos los estilos de la página y las reglas CSS que se aplican a cada elemento. También dispone de una consola de error y una vista de “diseño” (layout) que muestra los anchos, ,altos, padding, borders y mas información útil.

(clic para ampliar)

Dragonfly es una herramienta realmente nueva, y aún le faltan algunos detalles para que sea tan fácil de usar como otras pero es de gran ayuda, y muy completa. Una particularidad de Opera, que la hace especialmente interesante, es la orientación móvil de este navegador, lo que hace que Dragonfly sea una herramienta privilegiada para el desarrollo y debug de aplicaciones y servicios online especialmente diseñados para dispositivos móviles.

También me ha gustado las posibles configuraciones de Dragonfly a la hora de presentar los resultados en cada apartado.

Dragonfly adolece aún de algunas opciones importantes, como edición “al vuelo” de CSS, pero pronto estará disponible, en la versión Alpha 2, también descargable como aplicación independiente.

Descarga Opera y compruébalo por ti mismo, mañana seguimos con la serie de Herramientas de Desarrollo de Navegadores.

Artículos Relacionados:

• Cambia el estilo de tus smileys
• 10 maneras de reducir el “bounce rate” en WordPress
• El código es poesía, CSS es arte
• WordPress Jeopardy
• Miniaturas por defecto en todas las entradas