Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Nov 23

Depurando apps creadas con Ionic 3.x

  • noviembre 23, 2017
  • Diego Pérez
  • No Comments
  • Consejos tecnológicos, Desarrollo de aplicaciones, Tecnologías

¡Hola a todos! Hoy vamos a hablar de Ionic versión 3. Ionic es un framework para desarrollar aplicaciones móviles híbridas. Puesto que Ionic 3 usa Angular 4/5 y Typescript, hay varias formas de depurar nuestro código partiendo de herramientas web.

Depuración en el navegador

Típicamente un desarrollador de aplicaciones con Ionic usará el comando «ionic serve» para desplegar un servidor local, ejecutar su aplicación en el navegador y así ver trazas e inspeccionar elementos.

Los navegadores chrome, safari y firefox permiten usar el inspector para visualizar trazas, estilos, codigo HTML, JavaScript y peticiones de red.

En el caso de querer ver las trazas en la terminal en la que se ha lanzado el comando, usaremos el parámetro «-c», adicionalmente podemos usar –lab para ver una vista móvil para diferentes plataformas sin tener que usar el inspector.

ionic serve -c --lab

Depuración en dispositivo

– Navegador

El inspector de los navegadores también se puede utilizar para ver la ejecución de aplicaciones directamente en el dispositivo conectado por USB.

Esto es muy útil para aplicaciones que usan plugins de Cordova que acceden al hardware de dispositivos y no funcionen en un navegador.

Podeis ver como configurarlo en ionic developer tools

1

– Ionic DevApp

Recientemente el equipo de ionic ha publicado una aplicación llamada Ionic DevApp, la cual es capaz de detectar los servidores locales que ejecuten ionic serve y mostrar la aplicación en el móvil.

Para usarla tan solo tendremos que tener conectados a la misma red WIFI el móvil y el ordenador donde ejecutemos el servidor.

2

 

– Ionic CLI

Es posible ejecutar una aplicación en un dispositivo Android e iOS desde terminal con la herramienta de consola de Ionic, el parámetro «-c» imprimirá las trazas y «-l» hará que se refresque la aplicación cuando hayan cambios en el código.

ionic run android -l -c

Depuración desde IDE

Mediante IDEs como WebStorm o Visual Code Studio podemos ejecutar el código en un navegador y seguir su ejecución mediante puntos de ruptura.

Para poder usar esta funcionalidad es necesario activar la generación de sourcemaps en la sección config del fichero packages.json

Añadir la siguiente configuración al fichero packages.json

"config" : {
    "ionic_source_map" : "source-map",
    "ionic_source_map_type": "#inline-source-map"
}

¡No olvidéis borrar esta sección antes de publicar vuestra app, ya que esto deja todo el código expuesto!

 

– Webstorm

1. Añadir a Chrome la extensión Jetbrains IDE support

Ionic 3

 

2. Ejecutar ionic serve desde una terminal o desde la paleta de scripts npm dentro de Webstorm

Ionic 3

 

3. Crear una configuración de depuración nueva:

Ionic 3

 

4. Ahora ya podemos poner puntos de ruptura en el código. Al presionar el botón de depuración, la aplicación se recargará en Chrome mostrando un indicador de que el plugin de Jetbrains está funcionando y la ejecución parará en los puntos de ruptura permitiéndonos inspeccionar el estado de las variables.

Ionic 3

 

– Visual Studio Code

1. Añadir la extensión debugger for Chrome en Visual Studio Code.

Ionic 3

 

2. Crear una nueva configuración para lanzar en Chrome en la pestaña de depuración con los siguientes parámetros:

"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/www"

3. Lanzar el comando ionic serve desde la terminal interna de Visual Studio Code o desde otra externa, el parámetro -b hará que se ejecute sin abrir una nueva ventana de navegador.

Ionic 3

4. Ahora ya podemos poner puntos de ruptura en el código y ejecutarlo desde la pestaña de depuración pudiendo explorar en tiempo de ejecución el valor de las variables que usemos.

Ionic 3

Bueno, y esto ha sido una pequeña introducción a la depuración de apps hechas con Ionic 3. ¡Espero que os sea útil y ahorre tiempo a la hora de encontrar problemas!.

Artículos Relacionados:

  • Patentar un software / patentar una app en España - Tribalyte Technologies & Tribalyte Ideas Blockchain y vacunas COVID-19 | Tribalyte Technologies | Alessandro Barbera FormicaPatentar un Software o una App en España | Guía práctica
  • Creando nuestro primer proyecto de ReactJSCreando nuestro primer proyecto de ReactJS
  • youmedic videos medicina operaciones cirugíaLanzamiento Youmedic
  • carbon (4)Por qué Elixir importa y cómo puede mejorar tu código en el Backend
  • 6º aniversario¡Celebramos nuestro 6º aniversario!
  • Facebook
  • Twitter
  • LinkedIn
  • E-Mail

About The Author

Diego es ingeniero de software y cuenta con una gran experiencia en diferentes tipos de entornos. Actualmente su trabajo se centra en el desarrollo full stack, enfocándose en tecnologías híbridas. Le gusta explorar nuevos SDKs, frameworks y librerías, siempre buscando la mejor solución técnica para cada proyecto.

Related Posts

  • Introducción a aplicaciones de escritorio con Ionic 3.x y Electronenero 18, 2018
  • Autenticación nativa con Facebook en Ionic 3.xdiciembre 7, 2017

Leave a reply Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

ELIGE UNA CATEGORÍA

  • Blockchain
  • Consejos tecnológicos
  • Desarrollo de aplicaciones
  • Desarrollo de software
  • General
  • Sistema embebido
  • Tecnologías
  • Uncategorized

Una compañía dedicada al desarrollo de apps, software y soluciones embebidas para empresas.

SOCIOS

Contacto

Glorieta de Quevedo 8 6º2
28015 Madrid (ESPAÑA)
Phone: +34 919 049 820 E-Mail: contact@tribalyte.com Web: www.tribalyte.com
Sello PYME INNOVADORA 21/01/2025
PYME INNOVADORA
Válido hasta el 21 de enero de 2025
escudo de MEIC 21/01/2025

AYUDA

  • Política de privacidad
  • Política de calidad
  • Política de seguridad
  • Términos de uso

CERTIFICACIONES

⠀⠀⠀⠀⠀⠀⠀⠀⠀

SUBVENCIONES

Tribalyte Technologies S.L. ha    conseguido la ayuda C007/20-ED de Red.es para el impulso y la promoción de actividades de I+i y para el fomento de la inversión empresarial para desarrollar el proyecto iPatia. Así mismo, valoramos muy positivamente la contribución del FEDER, principal fondo de la política de cohesión europea, por lo que supone de impulso a nuestro trabajo y en consecuencia al crecimiento económico y la creación de empleo de esta región y de España en su conjunto.
Esta página web utiliza cookies para mejorar su experiencia de usuario y para recabar estadísticas anónimas de uso. Aceptar Más información