-
Notifications
You must be signed in to change notification settings - Fork 1
Inspeccionar con weinre
Usaremos el ultimo ejercicio para crear uno nuevo:
phonegap create prueba13 --id com.coderhouse.prueba13 --name "00 Prueba 13" -src prueba12
cd prueba13
En ese ejercicio usamos el plugin de camera y file, instalamos para poder ejecutar correctamente la aplicacion:
phonegap plugin add org.apache.cordova.camera
phonegap plugin add org.apache.cordova.file
Abrimos otra ventana para correr weinre corriendo cmd
, averiguamos nuestra IP (por lo general corriendo ipconfig
) y corremos weinre
con la IP que obtuvimos:
weinre --boundHost DIRECCION_IP
En este momento ya podemos ver la interfaz de weinre
. Abrir el navegador y apuntar a:
http://DIRECCION_IP:8080/client/#anonymous
Incluimos el script como vimos anteriormente. Editamos el archivo index.html
y agregamos el script en el <head>
(solo la 3er linea, las anteriores son para saber donde ubicarla) cambiando DIRECCION_IP por la direccion que hayan obtenido de su maquina:
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="http://DIRECCION_IP:8080/target/target-script-min.js#anonymous"></script>
Modificamos el codigo para escribir a la consola. En este caso, la consola sera el inspector de weinre
. Editamos el archivo js/index.js
y agregamos llamadas a console.log()
.:
//...
function init() {
//para saber cuando se ejecuta init
console.log('init');
// Configuracion de JQM para phonegap
//...
//...
var fileApi = {
initialize: function(){
console.log('Inicializando fileApi');
window.resolveLocal...
//...
var camara = {
initialize: function() {
console.log('Inicializando camara...');
if(localStorage.galeria) {
//...
Corremos la aplicacion:
phonegap run android
Y volvemos al navegador donde tenemos la interfaz de weinre
. Una vez que la aplicacion arranque deberiamos ver la conexion en la interfaz de weinre
.
weinre
soporta multiples conexiones pero solo podemos interactuar con ellas de una a la vez. La conexion activa en la interfaz de weinre
es la que figura de color verde. Por defecto weinre
activara una conexion si es la unica, pero en el caso que no sea asi (la conexion permanece en negro), hacemos click sobre la conexion y esta se activara poniendose en verde.
Una vez que hayamos hecho esto podemos navegar las pestañas de weinre
para obtener informacion de nuestra aplicacion: Elements, Resources, Network, Timeline y Console
En Console deberian aparecer los mensajes que agregamos en el codigo.
La consola no solo nos da los mensajes que pedimos, nos permite ejecutar codigo de manera inmediata. Poder ejecutar codigo nos dara la ventaja de no tener que compilar la aplicacion una y otra vez. Ademas nos mostrara cuando tengamos un error y, con suerte, nos indicara en que lugar del codigo esta el error.
- Repaso y conceptos basicos
- Ejercicios para repasar
- Problematica de desarrollo mobile
- Phonegap
- Requerimientos e instalacion
- Phonegap CLI
- [Primeros ejercicios con Phonegap](Ejercicio Phonegap)
- Plugins
- Hello world
- Estructura de un proyecto Phonegap
- Plugin Device
- Debugging
- Incorporando un framework CSS
- Plugin Vibration
- Sumando partes
- Plugin Battery Status
- Un poco de jQuery
- jQuery Mobile
- Navegacion
- Plugin Dashboard
- Revision de Plugin Dashboard
- Paginas extra
- ToDo
- Persistencia
- ToDo Persistente
- Plugin Camera
- Opciones de camara
- App Mi Galeria
- Revision de Galeria
- Plugin File
- Escribir y leer texto
- Escribir archivos binarios
- Guardando fotos
- Debugger: weinre
- Inspeccionar con weinre
- Phonegap Developer App
- Refactor de apps
- Plugin Media
- Pruebas con audio
- Control y monitoreo de audio
- Encapsular play/pausa
- Hacks
- Formato de tiempos
- Grabar y reproducir
- Proyecto Integrador
- Revision de interfaz
- Interfaz basica
- Entrevista: modelo
- Funcionalidad: revision
- Seleccion de framework
- iRec: navegacion
- iRec: fileApi
- iRec: guias
- iRec: entrevistas
- iRec: recordApi
- iRec: helpers
- iRec: mediaApi
- iRec: inicializar paginas
- iRec: refactor
- iRec: mediaApi refactor
- iRec: recordApi refactor
- iRec: helpers
- iRec: guias.js
- iRec: entrevistas.js
- iRec: crear guias
- iRec: re-inicializando
- iRec: re-ordenando
- iRec: pendientes
- iRec: reporte ux
- iRec:revision: volver
- iRec:entrevista: volver
- iRec:revision: cambios
- iRec:revision: stop
- iRec:revision: Rew 10"
- iRec:revision: tag Go
- iRec: limpieza
- Firma de apps
- Android
- Generacion de key
- Firma de apk
- Alineacion de zip
- Firmar con Phonegap
- iOS
- Detalles finales
- Config.xml
- Iconos
- Splash