Exportar (0) Imprimir
Expandir Tudo
Web
Expandir Minimizar

Internet Explorer 10 - Uso do simulador do Windows 8 e Visual Studio 2012 para depurar os eventos de toque do IE10

David Rousset

Technical Evangelist

Estou trabalhando atualmente nos eventos de toque do IE10 e, mesmo tendo a sorte de ter um tablet Windows 8, estava procurando uma forma mais simples de fazer testes básicos em meu laptop clássico alternando para o tablet a cada vez. Enquanto examinava isso, descobri várias dicas e truques que podem ajudar você a depurar os eventos de toque do IE10 em seu código sem nem mesmo usar um dispositivo de toque. Efeito colateral agradável: a mesma abordagem também o ajudará a testar e depurar seu design Web responsivo!

Pré-requisitos: para seguir estes tutoriais, primeiro você precisa:

  1. Baixar e instalar o Windows 8 Release Preview em sua máquina: http://preview.windows.com
  2. Baixar e instalar o Visual Studio 2012 Express RTM para Windows 8: http://msdn.microsoft.com/en-us/windows/apps/br229516

Modelo de eventos de toque do Internet Explorer 10

Se você ainda não sabe como nossa implementação de toque funciona, deve ler estes 3 artigos primeiro:

Como um recurso complementar, você deve dar uma olhada na biblioteca Pointer.JS, que imita o modelo do IE10 para os outros navegadores.

Simulador Windows 8 para toque

O Simulador do Windows é instalado com as ferramentas de desenvolvimento e é normalmente projetado para ajudar você a testar e depurar seus aplicativos estilo Metro. Você pode conhecer mais detalhes aqui: Primeira olhada no Simulador do Windows

Ainda assim, nada nos impede de usá-lo para depurar aplicativos Web executados dentro do IE10. Deixe-me mostrar como.

  • Abra o simulador lançando o Microsoft.Windows.Simulator.exe localizado dentro de “Arquivos de programas (x86)\Common Files\Microsoft Shared\Windows Simulator\11.0”

    JJ933432.4441546B4870B23D8E2B2EBD93BFFBAD(pt-br,MSDN.10).png

E clique no ícone na área de trabalho.

  • Lance o IE10, navegue até “Opções de Internet” e a guia “Avançadas”. Confirme que “Desabilitar depuração de script debugging (Internet Explorer)” e “desabilitar depuração de script (outros)” não estão assinalados:

    JJ933432.61707CE45CA6ECB5AFA7E0FE1872E8D1(pt-br,MSDN.10).png

  • Navegue até a URL que gostaria de testar e/ou depurar. Por exemplo, testemos esta demo: Pintura com os dedos do Test-drive do IE. Usando o simulador, você pode simular entrada de mouse clássico e/ou alternância de modos de toque usando esses 2 botões:

    JJ933432.782B5D30F3A99A60D7318F86C4B304A2(pt-br,MSDN.10).png

A princípio, você achará que obterá os mesmos resultados exatos:

JJ933432.AF30EC967AF6B162B2C8B8B88EEB78D2(pt-br,MSDN.10).png

Mas clicar neste botão

JJ933432.1FE3F340E354C8820380B18F55E3E143(pt-br,MSDN.10).png

Mostrará que você tem uma simulação de toque dupla para zoom e rotação:

JJ933432.4123935C9E715A97C9AA4D9A84A0B229(pt-br,MSDN.10).png

Esses recursos de toque duplos são mais interessantes de usar com essas demonstrações: Superfície do navegador

JJ933432.25232EC889E3D0BE25AF4A57A9BA06BA(pt-br,MSDN.10).png

Usando o simulador, você poderá simular zoom e rotação via gesto de toque.

Visual Studio 2012 para depurar o código JavaScript

Se quiser se aprofundar no teste e depuração de sua experiência de toque, você provavelmente precisará depurar seu código JavaScript. A primeira solução óbvia é pressionar a tecla F12 e usar as ferramentas de desenvolvimento. Mas trabalhar na janela menor do simulador com a tecla F12 não é muito confortável.

Outra solução ótima é usar o depurador do Visual Studio 2012. Aqui estão os passos a seguir para isso:

  1. Em nossa sessão principal (fora do simulador), lance o Visual Studio 2012 RC Express e navegue até “DEBUG” –> “Attach to Process…”

    JJ933432.9778C96A1EB32B0CDF61261F716ADC31(pt-br,MSDN.10).png

  2. Localize o processo “iexplorer.exe” (do tipo “x86, Script”) para anexar:

JJ933432.6651298674A122C11B4CDAF13DC1A4F0(pt-br,MSDN.10).png

JJ933432.B78DE10CA183E3D60A82A6E36B1FC964(pt-br,MSDN.10).png

  1. Se tudo correr bem, você deve ter este resultado usando a demo Superfície do navegador:

    JJ933432.EF6F3E69ADB488F9347E17A711944A64(pt-br,MSDN.10).png

    Caso contrário, você provavelmente anexou o processo iexplore.exe errado ou se esqueceu de desmarcar as opções de depuração de script.

    Se escolheu o processo certo, verá todos os arquivos JavaScript no painel direito chamado “Gerenciador de soluções” no nó chamado “Documentos de script”.

  2. Então concentremos nossos esforços primeiro na experiência de depuração do JavaScript. Abra, por exemplo, o arquivo “demo.js” e adicione um ponto de interrupção na linha 136: if (Options.inertiaBounce()) { :
  3. Apanhe uma imagem e lance-a usando a simulação de toque; ela deve entrar automaticamente no Visual Studio:

    JJ933432.74A1A5FBC8BFE25550F6351A7E34935B(pt-br,MSDN.10).png

    Em seguida você pode entrar no código, ver o resultado do consoloe do JavaScript, pular direto para a definição de uma função clicando nela com o botào direito do mouse, etc. Bem, você terá uma experiência de depuração bastante avançada!

    Concluindo, você pode depurar sua lógica de toque JavaScript inteiramente para suportar o IE10 sem nenhum dispositivo de toque. É claro que você precisará testar seu código final e o aplicativo Web em um dispositivo de toque para ter uma ideia perfeita de como seu código se comportará em condições reais. Mas, ainda assim, essa abordagem pode ajudá-lo e poupar seu tempo.

Teste e depuração de seu design responsivo

O simulador e o VS 2012 também podem ser bons amigos para ajudá-lo a testar e depurar seu design responsivo. Comecemos vendo o que o simulador tem a oferecer para isso.

Procurei na Web os melhores sites que implementam princípios de design responsivo. E escolhi este: http://garretkeizer.com/ para as capturas de tela a seguir. Você pode encontrar outros sites para testar em: http://mediaqueri.es

Aqui está o design desse site no Internet Explorer 10 usando as configurações padrões do simulador:

JJ933432.7701A5B141ACD3035E2EB49F9428AFE9(pt-br,MSDN.10).png

Agora vejamos algumas opções interessantes do simulador para prosseguirmos.

  1. Você pode testar a mudança do design nos modos retrato ou paisagem clicando nestes botões:

    JJ933432.BC5D6CCB1F97BE754264CB5D94D252A9(pt-br,MSDN.10).png

    Aqui está o resultado para o site escolhido:

    JJ933432.878B7CB76ACBD89B60137C1165A7C221(pt-br,MSDN.10).png

  2. Você também pode simular vários fatores forma e resoluções de tela clicando neste botão:

    JJ933432.74DA0FD6FAECFE8EBB36A56CB60EE0DD(pt-br,MSDN.10).png

  3. Aqui está o resultado do mesmo site em 2560x1440 (em comparação com o padrão 1366x768 das capturas de tela anteriores):

    JJ933432.F650D800BE7F5C6F30268D1CD98CF46B(pt-br,MSDN.10).png

  4. Agora, se quiser ir mais além, você pode usar a fantástica ferramenta DOM Explorer do VS 2012 para ajudá-lo a analisar e editar seu CSS. Por exemplo, uma vez anexado o depurador, você verá uma janela chamada “DOM Explorer”. Enquanto seu cursor estiver pairando sobre o nó HTML, você verá destacadas as várias áreas ativas no simulador:

    JJ933432.ECD9B9D5FA1BC660EE70C6DC45951C57(pt-br,MSDN.10).png

    E, é claro, você poderá revisar, editar e rastrear seus estilos no Visual Studio para potencialmente corrigir seu design CSS.

    Espero que esses pequenos truques o ajudem e poupem seu tempo. Você deve ficar atento a essas ferramentas gratuitas!


Mostrar:
© 2014 Microsoft