Depure y pruebe JavaScript de forma remota con los nuevos complementos de Vorlon.JS

En abril de 2015, nuestro equipo de ingenieros y evangelistas tecnológicos de Microsoft lanzó Vorlon.js : una herramienta de código abierto, extensible e independiente de la plataforma para depurar y probar su JavaScript de forma remota.

Cuando lanzamos el proyecto durante el discurso de apertura de Microsoft Build Developer Conference, solo teníamos tres complementos: DOM Explorer, Interactive Console y Modernizr. Sabíamos en ese momento que la clave del éxito de un proyecto como Vorlon es la cantidad y calidad de los complementos. Cuando desea depurar su sitio web, no desea hacer cosas mucho más complicadas. Solo desea elegir el complemento correcto y obtener la información correcta.

Es por eso que hicimos este proyecto de código abierto. Sabemos que tiene muchas ideas para brindar excelentes experiencias de depuración a los desarrolladores web.

Entonces… 2 meses, 66 solicitudes de extracción, 78 problemas y 547 confirmaciones más tarde: ¡nos enorgullece anunciar que nosotros (USTED y el equipo) acabamos de lanzar la versión 0.0.15 de Vorlon.js! Puedes obtenerlo mediante la clonación nuestro repositorio GitHub o instalarlo usando npmherramienta de comando (npm install –g vorlon).

Nota: si todavía se pregunta qué es Vorlon.js, lea este artículo de David Catuhe primero.

Echemos un vistazo a las novedades de esta versión.

Nuevos complementos

Panel XHR está aquí para ayudarlo a obtener la lista de solicitudes realizadas a través de XMLHttpRequest. Puede optar por habilitar o deshabilitar la grabación usando el jugar botón.

monitor de red le ofrece a usted en Vorlon la posibilidad de ver todos los intercambios de red que se realizan entre el navegador y el servidor web. ¡Proporciona el nombre del recurso, el dominio del servidor, el tipo de solicitud, la duración en milisegundos y una línea de tiempo visual agradable!

Explorador de recursos le brinda información sobre lo que se almacena localmente en la instancia del navegador del cliente. Hay datos sobreSesiones, Galletasy Almacenamiento local. Esto puede ser realmente útil cuando desea depurar el caché local o problemas de inicio de sesión/datos de usuario persistentes.

inspector de gas natural es un depurador de $scope para Angular.js. Tiene un fácil acceso a todos los valores almacenados en cada alcance. Esta primera versión le brinda información, una futura le dará la posibilidad de editar sus alcances.

Mejoras de complementos

Explorador DOM se ha mejorado un LOTE.

Anteriormente, este complemento enviaba todos los datos DOM del cliente al tablero cada vez que cambiaba. Esto tuvo un gran impacto en las actuaciones. Esto ahora está solucionado y puede actualizar el DOM desde el cliente solicitándolo manualmente presionando el botón actualizar o activando la actualización automática en el Ajustes cristal. La actualización automática es más inteligente y usa MutationObserver si está disponible en el navegador del cliente.

Característica adicional: cuando el DOM cambia en el lado del cliente, el indicador redondo en el botón de actualización cambia a rojo. 😉

Como puede ver, el panel Exploración de DOM es más hermoso y más fácil de leer.
Ahora puede editar contenido HTML y atributos haciendo clic en él. Al presionar ENTER, los cambios se aplicarán en el lado del cliente.

La función de resaltado DOM es más fácil de acceder. Ocurre cuando el mouse pasa sobre el elemento DOM en el explorador DOM en el tablero de instrumentos de Vorlon.

También puede hacer clic derecho en un elemento para eliminar o editar cosas. Esta es la mejor forma ergonómica de habilitar la eliminación de atributos.

En el panel derecho, tiene más información que solo el código CSS real ahora.

los diseño La pestaña le brinda información a la que está acostumbrado a obtener en las herramientas F12 clásicas: la información de margen, relleno, borde y tamaño.

Lo mismo para el estilos calculados que contiene todos los estilos CSS aplicados de forma explícita e implícitamente heredados.

los HTML tab es una mejor herramienta para editar texto en el DOM. Puede hacer líneas de corte y aplicar el cambio presionando el botón Guardar.

Finalmente, el ajustes La sección es donde se puede activar la actualización automática para el DOM.

Consola Interactiva tienen algunas características nuevas también.

tenemos el windows.onerror, consola.dir y complejo objeto soporte de registro. Puede navegar en las propiedades del objeto utilizando un árbol visual. Los filtros están disponibles para mostrar solo un subconjunto de registros y puede filtrar usando un área de texto similar a una búsqueda.

Otros cambios y mejoras

Hicimos muchos otros cambios en la organización y las estructuras del código que no son directamente visibles en los complementos y las funciones.

Por ejemplo, cambiamos el nombre y movimos el archivo catalog.json que contiene la lista de complementos y algunos parámetros a la carpeta Servidor. Ahora se llama config.json porque algunos parámetros no están relacionados con los complementos. Para evitar copiar y pegar y simplificar la depuración y el uso, también agregamos un activado parámetro booleano en la configuración de complementos en config.json. Si es falso para un complemento específico, no se cargará en el tablero y no se enviará al cliente en el generado vorlon.js expediente.

También dividimos los complementos en 2 archivos separados. Originalmente, un complemento estaba compuesto por un solo archivo JavaScript que contenía el código para el tablero y el lado del cliente. Fue más fácil cuando empezamos el proyecto. Ahora que se crean complementos más complejos y por razones de optimización, dividimos esto en 2 archivos diferentes: tuplugin.client.js y tuplugin.dashboard.js.

Puede leer más sobre los cambios que hicimos en los whatsnew.md expediente disponible en nuestro repositorio de GitHub.

¿Que sigue?

Ahora estamos trabajando en la próxima versión que contendrá nuevos complementos y mejoras principales. ¡Autenticación, webgl, webaudio son parte de la lista!
Como dije, queremos que este proyecto sea el proyecto del desarrollador web. Si tienes una idea, puedes:

Enviar un problema en GitHub
Cree usted mismo y envíe una solicitud de extracción (¡revisamos esto todos los días!)

Nota: para ayudarlo a aprender cómo crear complementos, he escrito esto: http://bit.ly/vorlonplugin

Trabajemos juntos en Vorlon.js para que las experiencias de depuración sean más sencillas y mejores.

No olvides seguir la cuenta de Twitter de nuestro equipo!

Más prácticas con JavaScript

Este artículo es parte de la serie de desarrollo web de los evangelistas tecnológicos de Microsoft sobre aprendizaje práctico de JavaScript, proyectos de código abierto y mejores prácticas de interoperabilidad, que incluyen Borde de Microsoft navegador y el nuevo Motor de renderizado EdgeHTML.

Lo alentamos a probar en todos los navegadores y dispositivos, incluido Microsoft Edge, el navegador predeterminado para Windows 10, con herramientas gratuitas en dev.modern.ES:

Aprendizaje tecnológico en profundidad sobre Microsoft Edge y la plataforma web de nuestros ingenieros y evangelistas:

Cumbre web de Microsoft Edge 2015 (qué esperar con el nuevo navegador, los nuevos estándares de plataforma web compatibles y los oradores invitados de la comunidad de JavaScript)
Woah, ¡puedo probar Edge e IE en una Mac y Linux! (de Rey Bango)
Avance de JavaScript sin romper la Web (de Christian Heilmann)
El Edge Rendering Engine que hace que la Web simplemente funcione (de Jacob Rossi)
Dé rienda suelta a la renderización 3D con WebGL (de David Catuhe incluyendo el vorlon.JS y babiloniaJS proyectos)
Innovaciones en plataformas web y aplicaciones web alojadas (de Kevin Hill y Kiril Seksenov incluyendo el múltiple.JS proyecto)

Más herramientas y recursos multiplataforma gratuitos para la plataforma web:

Este artículo ha sido escrito por Etienne Margraff en nombre de todo el equipo central de Vorlon.js: David Catuhe, David Rousset, Pierre Lagarde y Justin Garrett. Si tiene alguna pregunta sobre este artículo o Vorlon.js, no dude en ponerse en contacto con Etienne en Gorjeo.

#Depure #pruebe #JavaScript #forma #remota #con #los #nuevos #complementos #VorlonJS