#VS2012 Page Inspector. El Camino hacia la Luz!


Por fin! he de admitirlo y seré fuertemente crítico, las versiones anteriores de Visual Studio (Incluyendo la 2010) tenían un pequeño olor apestoso en cuanto al tema del diseño web se refiere. (Para todo lo demás, pondría las manos en el fuego por él!).

Entrando en el tema y el ¿Por qué? de lo apestoso, si miramos un poco en la historia, Visual Studio siempre se mantuvo básico en el tema del diseñador, con la llegada de MVC las cosas fueron tomando otro enfoque! y con la llegada del Razor muchísimo más!, pero ya hemos llegado a la cúspide, con el VS2012, una gran herramienta vino con el, el Page Inspector, pensado en la agilidad, la practicidad y la comodidad del desarrollador web!.

Page Inspector (Primeras Impresiones).

Lanzando el Page Inspector; en el ya conocido “Play” para lanzar el sitio sobre el servidor de asp.net o el IIS Express o el entorno de depuración de Azure nos da varias alternativas, primero lista todos los navegadores instalados en la maquina y por última opción nos ofrece el Page Inspector.

New Picture

Cuando se ha completado la compilación del proyecto, cargará en nuestro entorno a modo de pestaña El Page Inspector que consta básicamente de 3 Regiones.

New Picture (2)

En la parte superior veremos como se ve la pagina renderizada, en la parte inferior izquierda veremos como se generó el HTML y esto es muy beneficioso cuando hablamos de MVC y mas aún de Razor, Allí depurar el comportamiento de los Helpers y las vistas se hace muy práctico y sencillo!; en la parte inferior derecha veremos pestañas que nos muestran los estilos y atributos de los elementos seleccionados en la vista superior con el botón de inspección (Al mejor estilo de FireBug).

De igual modo al posicionar el cursor sobre las regiones de código HTML generado, veremos como se resalta sobre la vista de diseño el elemento.

New Picture (3)

También veremos como la pestaña de Layout nos muestra y permite editar los atributos correspondientes al Margin, Padding, Border, de forma muy sencilla!

Esta herramienta me recuerda a una muy nueva herramienta y creo que de allí ha nacido esta genial idea y es el Super Preview de Expression Web, que ahora tiene un excelente compañero como lo es el Page Inspector.

Hasta aquí por hoy.

Muchas Gracias.

Juan Manuel Lombana