Safari + Inspector Web

Domingo, 20 de Julio de 2008 |

Destacados, Internet, Software, Tutoriales

Contenidos de "Herramientas de Desarrollo de Navegadores"

  1. Opera + DragonFly
  2. Firefox + Firebug
  3. Internet Explorer + Developer Tools
  4. Safari + Inspector Web

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.

Comparte este artículo:
  • TwitThis
  • Meneame
  • Facebook
  • Bitacoras.com
  • Wikio
  • del.icio.us
  • StumbleUpon
  • Google Bookmarks
  • Live
  • MySpace
  • Technorati
  • Turn this article into a PDF!
  • E-mail this story to a friend!
  • Print this article!

Puede que también te interese ...


El Inspector Web de Safari 4
Llevo aún pocas horas con Safari 4, la nueva versión del navegador de Apple, y tengo que decir que...

Guía de Saft
El navegador Safari es posiblemente uno de los mas avanzados que existen. Hasta ahora solo era conocido...

InquisitorX, Spotlight en tu navegador
Hoy te descubrimos un pequeño plugin que hará que tu navegador Safari o Camino realicen búsquedas...

iPhone ya está en la Red
Hace tiempo que hay informes de sitios web que han detectado entre los navegadores que visitan sus webs...
, , , , ,

Este artículo ha sido escrito por:

Fernando Tellado - que ha publicado 1502 artículos en CiberPrensa.


Contacta con el autor

1 Comentarios a este Artículo

  1. SP3NCER (1 comentarios) Dijo:

    Todo muy bonito, pero a la hora que desactivo las propiedades CSS,
    ya no puedo volver a habilitarlas, y la unica manera de volver a lo que la pagina, muestra originalmente es volviendola a cargar,creo que eso es un gran error.
    La aplicacion es impresionante pero ese detalle es uan incomodidad.

    De estar equivocado, por favor avisenme.

    spencer.edu@gmail.com

Escribe una respuesta