CiberPrensa » DOM http://ciberprensa.com La evolución de los medios en la red Sat, 26 May 2012 00:08:27 +0000 es hourly 1 http://wordpress.org/?v=3.3.2 Firefox + Firebug http://ciberprensa.com/firefox-firebug/ http://ciberprensa.com/firefox-firebug/#comments Tue, 15 Jul 2008 22:02:48 +0000 Fernando http://ciberprensa.com/?p=2260

Contenidos de "Herramientas de Desarrollo de Navegadores"

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

Bueno, seguimos hoy con la serie de Herramientas para desarrolladores, y en esta ocasión vamos a ver una de las utilidades mas conocidas, e imprescindible para muchos. No es que sea la mejor, que ya anticipo que no lo es, pero si la mas utilizada gracias – preferentemente – a la gran implantación del navegador Firefox.

Firebug es un añadido al navegador Firefox que se instala separadamente pero que luego funciona totalmente integrado en Firefox mostrando un icono en la parte inferior de la pantalla que mostrará si hay problemas de código en la página que estás visitando o no, y en cualquier caso te ofrece herramientas de desarrollo y debug avanzadas al pulsar en su icono.

Una vez abierta la zona de trabajo tienes de todo: muestra de errores, pruebas de rendimiento, vista completa del , edición en vivo, consola, etc. Pero lo mejor que tiene Firebug es el botón de inspección “Inspect”, que te permite mostrar partes concretas de la página solo con colocar el cursor sobre cada sección de la misma, identificando las partes de código que la componen.

firefox + firebug

(clic para ampliar)

Firebug es una de mis herramientas preferidas y mi elegida para Firefox (aunque hay mas), no obstante no es la mejor de todas, esa queda para el último artículo de esta serie – y aún queda otro mas antes.

Anterior de la serie Siguiente de la serie

Artículos Relacionados:

]]> http://ciberprensa.com/firefox-firebug/feed/ 8 Opera + DragonFly http://ciberprensa.com/opera-dragonfly/ http://ciberprensa.com/opera-dragonfly/#comments Mon, 14 Jul 2008 22:02:20 +0000 Fernando http://ciberprensa.com/?p=2243

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 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 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.

Siguiente de la serie

Artículos Relacionados:

]]> http://ciberprensa.com/opera-dragonfly/feed/ 0