Questo articolo è tradotto da "Using the Windows 8 Simulator & VS 2012 to debug the IE10 touch events & your responsive design on the web" di David Rousset, con il consenso di Microsoft
Sto lavorando con gli eventi touch di IE10 e anche se sono abbastanza fortunato da possedere un tablet con Windows 8, sto cercando una strada più semplice per effettuare test di base sul mio portatile senza dover avere il bisogno di passare al tablet per ogni verifica.
Nel farlo ho scoperto diversi trucchetti che possono aiutare nel debug di codice che utilizzi gli eventi touch di IE10. Ottimo effetto collaterale: lo stesso approccio è molto utile per testare il responsive web design!.
Prerequisiti
Per seguire questo tutorial, avrete bisogno di:
- Aver installato Windows 8
- Aver scaricato e installato Visual Studio 2012 Express per Windows 8
Il modello degli eventi touch di Internet Explorer 10
Se non sapete ancora come funziona la nostra implementazione del touch, potete leggere questi articoli:
- Touch Input for IE10 and Metro style Apps (in inglese)
- Handling Multi-touch and Mouse Input in All Browsers (in inglese)
- Andare oltre 'Pan, Zoom, and Tap' utilizzando i Gesture Events (in italiano)
Come risorsa complementare potreste dare un'occhiata alla libreria Pointer.JS library that mimics the IE10 model for the other browsers.
L'emulatore Windows 8 per simulare il touch
L'emulatore di Windows è installato con i tool di sviluppo ed è progettato per aiutarci a testare e debuggare le nostre Applicazioni Windows Store.
Detto questo, nulla ci vieta di utilizzare questo strumento per effettuare il debug di applicazioni web che girano su IE10 nel simulatore:
1. Lanciare l'emulatore con con il comando Microsoft.Windows.Simulator.exe che troviamo in Program Files (x86)Common FilesMicrosoft SharedWindows Simulator11.0 e cliccare sulla tile del Desktop:
2. Lanciare IE10, cercare le "Opzioni Internet" e la tab "Avanzate". Controllare che "Disattiva debugging degli script (Internet Explorer)" e "Disattiva debugging degli script (altro)" non siano spuntate:
3. Navigate verso l'URL che volete testare o debuggare. Per esempio, testiamo questa demo: Finger Painting dell' IE Test Drive. Utilizzando il simulatore, potete simulare il classico mouse o passare al touch utilizzando questi 2 bottoni:
Prima potreste pensare di ottenere gli stessi risultati:
Ma cliccando su questo bottone:
abilitate la simulazione di un doppio tocco, utile per provare zoom (provate la combinazione di CTRL+Rotellina del mouse per il pinch):
Sotto c'è un bottone analogo per le rotazioni. Queste caratteristiche di dual touch possono essere particolarmente utili per testare demo come Browser Surface:
Usando l'emulatore, potrete simulare zoom e rotazioni touch attraverso le relative gesture.
Visual Studio 2012 per il debug di codice JavaScript
Se voleste approfondire test e debug della vostra esperienza touch, avreste probabilmente la necessità di effettuare il debug di codice JavaScript. La prima e ovvia soluzione è quella di premere F12 e utilizzare gli strumenti per sviluppatori di IE10, ma lavorare nella piccola finestra del simulatore con gli strumenti F12 non è molto confortevole.
Un'ottima soluzione alternativa è allora usare il debugger di Visual Studio 2012. Ecco i passi da seguire per farlo:
1. Nella vostra sessione principae (fuori dall'emulatore), lanciate Visual Studio 2012 Express e selezionate dal menu DEBUG > Connetti a processo
2. Trovate il processo iexplorer.exe (di tipo "x86, Script") per collegarlo:
3. Se tutto va bene, dovreste avere il seguente risultato utilizzando la demo Browser Surface:
Se così non fosse, avrete probabilmente collegato il processo iexplore.exe sbagliato, oppure abete dimenticato di togliere la spunta dalle opzioni di debug.
Se avete scelto il processo giusto, potete osservare tutti i file JavaScript files nel pannello di destra chiamato "Esplora Soluzioni" sotto il nodo "Documenti script".
4. Concentriamo quindi i nostri sforzi sul debugging del codice JavaScript. Aprite per esempio il file "demo.js" e aggiungete un breakpoint alla linea 136: if (Options.inertiaBounce()) { :
5. Prendete un'immagine e mettetela sulla scrivania della demo utilizzando la simulazione touch, automaticamente il programma si bloccherà in Visual Studio:
Quindi potrete avanzare passo passo nel codice, vedere i messaggi della console di JavaScript, saltare direttamente alla definizione di una funzione cliccando col tasto destro, etc. Bene! Avete ottenuto una esperienza di debugging avanzato.
In cunclusione, potete debuggare interamente la logica touch in JavaScript per il supporto di IE10 senza il bisogno di avere a portata di mano alcun dispositivo touch. Certo, avrete bisogno di testare il codice finale o la vostra Web App su un device reale per avere una idea precisa di come si comporterà il vostro codice in condizioni reali. Ma questo approccio potrà permettervi comunque di risparmiare del tempo.
Testare e debuggare il Responsive Design
L'emulatore e Visual Studio 2012 possono essere anche ottimi per aiutarci a testare e debuggare il nostro responsive design. Iniziamo con vedere cosa l'emulatore ha da offrire in questo senso.
Ho cercato sul Web i migliori siti che implementassero i principi del responsive design e ho scelto di utilizzare questo: http://garretkeizer.com/ per i prossimi screenshot. Potete trovare siti altrettanto obuoni per i test su: http://mediaqueri.es
Ecco come appare il design di questo sito su Internet Explorer 10 utilizzando le impostazioni di default dell'emulatore:
Vediamo ora alcune opzioni interessanti per l'emulatore per andare avanti:
1. Potete testare come cambia il design nelle visualizzazioni verticale (portrait) e orizzontale (landscape) cliccando su questi bottoni:
Ecco il risultato per il sito scelto:
2. Potete anche simulare diversi form factor e risoluzioni cliccando questi bottoni:
3. Ecco il risultato dello stesso sito a 2560x1440 (da comparare con la risoluzione di default 1366x768, dei precedenti screenshot):
4. Ora se volete andare avanti, potete utilizzare il fantastico DOM Explorer di VS 2012 per esaminare e modificare "live" il vostro CSS. Per esempio, una volta che il debugger è stato collegato appare la finestra del DOM Explorer. Finché il vostro mouse è sul nodo HTML node, vedrete in tempo reale le diverse aree che si in the simulator:
Ovviamemente avrete la possibilità di esaminare, modificare e tracciare i vostri stili con Visual Studio per sistemare eventuali errori nel CSS.
Spero che questi piccoli trucchi vi aiuteranno e vi faranno risparmiare del tempo. Vi invito a tenere sempre d'occhio questi tool gratuiti.
