Figura 10.18: Lista de todos os DOM breakpoints
Breakpoints em chamadas XHR (Ajax)
Para debugar código que faz chamadas XHR (Ajax) a uma determinada URL,
vá na abaSources, na coluna da direita, no agrupador com o nome deXHR
Break-pointse aperte no botão de “+”.
Figura 10.19: Breakpoint em chamadas XHR (Ajax)
Ele vai perguntar a URL (ou parte dela) que deve causar o breakpoint. É só inserir
e teremos um breakpoint disparando quando aquela URL for chamada via Ajax.
10.3 Emulando dispositivos móveis
“A ferramenta de depuração mais eficaz ainda é o pensamento cuidadoso, juntamente
com instruções de impressão criteriosamente colocadas.”
–Brian Kernighan
tanto pela falta de ferramentas como pelas peculiaridades de cada dispositivo.
Quando falamos de desenvolver paramobile, nada substitui o teste no dispositivo
real. Mas, neste capítulo, vamos aprender algumas ferramentas que podem acelerar
o desenvolvimento para esta plataforma.
Habilitando o painel de emulação de dispositivos
O primeiro passo para brincar com estas novas ferramentas é habilitar o painel
de Emulação. Para isso, clique no ícone deSettings, no canto direito superior do Dev
Tools.
Figura 10.20: Abrindo as preferências do Dev Tools
Agora habilite ocheckboxShow ‘Emulation’ view in console drawer.
Figura 10.21: Habilitando a aba Emulation no drawer
10.3. Emulando dispositivos móveis Casa do Código
Figura 10.22: Opções da aba Emulation
Odrawertambém pode ser chamado pressionando a tecla Esc.
Emulando dispositivos
Normalmente, começamos a desenvolver páginas ou aplicações para a web
tes-tando em um browser desktop e, só depois, vamos testar em um dispositivo móvel
para, então, corrigir todos os bugs que encontramos no dispositivo real.
No Dev Tools é possível melhorar esse fluxo emulando algumas características
de dispositivos móveis e testar alguns casos que só aconteceriam no dispositivo real,
como um breakpoint de umamedia queryno CSS. As características que podem ser
emuladas são:
• User agent— umastringdisponível em navigator.userAgentque
tam-bém é passada no cabeçalho de uma requisição HTTP. Algumas aplicações
verificam se o dispositivo é um dispositivo móvel ou não por essastring.
• Screen resolution— emula as dimensões reais (largura e altura) de um
dis-positivo.
• Device Pixel Ratio— permite que seja emulado um dispositivo com tela
“re-tina” a partir de um dispositivo “não-re“re-tina”. O que quer dizer que algumas
media queries, tais como@media (min-resolution: 2dppx)podem ser
testadas.
• Emulate viewport— aplica umzoom outaoviewportfísico padrão do
dispo-sitivo.
• Text autosizing— emula algumas mudanças na renderização da fonte
efetu-adas por alguns dispositivos móveis, a fim de melhorar a legibilidade.
• Android font metrics— o Android aumenta de forma artificial o tamanho da
fonte de acordo com algumas configurações de sistema e tamanho de tela. Esta
opção é habilitada por padrão apenas quando se está emulando dispositivos
Android.
Por padrão, o Dev Tools já vem pré-carregado com configurações dos
dispo-sitivos móveis mais populares atualmente. Escolhendo um dispositivo da lista, ele
irá popular as outras abas (User Agent,Screen, entre outras) com as configurações
específicas do dispositivo escolhido.
Figura 10.23: Selecionando dispositivo a ser emulado
Caso deseje emular um dispotivo não listado, é possível editar os campos
indi-vidualmente com as especificações do aparelho desejado.
Emulando eventos touch
Ter que subir uma modificação para um servidor e darrefreshna página do seu
dispositivo móvel pode ser um saco na hora de desenvolver algo relacionado com
touch events, umas vez que a maioria dos desktops não possuem esse tipo deinput.
Para eventos do tiposingle-touch(feitos apenas com um dedo), é possível
simulá-los pelo Dev Tools. No painelEmulation, vá para a abaSensorse habilite ocheckbox
Emulate touch screen, como na figura a seguir.
10.3. Emulando dispositivos móveis Casa do Código
Figura 10.24: Emulando touch events
Seu mouse irá virar uma círculo, simulando a ponta de um dedo. Um clique do
mouse irá disparar os eventos touch. Para simular umpinch, aperte Shifte, com
o botão do mouse pressionado, mova o ponteiro.
Spoofing de User Agent
OUser-agenté umastringque identifica o browser — agente. Estastringé
pas-sada no cabeçalho de toda requisição ao servidor e algumas aplicações fazem uso
dessa forma de identificar o navegador para servir um conteúdo otimizado.
No Dev Tools, é possível alterar estastringfazendo com que o navegador se
“dis-farce” de um outro. Com odrawer aberto, vá no painel Emulation, na aba User
Agente escolha oUser Agentde um dispositivo ou entre com um específico, como
na figura a seguir.
Figura 10.25: Spoofing de Useragent
Um dos websites que faz tal tipo de detecção é o google.com. Faça umspoofingde
User Agentdo iPhone e tente visitar o google.com. Um nova página será renderizada.
Sobreescrevendo geolocalização
Imagine que um usuário de sua aplicação reporte um bug ao tentar procurar por
restaurantes na cidade do Rio de Janeiro. Você mora em São Paulo e sua aplicação
recebe esses dados pela API de Geolocalização do dispositivo. Como simular o
ce-nário do usuário que reportou o bug e verificar quais as repostas da aplicação no
contexto da cidade do Rio?
Essa informação também pode ser sobreescrita para fins de debugar código. No
drawer, vá para o painelEmulation, na abaSensorse habilite ocheckboxEmulate
geolocation coordinatesinformando a latitude e longitude que você deseja passar
emular, como na figura a seguir.
Figura 10.26: Sobreescrevendo geolocalização
Emulando acelerômetro
Computadores desktop e a maior parte dos notebooks não possuem
acelerôme-tro. A ausência desse sensor pode tornar impossível o teste de um código que acesse
os dados de aceleração do dispositivo. Mas com o Dev Tools é possível emulá-los (ou
sobrescrever seu valor). Para isso, vá aodrawer, depois na abaEmulatione clique no
checkboxAccelerometer. Você pode mexer a representação 3D do dispositivo para
emular uma determinada posição ou por valores diretamente em cada eixo.
No documento
Casa do Código Livros para o programador Rua Vergueiro, º andar Vila Mariana São Paulo SP Brasil
(páginas 192-198)