¿Le resultó útil esta página?
Sus comentarios sobre este contenido son muy importantes. Háganos saber su opinión.
¿Tiene comentarios adicionales?
Caracteres restantes: 1500
Novedades en F12 con Windows 8.1 Update

Novedades en F12 con Windows 8.1 Update

Publicado el lunes, 14 de abril de 2014, 2:59 p.m.



URL de referencia: http://blogs.msdn.com/b/ie/archive/2014/04/14/what-s-new-in-f12-with-windows-8-1-update.aspxhttp://blogs.msdn.com/b/ie/archive/2014/04/14/what-s-new-in-f12-with-windows-8-1-update.aspx


Nos complace anunciar un conjunto de actualizaciones sustanciales a las herramientas de desarrollo en IE, (F12) así como en Visual Studio 2013 Update 2. Las actualizaciones en F12 acompañan a las nuevas versiones en IE11.

Anteriormente, hemos descrito las capacidades de F12, y su enfoque en un flujo de trabajo iterativo rápido, proporcionando datos precisos en el Explorador DOM y proporcionando datos accionables en las herramientas de rendimiento y memoria.

A medida que uses F12 con esta actualización, verás mejoras para lo siguiente:

  • Mayor flujo de trabajo iterativo con seguimiento de cambios en las herramientas CSS
  • Capacidad de depurar en el código que has escrito como CoffeeScript o TypeScript, con soporte de mapas de origen, y de depurar “just-my-code” (solo mi código), si estás usando bibliotecas de otros desarrolladores
  • Mejoras que te hacen acceder a soluciones con mayor rapidez, por ejemplo, al encontrar pérdidas de memoria, con las herramientas de instantáneas de JS mejoradas y mejoras de filtrado.

Echemos un vistazo a estas mejoras a las herramientas de F12.

Seguimiento de los cambios que se realizan en CSS con las barras de cambio

Uno de los puntos fuertes más importantes de las herramientas como F12 es que te permiten editar el aspecto de cualquier sitio web directamente dentro del explorador, sin que se requiera nuestro código de origen. Pero si pasas tiempo realizando ediciones es difícil realizar un seguimiento de todos los cambios que realizas en tu CSS y luego aplicar esas ediciones finales de nuevo en tus códigos fuente de origen. Para mejorar esta situación hemos presentado una capacidad para registrar y realizar un seguimiento de los cambios, visualmente con "barras de cambio", así como mediante un nuevo panel CSS "Cambios" en el Explorador DOM.

Cualquier cambio que realices en el panel Estilos del Explorador DOM a las propiedades y reglas CSS tendrá una pista visual en el margen izquierdo junto a la propiedad o la regla que has editado. Estas son las "barras de cambio" y se muestran en verde para propiedades nuevas, en amarillo para valores y propiedades cambiados y en rojo, para propiedades eliminadas. Estas barras de cambio se conservarán, aunque comiences a mirar otros nodos DOM.

Barras de cambio de la pestaña Estilos

Dn751545.64833C899037FFCA7B1595A43E4633BD(es-es,MSDN.10).png

Como puede que realices múltiples ediciones en muchos nodos, hemos agregado una nueva pestaña en el panel CSS que muestra todos los cambios de la sesión de F12 actual, como una vista de diferencia para que puedas usarla como lista de comprobación cuando realizas ediciones manuales en tu código fuente. También admite la capacidad de copiar y revertir cambios a través de un menú contextual.

La nueva pestaña Cambios

Dn751545.1BB9D288CD0968149D24426E6D84D654(es-es,MSDN.10).png

Depuración de la aplicación con "Just My Code"

Si estás desarrollando aplicaciones y sitios web, es probable que estés usando bibliotecas de terceros como jQuery o Angular, y normalmente estas bibliotecas están a menudo minimizadas. Con frecuencia vemos a los desarrolladores que están depurando su paso de código en código de biblioteca, y se entierran en las profundidades de esa biblioteca, antes de poder volver a su código para depurar su problema.

Visual Studio ha estado dando soporte a una característica de lenguajes administrados por ““Just My Code” (JMC) (Solo mi código) durante un tiempo y con Visual Studio 2012 también está habilitado para JavaScript. La idea tras JMC es que conservamos el depurador en el código, en el código que deseas depurar y no en el código que no puedes cambiar realmente.

Con esta característica ahora en F12, hay dos cuestiones clave que verás cuando depures

  • Nunca "entrarás" en un archivo (biblioteca) marcado como código de biblioteca. Puedes marcar una biblioteca mediante el selector de archivos en el depurador (ver a continuación), aunque hayas entrado en el archivo. Una vez marcado, cualquier operación por pasos te llevará a su código.
  • Si habilitas "Interrupción en todas las excepciones" nunca interrumpirás en una excepción generada y controlada en el código de biblioteca.

Marcado de archivos como código de biblioteca

Dn751545.F94347F8C503DB25FC2F33D8119880E4(es-es,MSDN.10).png

De manera predeterminada, F12 reconocerá archivos que coinciden con la URL *.min.js como código de biblioteca. Pero puedes modificar este comportamiento con facilidad, marcando bibliotecas en el selector de archivos del depurador o en el menú contextual de la pestaña de archivo si tienes el archivo abierto en el depurador.

Mostraremos mucho más acerca de esta característica y el flujo de trabajo en una publicación de blog de seguimiento.

Depuración de tu aplicación escrita con otros lenguajes con mapas de origen (v3)

A medida que las aplicaciones de JavaScript se han ido volviendo cada vez más complejas recientemente, hay una tendencia en aumento de crear en otro lenguaje que compile en JavaScript (las herramientas de F12 se escriben en TypeScript y se compilan en JavaScript, por ejemplo). De manera similar, puede que hayas minimizado código JavaScript que no es el código fuente de origen en el que has escrito la aplicación. Este proceso de compilación significa que el JavaScript que se ejecuta en el explorador y que depura, no es el código que tienes en el editor, lo cual hace que la depuración tenga mayor dificultad.

Para resolver este problema, hay un formato controlado por la comunidad que ha obtenido mucha tracción con exploradores y Visual Studio, que asigna código fuente de origen y archivos compilados denominados “mapas de origen” (especificación). Estos mapas se generan durante la compilación y con esta versión de F12 hemos agregado compatibilidad para v3 de la especificación de mapa de origen.

Cuando un archivo JavaScript compilado define un mapa de origen válido, F12 tomará por defecto la carga del archivo de código fuente original, en lugar del archivo JS en ejecución, cuando se activan los ‘mapas de origen’ (un botón en el depurador). Tendrás las siguientes capacidades:

  • Los archivos del selector de archivos usan su nombre de código fuente original, en lugar de los documentos en ejecución.
  • Los archivos que abres en el depurador y usas para pasar por el código se encuentran en tus archivos de código fuente originales, y para TypeScript, CoffeeScript y Script # a estos archivos se les aplicarán los colores adecuados (como puedes ver con el archivo TypeScript a continuación).

Dn751545.7C9FE1116C07C64447926CD04D81FB37(es-es,MSDN.10).png

Como con Just-My-Code, trataremos con mayor detenimiento los mapas de origen en un post de blog de seguimiento.

Instantáneas tridireccionales

Al depurar una pérdida de memoria, normalmente se te presentará una gran cantidad de datos, incluso si se filtran, que crean los generadores de perfiles de memoria, lo que complica más la búsqueda de esa pérdida de memoria. En F12 habíamos llevado a cabo anteriormente pasos para que las herramientas resumieran el estado de la aplicación en los mosaicos de instantáneas y sugirieran posibles problemas cuando las condiciones de funcionamiento lo permitieran con los indicadores de información de DOM separados. Sin embargo, en esta actualización, deseábamos llevar esto un paso más allá, ayudando a los desarrolladores a reducir a cero los problemas incluso con mayor facilidad.

La herramienta de memoria de F12 incluye ahora la capacidad de comparar tres instantáneas (y de obtener una vista de ámbito de dichas instantáneas), lo cual es un proceso de limpiador para determinar una pérdida. Las instantáneas son:

  • El estado inicial de tu aplicación antes de que inicies el escenario que proporciona la línea base para los objetos de tu aplicación.
  • Una vez que se completa el escenario, lo que puede aumentar la línea base posible para tu aplicación, que a continuación requiere una instantánea más una vez que ejecute el escenario de nuevo.
  • El estado de vuelta a la normalidad de su aplicación, una vez que intenta el escenario de nuevo. En este estado todos los objetos de su escenario se deberían haberse liberado (o esperas que se vuelvan activos).

Con estas instantáneas puedes compararlos y usar el nuevo desplegable de filtro “Ámbito” para seleccionar los “Objetos dejados de la instantánea nº 2”, lo que representa el estado final del escenario y potencialmente un conjunto de objetos que no deberían aparecer más, como se muestra a continuación.

Filtro Ámbito

Dn751545.D0245922FCA11D80703A309631FFD651(es-es,MSDN.10).png

La vista de tipos que ves anteriormente muestra la lista de objetos y un indicador de margen interno del lugar en el que se pueden encontrar posibles problemas.

Herramientas para IE en Windows Phone en Visual Studio 2013 Update 2

Si has pasado tiempo intentando crear una versión móvil atractiva de tu sitio web probablemente te habrás enfrentado al problema de que no aparece correctamente en exploradores móviles o de que no funciona como debiera. Para ayudar con esto en Windows Phone, nos complace anunciar que en Visual Studio 2013 Update 2 hemos habilitado el uso de las herramientas de rendimiento y depuración de Visual Studio para Internet Explorer en Windows Phone 8.1. Para obtener detalles sobre esto lee el blog de Visual Studio ALM sobre este tema.

Otras muchas mejoras…

En esta versión de F12 hemos tratado de abordar muchas solicitudes de cliente, así como errores de direcciones que incluyen varios bloqueos provocados por el Network Inspector y que no respetan comentarios condicionales al usar F12 para los modos de documentos inferiores del emulador. En lugar de mostrar los errores aquí, estos se actualizarán en el sitio de Microsoft Connect para IE (https://connect.microsoft.com/IE/Feedback).

Esta es una lista más detallada de los cambios que verás en esta versión de F12.

Shell

  • Ctrl+[ y Ctrl+] para navegar entre herramientas

Consola

  • Desplegable para enumerar los destinos de ejecución.
  • Inspeccionar objetos que se registran mediante console.log incluido el formato printf-style.
  • Variables locales (en punto de interrupción) en IntelliSense para la consola.
  • Método abreviado de $_ de consola para acceder al resultado de la última evaluación en la consola.
  • Registrar siempre mensajes de la consola, antes del inicio de F12 (mediante Opciones de Internet -> Opciones avanzadas -> (marcar) Registrar siempre mensajes de la consola de desarrollador).

Depurador

  • Persistencias de proceso empresariales, inspecciones, pestañas y similares para que no siga perdiendo mi estado.
  • Depurar mi Typescript/código compilado dentro de F12 con mapas de origen.
  • Depurar solo mi código y que no se me moleste con código de biblioteca (JMC).
  • Código de evaluación de nombre mediante comentario //#sourceUrl=<url>.
  • Método abreviado de teclado para anular y actualizar página cuando se interrumpe mediante Ctrl+Mayús+F5.
  • Nombres de función completos (por ejemplo, a.b.c) en pila de llamadas y vistas de generador de perfiles.

Explorador DOM

  • Seudoestados CSS: establecen el seudoestado de un elemento con el fin de probar mis seudoestilos.
  • Barras de cambio CSS: permiten ver qué valores han cambiado en la vista de estilos.
  • Vista de cambios CSS: permite ver los cambios CSS aplicados finales y copiarlos en el portapapeles.
  • Panel de estilos calculado combinado: permite ver los estilos CSS en un panel CSS cohesionado agregando y editando vínculos al origen.
  • Ctrl+B en el Explorador DOM para el elemento seleccionado.

Emulación

  • Reconocimiento del modo de documento: por qué mi página se encuentra en un modo de documento determinado para comprender mejor mis escenarios de compatibilidad.

Capacidad de respuesta de la interfaz de usuario

  • Ordenar todos los niveles de eventos en la vista de detalles de escala de tiempo por duración.
  • Simplificar la vista de detalles de la escala de tiempo filtrando eventos dentro de determinadas categorías (por ejemplo, GC, descodificación de imagen).
  • Ampliar con facilidad las vistas de detalles y de gráficos a la duración de tiempo para una instancia de evento específica (mediante menú contextual).
  • Identificar la propiedad exacta que se ha cambiado (y el valor al que se ha cambiado) cuando los estilos en línea del elemento de DOM se modifican mediante programación.

Memoria

  • Identificar la línea de código responsable de la asignación de una función específica, de manera que pueda correlacionar la memoria con el origen.
  • Elemento de menú contextual para mostrar objeto en vista de dominadores (y ver tamaño conservado, etc.).
  • Actualizaciones a las vistas de tipos para mostrar qué tipos representaban el crecimiento de la mayoría en una diferencia, de manera que se pueda racionalizar la renovación de objeto con mayor facilidad.
  • Líneas de cuadrícula en interfaz de usuario de tabla.
  • Interfaz de usuario de configuración (mostrar integrados, referencias circulares, id. de objeto).

Resumen

Con esta actualización a IE11 y F12, estamos actualizando herramientas de desarrollo más a menudo ofreciéndote las características más recientes y las correcciones a errores tan pronto como podemos. Expera tener más noticias nuestras y si quieres enviar comentarios, o preguntar sobre nuevas características y solicitar ayuda, solo tienes que dirigirse en Twitter a @IEDevChat o a través de la herramienta para envío de comentarios de IE11o en Connect.

Esta publicación solo trata de manera superficial las novedades de F12. En las siguientes semanas publicaremos entradas de blog que profundizarán más sobre el tema y te mostrarán cómo usar F12. También encontrarás nuestra documentación completa sobre herramientas de desarrollo de F12 en MSDN.

Mientras tanto, esperamos recibir tus comentarios. Puedes ponerte en contacto con nuestro equipo en Twitter en @IEDevChat, a través de la herramienta para envío de comentarios de IE11o en Connect.

— Andy Sterland, administrador de programas, herramientas de F12

— Jonathan Carter, administrador de programas, herramientas de F12

— Simon Calvert, administrador de programas principal, herramientas de F12



Mostrar:
© 2015 Microsoft