Conozca la potente herramienta gratuita de edición de estilos con Edge


Gracias  a que Microsoft se asoció con BrowserStack para obtener pruebas en vivo y automatizadas en Microsoft Edge  ,este  navegador  introduce nuevas mejoras en las herramientas de desarrollo de F12, incluyendo algunas de las funciones más solicitadas de UserVoice. Además las nuevas herramientas se construyen en TypeScript y siempre se ejecutan en cualquier instalación de Edge, por lo que no se requiere  instalar nada .OP Otro punto interesante es que  la documentación de las herramientas para desarrolladores de F12 está totalmente disponible en GitHub por lo que los documentos no sólo serán influenciados por sus comentarios, sino que están invitados a contribuir y ayudar a dar forma a la documentación.

Las  hojas de estilo en cascada (o CSS, siglas en inglés de Cascading Stylesheets) son un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado como puede ser html  por lo que es muy usado para establecer el diseño visual de las páginas web, e interfaces de usuario escritas en HTML o XHTML;o incluso a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etc
Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles (como Firefox OS) por lo qeu es muy interesante disponer de alguna herramienta que nos ayude a gestionar,mejorar o modificar las hojas de estilo.

En este contexto Microsoft Edge dispone de siete herramientas distintas que  permiten ver,editar inspeccionar  y alterar tanto código css,html como javascript   cada una con su propia pestaña en la interfaz de las herramientas F12  de modo que vamos  a ver  una imagen de cada herramienta y un resumen rápido de lo que hace, seguido por las listas de sus principales características y tareas típicas.

La herramienta DOM Explorer (CTRL + 1)

La herramienta DOM Explorer muestra la estructura de una página web tal como está siendo representada en el navegador , haciendo posible editar su HTML y estilos en una página en vivo ( obviamente no se cambiara nada en el servidor sólo en la pagina visualizada para ver como quedaría.

Puede hacerlo por tanto  sin tener que editar y volver a cargar sus fuentes, para que pueda solucionar rápidamente problemas de visualización o experimentar con nuevas ideas o mejoras .

Explorador DOM de bordes

Las funciones de la herramienta DOM Explorer incluyen:

  • Sugerencias de autocompletado de IntelliSense al editar atributos HTML y propiedades CSS.
  • Arrastre los nodos DOM para reorganizarlos y editar nodos como HTML.
  • Apoyo para CSS compilado sourcemaps.

Desarrollo y tareas de depuración que hace más fácil:

  • Determinar por qué un elemento no se muestra en el lugar correcto o tamaño correcto.
  • Determinar qué estilos CSS y consultas de medios se están aplicando a un elemento.
  • Prueba de una serie de colores diferentes para un elemento para ver que se ve mejor.

La herramienta Consola (CTRL + 2)

Herramienta de consola de borde

La herramienta Consola proporciona una forma de interactuar con el código en ejecución:

  • Cambie los valores de las variables o inyecte código en un sitio en vivo con la línea de comandos de la consola.
  • Utilice la API de depuración de consola para enviar información de depuración.
  • Consulte los mensajes de error del navegador y los códigos de estado.

Las características de la herramienta Consola incluyen:

  • Abra la consola en la parte inferior de cualquier otra herramienta con el botón de consola o CTRL + ` .
  • Consola Depuración de métodos API para sincronización, recuento, agrupación y más.
  • Las sugerencias de autocompletado de IntelliSense en la línea de comandos aceleran la entrada, reducen errores tipográficos y le ayudan a descubrir aspectos de las API de JavaScript.

Desarrollo y tareas de depuración que hace más fácil:

  • Segmentación de iFrames específicos.
  • Ejecución de código de tiempo hasta la instrucción con nuevos métodos de temporización.
  • Cambiar el valor de una variable en el código en ejecución sin recargar.

 

La herramienta Depurador (CTRL + 3)

Herramienta de depurador de bordes

Puede utilizar la herramienta Depurador para examinar lo que está haciendo su código, cuando lo está haciendo y cómo lo está haciendo. Detenga el código en la mitad de la ejecución, pase a través de él línea por línea y observe el estado de las variables y los objetos en cada paso.

Las características de la herramienta Depurador incluyen:

  • No se actualiza la depuración. Establezca sus puntos de interrupción y vaya sin recargar y perder estado.
  • Interfaz de documentos con pestañas para facilitar la gestión de múltiples secuencias de comandos.
  • Puntos de interrupción en código estándar, respuestas de XHR y eventos.

Desarrollo y tareas de depuración que hace más fácil:

  • Ver lo que llevó a una llamada de función utilizando la pila de llamadas.
  • Hacer que el código comprimido o minificado sea más legible usando mapas de origen.
  • Supervisión de la creación y ejecución de los servidores web.

 

La herramienta de red (CTRL + 4)

Herramienta de red de bordes

La herramienta de red le ofrece los detalles finos de las solicitudes de red relacionadas con la carga y operación de sus páginas web.

Desarrollo y tareas de depuración que hace más fácil:

  • Visualización de la cantidad de ancho de banda que consume su página en los recursos.
  • Depuración de solicitudes AJAX mediante la visualización de los encabezados y los órganos de solicitud y respuesta.
  • Identificar las solicitudes de red que ralentizan la carga de sus páginas web.

 

La herramienta de rendimiento (CTRL + 5)

Herramienta de rendimiento de borde

La herramienta Rendimiento le ayuda a buscar lo que está sucediendo cuando su página se ralentiza. Usarlo para perfilar puntos específicos de lentitud muestra las operaciones que los están causando. En Microsoft Edge, la herramienta Rendimiento combina las herramientas anteriores de Capacidad de respuesta y Profiler deUI para crear una vista de extremo a extremo de su rendimiento de secuencias de comandos y pintura.

Algunas características interesantes son:

  • Identificar las diferentes fuentes de actividad de la CPU que causan lentitud de la UI.
  • Conozca la velocidad de fotogramas de su página web y la cantidad de repintados y reflujos que cuestan.
  • Establecimiento de etiquetas en la línea de tiempo para aislar escenarios de usuario.
  • Desarrollo y tareas de depuración que hace más fácil:  Optimizaciones de código de prueba y Acelerar sus páginas web.

La herramienta de memoria (CTRL + 6)

Herramienta Edge Memory

Cuando una página web comienza rápido y se ralentiza después de usarlo durante un tiempo, el culpable es generalmente una pérdida de memoria. La herramienta de memoria rastrea el uso de la memoria de su página web, ayudándole a identificar dónde crece el uso de la memoria, por qué está creciendo y cómo solucionarlo.

Algunas características interesantes son:

  • Una línea de tiempo para ver los cambios progresivos en el uso de la memoria.
  • Instantáneas para examinar los detalles del uso de memoria en puntos específicos.
  • Comparaciones de instantáneas para identificar puntos específicos de crecimiento.

Desarrollo y tareas de depuración que hace más fácil:

  • Identificar nodos DOM desprendidos.
  • Identificar los puntos de crecimiento de la memoria.
  • Medir el uso de memoria de objetos.

Herramienta de emulación de bordes

La herramienta de emulación le ayuda a probar cómo se ejecutan las páginas web en diferentes tamaños de pantalla y características de hardware y cómo responden a las diferentes cadenas de agente de usuario.

Algunas características interesantes son:

  • Emulando diferentes tamaños de pantalla y resoluciones.
  • Simulación GPS.

Desarrollo y tareas de depuración que hace más fácil:

  • Prueba de diseños sensibles en múltiples tipos de pantallas.
  • Prueba de las funciones de detección de ubicación para un sitio móvil.

 

 

 

Fuente https://docs.microsoft.com/

Anuncios

Desarrollo de aplicaciones con HTML5,CSS y JavaScript en Android ,iOS o windows phone


Tras el éxito de la tienda de aplicaciones de para iOS comenzaron a nacer herramientas de desarrollo de aplicaciones ajenas a Apple y que los californianos vetaron durante un período de tiempo. La prohibición iba encaminada, al parecer  a limitar la creación de programas para el iPhone y el iPad mediante Adobe Flash. Actualmente es posible este tipo de herramientas sin saltarse los estrictos términos de uso de la App Store, y eso abre la posibilidad de emplear alguno de estos frameworks de desarrollo para crear aplicaciones con tecnologías web y “empaquetarlas” como una app nativa que pueda ser publicada en la tienda oficial de Apple.

Lo bueno de este tipo de herramientas es que no solo se ciñen al canal de distribución de aplicaciones de iOS, la App Store, sino que, además, permiten hacerlo para Google Play a partir de la misma base.

Esto abre a los desarrolladores web la posibilidad de crear aplicaciones nativas usando las tecnologías que dominan (HTML, CSS y Javascript) y hacerlo para múltiples plataformas sin realizar una adaptación específica.

Adobe PhoneGap

PhoneGapp: Aplicación de Adobe para desarrollar aplicaciones iOS y Android con HTML5, Javascript y CSS

 

Tal vez una de las más conocidas, PhoneGap permite empaquetar tu código HTML5, CSS y Javascript como aplicación nativa para distintas plataformas: iOS, Android, Blackberry, Windows Phone, etc…

Fundamentalmente PhoneGap pone a nuestra disposición una serie de librerías que, incrustadas en las plataformas de desarrollo de cada uno de los fabricantes (SDK’s), permiten programar a través de su API funcionalidades del SDK nativo.

Si queremos distribuir nuestra trabajo en distintas plataformas, construiremos una aplicación nativa para una de ellas con la ayuda de Phonegap y luego, usando el mismo código base, la portaremos a las restantes con la ventaja de mantener el mismo código base creado usando las tecnologías HTML5, CSS3 y Javascript.

PhoneGap ademas  de permitir exportar los proyectos a las iOS y Android también permite hacerlo a Windows Phone o a Blackberry.

Icenium

Icenium: Desarrolla aplicaciones con javascript, html5 y css para ios y android

Es  una plataforma de desarrollo en la nube para crear aplicaciones iOS y Android mediante HTML5, CSS y Javascript

Una de las facetas más interesantes de Icenium es que hace que nos olvidemos de las SDK’s de cada una de las plataformas. Mediante su propio IDE de desarrollo podemos crear aplicaciones usando estándares web (como HTML5 o CSS) y publicar directamente en las distintas tiendas de aplicaciones a través de un sencillo paso a paso.

La ventaja de Icenium con respecto a PhoneGap radica precísamente en esa funcionalidad. Un único entorno (Icenium Mist), al que podemos acceder desde cualquier navegador, y una publicación directa de nuestra app simplemente seleccionando la plataforma deseada (Android o iOS).

AppCelerator

Appcelerator: Desarrolla aplicaciones HTML5, CSS y Javascript para iOS, Android y Windows 8

Gracias a esta herramienta  se puede conectar tu aplicación nativa a la nube con node.js

AppCelerator, al igual que Icenium, posee su propio IDE de desarrollo, mediante el cual podemos programar funcionalidades comunes a las distintas plataformas sin tener que crearlas de manera específica y en lenguajes diferentes. Una de las cualidades más interesantes de AppCelerator es lo fácil que resulta conectar nuestras aplicaciones con distintas fuentes de datos mediante sus servicios personalizados de conexión con node.js.

Aunque requiera hacerse con la plataforma y su funcionamiento, AppCelerator ofrece funcionalidades muy interesantes con su sencilla forma de integrar la información de múltiples servicios en nuestras aplicaciones.

 

Fuente aqui