Usar el Inspector de página en Visual Studio 2012

por el equipo de Web Camps

En este laboratorio práctico, descubrirá una nueva herramienta para buscar y corregir problemas de página web en Visual Studio: el Inspector de página.

Inspector de página es una nueva herramienta que incorpora herramientas de diagnóstico para el explorador en Visual Studio y ofrece una experiencia integrada del explorador, ASP.NET y el código fuente. Representa una página web (HTML, Web Forms, ASP.NET MVC o páginas web) directamente en el IDE de Visual Studio y le permite examinar el código fuente y la salida resultante. Inspector de página le permite descomponer fácilmente un sitio web, crear rápidamente páginas desde cero y diagnosticar problemas.

Hoy en día tenemos una serie de marcos web que crean sitios web flexibles y escalables de forma oportuna, como ASP.NET MVC y WebForms. Por otro lado, resulta más difícil encontrar problemas en las páginas porque el IDE no admite la vista del diseñador en páginas basadas en plantillas y contenido dinámico. Por tanto, estos sitios web se deben abrir en un explorador para ver cómo se muestran a un usuario.

Los desarrolladores web usan herramientas externas para encontrar problemas que se ejecutan periódicamente en el explorador. Después, vuelven al IDE y comienzan a corregirlos. Esta actividad de ida y vuelta entre el IDE, el explorador y las herramientas de generación de perfiles puede ser ineficaz y, a veces, se necesita una nueva implementación y limpieza de la caché cada vez que se quiere reproducir un problema.

En el desarrollo de páginas web, Inspector de página es el puente entre el cliente (herramientas del explorador) y el servidor (ASP.NET y código fuente), ya que une lo mejor de ambos mundos mediante el uso de un conjunto combinado de características.

Al usar Inspector de página, se pueden comprobar qué elementos de los archivos de origen (lo que incluye el código del lado servidor) han creado el marcado HTML que luego se representa en el explorador. Con Inspector de página también se pueden modificar propiedades CSS y los atributos de elementos DOM para los cambios reflejados inmediatamente en el explorador.

En este laboratorio práctico se le guiará por las características de Inspector de página y se mostrará cómo puede usarlas para corregir problemas en las aplicaciones web. Este laboratorio contiene dos ejercicios que usan flujos similares, pero que tienen como destino tecnologías diferentes. Si es desarrollador de ASP.NET MVC, siga el ejercicio 1; si es desarrollador de WebForms, siga el ejercicio 2.

En este laboratorio se le guía por las mejoras y las nuevas características descritas anteriormente mediante la aplicación de cambios menores a una aplicación web de ejemplo proporcionada en la carpeta Source.

Objetivos

En este laboratorio práctico, aprenderá a:

  • Descomposición de un sitio web mediante Inspector de página
  • Inspección y una vista previa de los cambios de estilos CSS con Inspector de página
  • Detección y corrección de problemas en las páginas web mediante Inspector de página

Requisitos previos

Debe tener los siguientes elementos para completar este laboratorio:


Ejercicios

Este laboratorio práctico incluye los siguientes ejercicios:

  1. Ejercicio 1: Uso de Inspector de página en proyectos de ASP.NET MVC
  2. Ejercicio 2: Uso de Inspector de página en proyectos de WebForms

Nota:

Cada ejercicio va acompañado de una solución inicial ubicada en la carpeta Begin del ejercicio que le permite seguir cada ejercicio independientemente de los demás. Dentro del código fuente de un ejercicio, también encontrará una carpeta End que contiene una solución de Visual Studio con el código que resulta de completar los pasos del ejercicio correspondiente. Puede usar estas soluciones como guía si necesita ayuda adicional a medida que trabaja en este laboratorio práctico.

Tiempo estimado para completar este laboratorio: 30 minutos.

Ejercicio 1: Uso de Inspector de página en proyectos de ASP.NET MVC

En este ejercicio, aprenderá a obtener una vista previa y depurar una solución ASP.NET MVC 4 mediante Inspector de página. En primer lugar, realizará un breve recorrido por la herramienta para aprender las características que facilitan el proceso de depuración web. Después, trabajará en una página web con problemas de estilo. Aprenderá a usar Inspector de página para buscar el código fuente que genera el problema y corregirlo.

Tarea 1: Exploración de Inspector de página

En esta tarea, aprenderá a usar Inspector de página en el contexto de un proyecto de ASP.NET MVC 4 que muestra una galería de fotos.

  1. Abra la solución Inicio ubicada en la carpeta Source/Ex1-MVC4/Begin/.

    1. Tendrá que descargar algunos paquetes NuGet que faltan antes de continuar. Para ello, haga clic en el menú Proyecto y seleccione Administrar paquetes NuGet.

    2. En el cuadro de diálogo Administrar paquetes NuGet, haga clic en Restaurar para descargar los paquetes que faltan.

    3. Por último, para compilar la solución, haga clic en Compilar | Compilar solución.

      Nota:

      Una de las ventajas de usar NuGet es que no es necesario incluir todas las bibliotecas en el proyecto, lo que reduce su tamaño. Con NuGet Power Tools, si especifica las versiones del paquete en el archivo Packages.config, podrá descargar todas las bibliotecas necesarias la primera vez que ejecute el proyecto. Por este motivo tendrá que ejecutar estos pasos después de abrir una solución existente desde este laboratorio.

  2. En el Explorador de soluciones, busque la vista Index.cshtml en la carpeta del proyecto /Views/Home, haga clic con el botón derecho en ella y seleccione Ver en Inspector de página.

    Selecting a file to preview in Page Inspector

    Selección de un archivo para obtener una vista previa en Inspector de página

  3. La ventana Inspector de página mostrará la dirección URL /Home/Index asignada a la vista de origen seleccionada.

    The first contact with PageInspector

    El primer contacto con Inspector de página

    La herramienta Inspector de página se integra en el entorno de Visual Studio. Inspector contiene un explorador insertado, junto con un potente generador de perfiles HTML. Tenga en cuenta que no tiene que ejecutar la solución para ver el aspecto de las páginas.

    Nota:

    Cuando el ancho del explorador de Inspector de página es menor que el de la página abierta, no la verá correctamente. Si esto sucede, ajuste el ancho de Inspector de página.

  4. Haga clic en la pestaña Archivos de Inspector de página.

    Verá todos los archivos de origen que componen la página Índice. Esta característica ayuda a identificar todos los elementos de un vistazo, especialmente cuando se trabaja con plantillas y vistas parciales. Observe que también puede abrir cada uno de los archivos si hace clic en los vínculos.

    The-Files-tab

    Pestaña Archivos

  5. Haga clic en el botón Alternar modo de inspección, situado a la izquierda de las pestañas.

    Esta herramienta le permitirá seleccionar cualquier elemento de la página y ver su código HTML y de Razor.

    Toggle-Inspection-Mode-button

    Botón Alternar modo de inspección

  6. En el explorador de Inspector de página, mueva el puntero del mouse sobre los elementos de la página. Mientras mueve el puntero del mouse sobre cualquier parte de la página representada, se muestra el tipo de elemento y se resalta el código o marcado de origen correspondiente en el editor de Visual Studio.

    Screenshot showing the Page Inspector window and the Visual Studio editor with the element type displayed and the corresponding source markup highlighted.

    Modo de inspección en acción

    Nota:

    No maximice la ventana de Inspector de página o no podrá ver la pestaña de vista previa en la que se muestra el código fuente. Si hace clic en el elemento en Inspector de página cuando está maximizado, aparecerá el código fuente de la selección, pero se ocultará la ventana Inspector de página.

    Si presta atención al archivo Index.cshtml, observará que la parte del código fuente que genera el elemento seleccionado está resaltada. Esta característica facilita la edición de archivos de código fuente largos, lo que proporciona una manera directa y rápida de acceder al código.

    Screenshot of the Page Inspector window and the Visual Studio editor Index.cshtml file showing that the portion of source code generating the selected element is highlighted.

    Inspección de elementos

  7. Haga clic en el botón Alternar modo de inspección (Select the HTML tab to display the HTML code rendered in the Page Inspector browser. ) para deshabilitar el cursor.

  8. Seleccione la pestaña HTML para mostrar el código HTML representado en el explorador de Inspector de página.

  9. En el marcado HTML, busque el elemento de lista con el vínculo Koala y selecciónelo.

    Observe que al seleccionar el código, la salida correspondiente se resalta automáticamente en el explorador. Esta característica es útil para ver cómo se representa un bloque HTML en la página.

    Selecting HTML element in the page

    Selección del elemento HTML en la página

  10. Haga clic en el botón Alternar modo de inspección para habilitar el modo de inspección y haga clic en la barra de navegación. A la derecha del código HTML, en el panel Estilos, verá una lista con los estilos CSS aplicados al elemento seleccionado.

    Nota:

    Como el encabezado forma parte del diseño del sitio, Inspector de página también abrirá el archivo _Layout.cshtml y resaltará el segmento del código afectado.

    Discovering styles

    Detección de estilos y archivos de origen de un elemento seleccionado

  11. Con el puntero de alternancia de inspección habilitado, mueva el puntero del mouse debajo de la barra azul destacada y haga clic en el semicírculo.

    Screenshot of the Page Inspector window showing the mouse pointer selecting the half circle below the blue featured bar in the upper left of the screen.

    Selección de un elemento

  12. En el panel Estilos, busque el elemento background-image en el grupo .main-content. Desactivebackground-image y vea lo que sucede. Observará que el explorador reflejará los cambios inmediatamente y que el círculo se oculta.

    Nota:

    Los cambios que aplique en la pestaña Estilos de Inspector de página no afectan a la hoja de estilos original. Puede desactivar los estilos o cambiar sus valores tantas veces como quiera, pero se restaurarán después de actualizar la página.

    Enabling and disabling CSS styles

    Habilitación y deshabilitación de estilos CSS

  13. Ahora, haga clic en el texto "el logotipo aquí" del encabezado mediante el modo de inspección.

  14. En la pestaña Estilos, busque el atributo CSS dfont-size en el grupo .site-title. Haga doble clic en el valor del atributo, reemplace el valor 2.3 em por 3 em y presione ENTRAR. Observe que el título tiene un aspecto más grande.

    Changing CSS values in the Page Inspector

    Cambio de valores CSS en Inspector de página

  15. Haga clic en la pestaña Seguimiento de estilos, que se encuentra en el panel derecho de Inspector de página. Se trata de una manera alternativa de ver todos los estilos aplicados a la selección, ordenados por nombre de atributo.

    CSS styles tracing

    Seguimiento de estilos CSS del elemento seleccionado

  16. Otra característica de Inspector de página es el panel Diseño. Con el modo de inspección, seleccione la barra de navegación y, después, haga clic en la pestaña Diseño del panel de la derecha. Verá el tamaño exacto del elemento seleccionado, así como su desplazamiento, margen, relleno y tamaño de borde. Observe que también puede modificar los valores desde esta vista.

    Screenshot showing the navigation bar with the Layout tab selected displaying a diagram of the element layout.

    Diseño de elementos en Inspector de página

¿Cómo diagnosticaría problemas de páginas web con versiones anteriores de Visual Studio? Es probable que conozca las herramientas de depuración web que se ejecutan fuera del IDE de Visual Studio, como Herramientas de desarrollo de Internet Explorer o Firebug. Los exploradores solo comprenden HTML, scripting y estilos, mientras que un marco subyacente genera el código HTML que se representará. Por ese motivo, a menudo necesita implementar todo el sitio para ver cómo se muestran las páginas web.

Probablemente haya seguido estos pasos cuando ha querido detectar y corregir un problema en el sitio web:

  1. Ejecutar la solución desde Visual Studio o implementar la página en el servidor web.
  2. En el explorador, abrir las herramientas de desarrollo que usa, o simplemente abrir el código fuente y los estilos e intentar identificar el problema. Para buscar los archivos implicados, habrá usado las características "Buscar" o "Buscar en archivos" con el nombre de las clases de estilo.
  3. Una vez que detectad el error, detiene el explorador web y el servidor.
  4. Limpie la caché del explorador.
  5. Volver a Visual Studio para aplicar una corrección. Repetir todos los pasos y probar.

Como no hay ningún WYSIWYG real en ASP.NET MVC 4, la mayoría de los problemas de estilo se detectan en una fase posterior, después de ejecutar o implementar la aplicación web. Ahora, con Inspector de página, es posible obtener una vista previa de cualquier página sin ejecutar la solución.

En esta tarea, usará Inspector de página y corregirá algunos problemas de la aplicación Galería de fotos.

  1. Con Inspector de página, busque los vínculos Registrar e Iniciar sesión en el lado izquierdo del encabezado.

    Observe que los vínculos no se muestran en el lugar esperado de la derecha, sino como una lista con viñetas. Ahora alineará los vínculos a la derecha y los volverá a ajustar en consecuencia.

    Locating the Register and Log in links

    Búsqueda de los vínculos Registrar e Iniciar sesión

  2. Con el botón de alternancia Modo de inspección seleccionado, haga clic cerca del vínculo Registrar, no en él, para abrir su código.

    Observe que el código fuente de los vínculos se encuentra en el archivo _LoginPartial.cshtml, no en index.cshtml ni _Layout.cshtml, que son los lugares en los que podría buscar en primer lugar. Se le ha colocado directamente en el archivo de origen correcto.

  3. En la pestaña Estilos, busque y haga clic en el elemento <section> #login, que es el contenedor HTML de estos vínculos.

    Observe que el estilo #login se localiza automáticamente en Site.css después de hacer clic. Además, ahora el código está resaltado.

    Screenshot of the Styles tab, on the navigation bar the CSS styles for login is selected with the corresponding code highlighted.

    Selección de los estilos CSS

  4. Quite la marca de comentario del atributo text-align en el código resaltado; para ello, elimine los caracteres de apertura y cierre, y guarde el archivo Site.css.

    Inspector de página es consciente de todos los diferentes archivos que componen la página actual y puede detectar cuándo cambia cualquiera de ellos. Le avisa siempre que la página actual del explorador no está sincronizada con los archivos de origen.

  5. En el explorador de Inspector de página, haga clic en la barra situada debajo de la barra de direcciones para volver a cargar la página.

    Screenshot of the Page Inspector browser displaying the bar located below the address bar that is used to save the changes and reload the page.

    Recarga de la página

    Los vínculos están ahora a la derecha, pero todavía tienen un aspecto similar al de una lista con viñetas. Ahora, quitará las viñetas y alineará los vínculos horizontalmente.

    Screenshot of the upper right of the Page Inspector window showing the Register and Log in links displayed as a bulleted list.

    Página actualizada

  6. Con el modo de inspección, seleccione cualquiera de los elementos <li> que contienen los vínculos "Registrar" e "Iniciar sesión". Después, haga clic en el elemento <section> #login para acceder al código de Styles.css.

    Screenshot showing the Page Inspector window in inspection mode and selecting the Register and Log in links to access Styles.css code.

    Búsqueda del estilo

  7. En Style.css, quite la marca de comentario del código de los elementos #login li. El estilo que va a agregar ocultará la viñeta y mostrará los elementos horizontalmente.

    Screenshot of Style.css restyling the login links to display horizontally.

    Nuevo estilo para los vínculos de inicio de sesión

  8. Guarde el archivo Style.css y haga clic una vez en la barra situada debajo de la dirección para volver a cargar la página. Observe que los vínculos aparecen correctamente.

    Screenshot of the upper right of the Page Inspector window showing the Register and Log in links aligned horizontally.

    Vínculos alineados al lado derecho

  9. Por último, cambiará el título del encabezado. Use el modo de inspección para hacer clic en el texto el logotipo aquí y acceder al código fuente que lo genera.

  10. Ahora está en _Layout.cshtml, reemplace el texto "el logotipo aquí" por "Galería de fotos". Guarde y actualice el explorador de Inspector de página.

    Assigning a new title

    Asignación de un nuevo título

    Photo Gallery page

    Página Galería de fotos actualizada

  11. Por último, seleccione el proyecto PhotoGallery y presione F5 para ejecutar la aplicación. Compruebe que todos los cambios funcionan según lo previsto.


Ejercicio 2: Uso de Inspector de página en proyectos de WebForms

En este ejercicio, aprenderá a obtener una vista previa y depurar una solución de WebForms mediante Inspector de página. En primer lugar, realizará un breve recorrido por la herramienta para aprender las características de Inspector de página que facilitan el proceso de depuración web. Después, trabajará en una página web con problemas de estilo. Aprenderá a usar Inspector de página para buscar el código fuente que genera el problema y corregirlo.

Tarea 1: Exploración de Inspector de página

En esta tarea, aprenderá a usar Inspector de página en el contexto de un proyecto de WebForms que muestra una galería de fotos.

  1. Abra la solución Inicio ubicada en la carpeta Source/Ex2-WebForms/Begin/.

    1. Tendrá que descargar algunos paquetes NuGet que faltan antes de continuar. Para ello, haga clic en el menú Proyecto y seleccione Administrar paquetes NuGet.

    2. En el cuadro de diálogo Administrar paquetes NuGet, haga clic en Restaurar para descargar los paquetes que faltan.

    3. Por último, para compilar la solución, haga clic en Compilar | Compilar solución.

      Nota:

      Una de las ventajas de usar NuGet es que no es necesario incluir todas las bibliotecas en el proyecto, lo que reduce su tamaño. Con NuGet Power Tools, si especifica las versiones del paquete en el archivo Packages.config, podrá descargar todas las bibliotecas necesarias la primera vez que ejecute el proyecto. Por este motivo tendrá que ejecutar estos pasos después de abrir una solución existente desde este laboratorio.

  2. En el Explorador de soluciones, busque la página Default.aspx, haga clic con el botón derecho en ella y seleccione Ver en Inspector de página.

    Opening Default.aspx with Page Inspector

    Apertura de Default.aspx con Inspector de página

  3. En la ventana Inspector de página se mostrará Default.aspx.

    Viewing Default.aspx in Page Inspector

    Visualización de Default.aspx en Inspector de página

    La herramienta Inspector de página se integra en el entorno de Visual Studio. Inspector contiene un explorador insertado, junto con un potente generador de perfiles HTML que mostrará el código seleccionado. Tenga en cuenta que no tiene que ejecutar la solución para ver el aspecto de las páginas.

    Nota:

    Cuando el ancho del explorador de Inspector de página es menor que el de la página abierta, no la verá correctamente. Si esto sucede, ajuste el ancho de Inspector de página.

  4. Haga clic en la pestaña Archivos de Inspector de página.

    Verá todos los archivos de origen que componen la página Default representada. Es una característica útil para identificar todos los elementos de un vistazo, especialmente cuando se trabaja con controles de usuario y páginas maestras. Observe que también puede navegar a cada uno de los archivos.

    The Files tab

    Pestaña Archivos

  5. Haga clic en el botón Alternar modo de inspección, situado a la izquierda de las pestañas.

    Esta herramienta le permitirá seleccionar cualquier elemento de la página y ver su código HTML y .aspx.

    Toggle Inspection Mode button

    Botón Alternar modo de inspección

  6. En el explorador de Inspector de página, mueva el mouse sobre los elementos de la página. Mientras mueve el puntero del mouse sobre cualquier parte de la página representada, se muestra el tipo de elemento y se resalta el código o marcado de origen correspondiente en el editor de Visual Studio.

    Screenshot of the Page Inspector window and the Visual Studio editor with the element type displayed and the corresponding code is highlighted.

    Modo de inspección en acción

    Nota:

    No maximice la ventana de Inspector de página o no podrá ver la pestaña de vista previa en la que se muestra el código fuente. Si hace clic en el elemento en Inspector de página cuando está maximizado, aparecerá el código fuente de la selección, pero se ocultará la ventana Inspector de página.

    Si presta atención al archivo Default.aspx, observará que la parte del código fuente que genera el elemento seleccionado está resaltada. Esta característica facilita la edición de archivos de código fuente largos, lo que proporciona una manera directa y rápida de acceder al código.

    Screenshot of the Page Inspector window and the Visual Studio editor Default.aspx file showing that the portion of source code generating the selected element is highlighted.

    Inspección de elementos

  7. Haga clic en el botón Alternar modo de inspección (Select-the-HTML-tab-to-display-the-HTML-code-rendered-in-the-Page-Inspector-browser. ), ubicado en las pestañas de Inspector de página, para deshabilitar el cursor.

  8. Seleccione la pestaña HTML para mostrar el código HTML representado en el explorador de Inspector de página.

  9. En el código HTML, busque el elemento de lista con el vínculo Koala y selecciónelo.

    Observe que al seleccionar el código, la salida correspondiente se resalta automáticamente en el explorador. Esta característica es útil para ver cómo se representa un bloque HTML en la página.

    Selecting an HTML element in the page

    Selección de un elemento HTML en la página

  10. Haga clic en el botón Alternar modo de inspección para habilitar el modo de inspección y haga clic en la barra de navegación. A la derecha del código HTML, en el panel Estilos, verá una lista con los estilos CSS aplicados al elemento seleccionado.

    Nota:

    Como el encabezado forma parte del diseño del sitio, Inspector de página también abrirá el archivo Site.Master y resaltará el segmento del código afectado.

    Discovering styles WebForms

    Detección de estilos y archivos de origen de un elemento seleccionado

  11. Con el puntero de inspección de alternancia habilitado, mueva el puntero del mouse debajo de la barra de menús y haga clic en el semicírculo vacío.

    Screenshot of the upper left of the Page Inspector window showing the mouse pointer selecting the half circle below the blue featured bar.

    Selección de un elemento

  12. En el panel Estilos, busque el elemento background-image en el grupo .main-content. Desactivebackground-image y vea lo que sucede. Observará que el explorador reflejará los cambios inmediatamente y que el círculo se oculta.

    Nota:

    Los cambios que aplique en la pestaña Estilos de Inspector de página no afectan a la hoja de estilos original. Puede desactivar los estilos o cambiar sus valores tantas veces como quiera, pero se restaurarán después de actualizar la página.

    Enabling and disabling CSS styles2

    Habilitación y deshabilitación de estilos CSS

  13. Ahora, haga clic en el texto "ellogotipo aquí" del encabezado mediante el modo de inspección.

  14. En la pestaña Estilos, busque el atributo CSS dfont-size en el grupo .site-title. Haga doble clic en el atributo una vez para editar su valor. Reemplace el valor 2.3em por 3em y, después, presione ENTRAR. Observe que el título tiene un aspecto más grande.

    Changing CSS values in the Page Inspector2

    Cambio de valores CSS en Inspector de página

  15. Haga clic en la pestaña Seguimiento de estilos, que se encuentra en el panel derecho de Inspector de página. Se trata de una manera alternativa de ver todos los estilos aplicados a la selección, ordenados por nombre de atributo.

    CSS styles tracing of the selected element

    Seguimiento de estilos CSS del elemento seleccionado

  16. Otra característica de Inspector de página es el panel Diseño. Con el modo de inspección, seleccione la barra de navegación y, después, haga clic en la pestaña Diseño del panel de la derecha. Verá el tamaño exacto del elemento seleccionado, así como su desplazamiento, margen, relleno y tamaño de borde. Observe que también puede modificar los valores desde esta vista.

    Screenshot of the navigation bar with the Layout tab selected displaying a diagram of the element layout.

    Diseño de elementos en Inspector de página

¿Cómo diagnosticaría problemas de páginas web con versiones anteriores de Visual Studio? Es probable que conozca las herramientas de depuración web que se ejecutan fuera del IDE de Visual Studio, como Herramientas de desarrollo de Internet Explorer o Firebug. Los exploradores solo comprenden HTML, scripting y estilos, mientras que un marco subyacente genera el código HTML que se representará. Por ese motivo, a menudo necesita implementar todo el sitio para ver cómo se muestran las páginas web.

Probablemente haya seguido estos pasos cuando ha querido detectar y corregir un problema en el sitio web:

  1. Ejecutar la solución desde Visual Studio o implementar la página en el servidor web.
  2. En el explorador, abrir las herramientas de desarrollo que usa, o simplemente abrir el código fuente y los estilos e intentar identificar el problema. Para buscar los archivos implicados, habrá usado las características "Buscar" o "Buscar en archivos" con el nombre de las clases de estilo.
  3. Una vez que detectad el error, detiene el explorador web y el servidor.
  4. Limpie la caché del explorador.
  5. Volver a Visual Studio para aplicar una corrección. Repetir todos los pasos y probar.

Como no hay ningún WYSIWYG real en ASP.NET WebForms, se detectan algunos problemas de estilo en una fase posterior, después de la ejecución o la implementación. Ahora, con Inspector de página, es posible obtener una vista previa de cualquier página sin ejecutar la solución.

En esta tarea, usará Inspector de página y corregirá algunos problemas de la aplicación Galería de fotos. En los pasos siguientes, detectará y corregirá rápidamente algún problema de estilo simple en el encabezado.

  1. Con Inspector de página, busque los vínculos Registrar e Iniciar sesión en el lado izquierdo del encabezado.

    Observe que el vínculo no se muestra en el lugar esperado a la derecha. Ahora alineará el vínculo a la derecha y le volverá a aplicar el estilo adecuado.

    Log in link positioned on the left

    Vínculo de inicio de sesión situado a la izquierda

  2. Con Alternar modo de inspección seleccionado, seleccione el vínculo Iniciar sesión para abrir su código.

    Observe que el código fuente del vínculo se encuentra en el archivo Site.Master, no en la página Default.aspx que es el lugar que podría buscar en primer lugar; se le ha colocado directamente en el archivo de código fuente correcto.

  3. En la pestaña Estilos, busque y haga clic en el elemento <section> #login, que es el contenedor HTML de estos vínculos.

    Observe que el estilo #login se localiza automáticamente en Site.css después de hacer clic. Además, ahora el código está resaltado.

    Screenshot showing the Styles tab on the navigation bar the CSS styles for login is selected with the corresponding code highlighted.

    Selección de los estilos CSS

  4. Quite la marca de comentario del atributo text-align en el código resaltado; para ello, elimine los caracteres de apertura y cierre, y guarde el archivo Site.css.

    Inspector de página es consciente de todos los diferentes archivos que componen la página actual y puede detectar cuándo cambia cualquiera de ellos. Le avisa siempre que la página actual del explorador no está sincronizada con los archivos de origen.

  5. En el explorador de Inspector de página, haga clic en la barra situada debajo de la barra de direcciones para guardar los cambios y volver a cargar la página.

    Screenshot of the Page Inspector browser showing the bar located below the address bar that is used to save the changes and reload the page.

    Recarga de la página

    Los vínculos están ahora a la derecha, pero todavía tienen un aspecto similar al de una lista con viñetas. Ahora, quitará las viñetas y alineará los vínculos horizontalmente.

    Screenshot displaying the upper right of the Page Inspector window showing the Register and Log in links as a bulleted list.

    Página actualizada

  6. Con el modo de inspección, seleccione cualquiera de los elementos <li> que contienen los vínculos "Registrar" e "Iniciar sesión". Después, haga clic en el elemento <section> #login para acceder al código de Styles.css.

    Screenshot of the Page Inspector window in inspection mode and selecting the Register and Log in links to access Styles.css code.

    Búsqueda del estilo

  7. En Style.css, quite la marca de comentario del código de los elementos #login li. El estilo que va a agregar ocultará la viñeta y mostrará los elementos horizontalmente.

    Screenshot of Style.css adding the style so the login links will display horizontally.

    Nuevo estilo para los vínculos de inicio de sesión

  8. Guarde el archivo Style.css y haga clic una vez en la barra situada debajo de la dirección para volver a cargar la página. Observe que los vínculos aparecen correctamente.

    Screenshot showing the upper right of the Page Inspector window displaying the links Register and Log in aligned horizontally.

    Vínculos alineados al lado derecho

  9. Por último, cambiará el título del encabezado. En lugar de buscar el texto "el logotipo aquí" en todos los archivos, use el modo de inspección para hacer clic en el texto y obtener el código fuente que lo genera.

    Finding the site title

    Búsqueda del título del sitio

  10. Ahora está en Site.Master; reemplace el texto "el logotipo aquí" por "Galería de fotos". Guarde y actualice el explorador de Inspector de página.

    Photo Gallery page updated

    Página Galería de fotos actualizada

  11. Por último, presione F5 para ejecutar la aplicación y comprobar que todos los cambios funcionan según lo previsto.


Resumen

Al completar este laboratorio práctico, ha aprendido a usar Inspector de página para obtener una vista previa de la aplicación web sin tener que recompilar y ejecutar el sitio web en un explorador. Además, ha aprendido a buscar y corregir errores rápidamente mediante el acceso directo desde la salida representada al código fuente.

Apéndice A: Instalación de Visual Studio Express 2012 para Web

Puede instalar Microsoft Visual Studio Express 2012 para Web u otra versión "Express" mediante el Instalador de plataforma web de Microsoft . En las instrucciones siguientes se le guía por los pasos necesarios para instalar Visual Studio Express 2012 para Web mediante Instalador de plataforma web de Microsoft.

  1. Vaya a [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Como alternativa, si ya ha instalado el Instalador de plataforma web, puede abrirlo y buscar el producto "Visual Studio Express 2012 para Web con el SDK de Windows Azure".

  2. Haga clic en Instalar ahora. Si no tiene Instalador de plataforma web se le redirigirá para descargarlo e instalarlo primero.

  3. Una vez que abra Instalador de plataforma web, haga clic en Instalar para iniciar la instalación.

    Install Visual Studio Express

    Instalación de Visual Studio Express

  4. Lea todas las licencias y términos de los productos, y haga clic en Acepto para continuar.

    Accepting the license terms

    Aceptación de los términos de licencia

  5. Espere hasta que finalice el proceso de descarga e instalación.

    Installation progress

    Progreso de la instalación

  6. Cuando finalice la instalación, haga clic en Finalizar.

    Installation completed

    Instalación completada

  7. Haga clic en Salir para cerrar el Instalador de plataforma web.

  8. A fin de abrir Visual Studio Express para Web, vaya a la pantalla Inicio, empiece a escribir "VS Express" y, después, haga clic en el icono de VS Express para Web.

    VS Express for Web tile

    Icono de VS Express para Web