Depuração remota do iOS

Com o recente lançamento do Chrome para iOS, eu me perguntava como você habilita a depuração remota para o Chrome iOS?

Atualização: com o lançamento do iOS 6, a depuração remota agora pode ser feita com o Safari .

Atualizar:

Esta não é mais a melhor resposta, siga os conselhos dos gregers .

Nova resposta:

Use Weinre .

Resposta antiga:

Agora você pode usar o Safari para depuração remota. Mas isso requer o iOS 6.

Aqui está uma tradução rápida de http://html5-mobile.de/blog/ios6-remote-debugging-web-inspector

1. Conecte seu iDevice via USB ao seu Mac
2. Abra o Safari no seu Mac e ative as ferramentas de desenvolvimento
3. No seu iDevice: vá para configurações> safari> avançado e ative o inspetor da web
4. Vá para qualquer site com seu iDevice
5. No seu Mac: abra o menu do desenvolvedor e escolha o site no seu iDevice (no topo do menu Safari)

Conforme apontado por Simons, é necessário desativar a navegação privada para que a depuração remota funcione.

Configurações> Safari> Navegação Privada> OFF

A resposta selecionada é apenas para o Safari. No momento, não é possível fazer depuração remota real no Chrome no iOS, mas como na maioria dos navegadores móveis, você pode usar o WeInRe para uma depuração simples. É um pouco trabalhoso de configurar, mas permite inspecionar o DOM, ver estilos, alterar o DOM e brincar com o console.

Para configurar:

• Instalar nodejs
• npm install -g weinre
• weinre --boundHost -all-
• Abra http: // {wifi-ip-address}: 8080 / e copie o código do script de destino
• Cole a tag de script na sua página (ou use o bookmarklet)
• Clique no link para a interface do usuário do cliente de depuração (http: // {wifi-ip-address}: 8080 / client / # anonymous)
• Quando você obtém uma linha verde em Clientes, o navegador está conectado

O bookmarklet é um pouco mais complicado de instalar. É mais fácil se você tiver a sincronização de favoritos ativada para o Chrome para computadores e dispositivos móveis. Copie o URL do bookmarklet do servidor local (o mesmo que acima). Infelizmente, ele não funciona porque não está codificado por URL corretamente. Então abra o console JavaScript e digite:

copy(encodeURI('')); // paste bookmarklet inside quotes

Agora você deve ter o bookmarklet codificado em url na sua área de transferência. Cole-o em um novo marcador em Marcadores móveis . Chame de "weinre" ou algo simples de digitar. Ele deve ser sincronizado com o seu celular muito rápido, então carregue a página que você deseja inspecionar. Em seguida, digite o nome do marcador na barra de URL e você verá o marcador como uma sugestão de preenchimento automático. Clique nele para executar o código bookmarklet :)

No momento, você não pode depurar remotamente diretamente o Chrome no iOS. Ele usa um uiWebView que pode agir sutilmente diferente do Mobile Safari.

Você tem poucas opções.

Opção 1: Mobile Safari de depuração remota usando o inspetor do Safari. Se o seu problema for reproduzido no Mobile Safari, esse é definitivamente o melhor caminho a percorrer. De fato, passar pelo simulador do iOS é ainda mais fácil.

Opção 2: use Weinre para uma experiência de depuração reduzida . Weinre não tem muitos recursos, mas às vezes é bom o suficiente.

Opção 3: depure remotamente um uiWebView adequado que funcione da mesma maneira.

Aqui está a melhor maneira de fazer isso. Você precisará instalar o XCode .

1. Vá para github.com/paulirish/iOS-WebView-App e "Download Zip" ou clone.
2. Abra o XCode, abra o projeto existente e escolha o projeto que você acabou de baixar.
3. Abra o WebViewAppDelegate.m e altere urlStringpara o URL que você deseja testar.
4. Execute o aplicativo no iOS Simulator.
5. Abra o Safari, abra o menu Develop , escolha iOS Simulator e selecione sua visualização na web.
6. O Safari Inspector agora estará inspecionando seu uiWebView.

Pelo que entendi, o Google Chrome utiliza o UIWebView do iOS em vez de uma implementação completa do Chrome, como a versão do Android.

Muitos consoles remotos funcionam bem. http://farjs.com é o meu projeto, e eu consegui depurar com êxito problemas específicos do iOS do Crome e não acontecer no safari usando-o. (e provavelmente todos os outros navegadores para celular)

O problema é que a injeção do código de depuração é um pouco complicada, pois o Chrome não permite a instalação de bookmarklets.

Em vez disso, você pode abrir uma guia na página que você depuraria e outra em farjs.com e clicar em "o bookmarklet"

Copie o código JS do bookmarklet, volte para a primeira guia, com a página que deve ser depurada, e cole o código do bookmarklet na barra de localização.

O último passo é rolar para o início da barra de localização e adicionar "javascript:", pois o Chrome a removerá.

Eu recomendo Vorlon , funciona como weinre. Eu gosto da interface do Vorlon e ele suporta SSL , meu aplicativo está em HTTPS, tentei usar o ngrok, ghostlab e vorlon, apenas o vorlon funciona bem.

Eu não tentei, mas o proxy de depuração do iOS WebKit (ios_webkit_debug_proxy / iwdp) supostamente permite depurar remotamente o UIWebView. No arquivo README.md

O ios_webkit_debug_proxy (também conhecido como iwdp) permite que os desenvolvedores inspecionem o MobileSafari e o UIWebViews em dispositivos iOS reais e simulados por meio da UI do Chrome DevTools e do Protocolo de depuração remota do Chrome. As solicitações do DevTools são convertidas nas chamadas de serviço do Remote Web Inspector da Apple.

O Vorlon.JS pode ser usado para depuração remota do iOS ou de qualquer outro cliente.

1. Basta instalá-lo globalmente usando npm i -g vorlon
2. Inicie o servidor usando vorlon
3. Com o servidor em execução, abra http: // localhost: 1337 no seu navegador para ver o painel do Vorlon.JS
4. A última etapa é ativar o Vorlon.JS adicionando esta tag de script ao seu aplicativo:
   <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
5. Todos os clientes conectados, por exemplo, iPhone e Android, estarão disponíveis na lista de clientes no painel do Vorlon.JS

Observe que essa abordagem também pode ser usada para depurar aplicativos que não estão sendo executados no host local usando o ngrok . Consulte https://stackoverflow.com/a/45443203/2073920 para obter detalhes.

aviso Legal

Sou apenas um usuário e não sou afiliado ao Vorlon.JS e ngrok

Você também precisa ter a 'Navegação privada' desativada.

Configurações> Safari> Navegação Privada> OFF

Até eu estou procurando o mesmo recurso e, a partir de hoje, ainda está para ser implementado. Eu posso pensar em duas opções, no entanto,

1. Notei que o comportamento do Chrome e do Safari é bastante idêntico; O Chrome suporta até o giroscópio e outros eventos relacionados suportados pelo Safari. No momento, estou depurando meu Web App ativando o console de depuração no Safari (através de Configurações-> Safari)

2. Experimente também o Adobe Shadow, que permite depuração / inspeção remota e sincronização.

HTH.

O Adobe Edge Inspect ( https://creative.adobe.com/products/inspect ) é outra maneira de depurar todos os seus dispositivos móveis IOS e Android (sem o Windows Phone). Ele usa weinre para inspeção / alteração remota do DOM. Não é o método mais rápido, mas funciona no Windows.

Há um erro aberto no Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

Infelizmente, eles dependem da Apple para abrir uma API no WKView para que isso aconteça, após o que talvez a depuração esteja disponível no Safari.

Estou usando o remotedebug-ios-webkit-adapter, funciona bem para mim com o IOS e o depurador abertos no Chrome no Windows 10.

Ficará feliz se isso ajuda alguém Link

Nota: Não tenho nenhuma afiliação com os criadores do Ghostlab, Vanamco.

Era importante para mim poder depurar problemas específicos do Chrome, então decidi encontrar algo que poderia me ajudar com isso. Acabei jogando feliz meu dinheiro no Ghostlab 3 . Posso testar os navegadores móveis Chrome e Safari como se os estivesse visualizando na minha área de trabalho. Apenas me fornece um endereço de LAN para usar em qualquer dispositivo que eu gostaria de depurar. Cada aplicativo usando esse endereço aparecerá na lista do Ghostlab.

Altamente recomendado.

Abra o Safari Desktop iOS

Desenvolver -> Modo de Design Responsivo

Clique em "Outro" no dispositivo

Cole isso: Mozilla / 5.0 (iPad; CPU OS 10_2_1 como Mac OS X) AppleWebKit / 602.1.50 (KHTML, como Gecko) CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

Use as ferramentas de inspeção do Safari.

Isenção de responsabilidade: Eu trabalho no BrowserStack. ^{[Confirmado] se posso postar isso ( posso sugerir um produto da empresa em que estou trabalhando? )}

Depure o Safari no iOS (não no Chrome a partir de agora, leia adiante para obter mais detalhes.)

Como isso funciona?

• Você precisa iniciar uma sessão em qualquer dispositivo real (existem emuladores, mas precisa iniciar uma sessão em um dispositivo real) no BrowserStack, por exemplo, iPhone 6S - Safari / Chrome (ainda não há ferramentas para o Chrome, mas está em nosso roteiro)
• Digite o URL
• Você pode acionar o DevTools para inspecionar a página da Web aberta no dispositivo remoto BrowserStacks. Compartilhei as telas para o mesmo abaixo.

Usando o DevTools com telefones reais

Passe o mouse sobre os elementos, edite HTML, CSS, da mesma maneira que as ferramentas do navegador de desktop.

Executando JavaScript em telefone real usando o DevTools

Alterne para a Consoleguia, execute o código JavaScript, verifique a console.log()saída e assim por diante ...

Guia Rede, verifique os cabeçalhos da solicitação, a resposta e assim por diante ...

Suporte para o DevTools no BrowserStack?

• DevTools estão disponíveis em:

  • Dispositivos reais - iOS - Safari (o DevTools para iOS Chrome está no nosso roteiro)
  • Dispositivos reais - Android - Chrome (por enquanto, apenas o Chrome está disponível em dispositivos Android)

• O navegador do cliente precisa ser Chrome ou Firefox. Isso significa que você precisa usar o navegador Chrome ou Firefox no MacOSX ou Windows para usar o DevTools do dispositivo real BrowserStack.

Nota: você precisa comprar um plano para testar em todos os dispositivos reais. Como usuário gratuito, você terá dois dispositivos Android reais (inclui tablets) e dois dispositivos iOS reais (inclui tablets). Além disso, enfatizando a palavra Dispositivos reais, porque eles também fornecem emuladores.

Mais detalhes sobre isso, consulte a seção DevTools na página Recursos móveis .