Olá! Seja bem vindo(a), a mais um post do meu blog.

Você provavelmente, já precisou inspecionar sua página remotamente para fazer a análise de um problema de seu sistema web em um dispositivo móvel e já deve ter acontecido do problema não acontecer no seu navegador e persistir no dispositivo. Já pensou você inspecionando sua página remotamente? É isso que vou mostra para você no post de hoje 🙂

[wp_ad_camp_3]

Há algum tempo atrás uns amigos meus precisaram de resolver um caso assim, então eles vieram me perguntar se havia alguma ferramenta para fazer esse tipo de análise. Na época, eu indiquei para eles o uso do chrome://inspect e ele resolveu, porém tiveram que instalar drivers do android, habilitar depuração, aquela burocracia toda. Agora aconteceu o mesmo só que dessa vez é no Safari, e só no safari do iphone, como não tinha um MAC Book tive que ir a campo procurar alguma ferramenta para me ajudar, então encontrei o Weinre com essa ferramenta o modo de depurar tanto android quanto ios se tornou extremamente simples. E estou escrevendo esse post para mostrar a vocês como usar essa incrível ferramenta.

Oque é Weinre?

[wp_ad_camp_1]

Weinre é uma aplicação command-line escrita em NodeJS, ela cria um console virtual acessado via browser. Assim você pode continuar inspecionando sua página remotamente. Sua integração é muito simples, e seu uso é semelhante as ferramentas para desenvolvedores do firefox.

Como usar?

Primeiro é necessário ter instalado o NodeJS com  o seu gerenciador de pacotes o NPM.

Após ter o NodeJS instalado você precisa abrir seu terminal e digitar os comandos abaixos (para windows, desconsiderar o sudo apenas execute o prompt de comando como administrador):

$ sudo npm install -g weinre

Após instalado, agora você tem o weinre disponível em sua command-line, agora é hora de iniciar ele. Para isso digite o comando abaixo em seu terminal:

weinre --boundHost=0.0.0.0

Após isso o weire vai ficar escultando na porta 8080, e a seguinte mensagem vai aparecer:

2017-06-01T14:03:39.322Z weinre: starting server at http://0.0.0.0:8080

[wp_ad_camp_2]

Agora é só abrir o seu browser no endereço http://localhost:8080/client/#meuprojeto, agora é só acessar uma página padrão do seu projeto e colocar o código abaixo em seu cabeçalho:

<script src="http://SEU_IP_LOCAL:8080/target/target-script-min.js#anonymous"></script>

E pronto é só acessar pelo seu dispositivo e depurar pelo seu computador!

Observação: no script que você vai colocar em seu projeto, lembre-se de colocar o endereço de IP do seu computador e também libere o weinre no firewall quando solicitado.

Obrigado, espero que tenha ajudado!