Depuração remota do iOS


199

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 .


2
A depuração remota agora pode ser feita com o Safari no Mac. Mas se você estiver desenvolvendo no Linux ou Windows, ainda precisará usar o weinre (como indicado na resposta de Greg).
Dehalion

3
A depuração remota com o Safari suporta apenas o Mobile Safari, não o iOS Chrome.
Matt Jensen

Por favor, dê uma olhada medium.com/@nikoloza/…
Machado

Respostas:


111

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


11
Sim, eu já estou usando este. Finalmente! É uma pena que a versão para Windows do Safari ainda não a tenha.
Hyangelo 26/09/12

5
Espero que o Chrome ative o mesmo recurso em breve, para que funcione em todos os sistemas operacionais.
precisa saber é o seguinte

49
Sim - com certeza seria bom se isso respondesse à pergunta que foi feita!
precisa

4
Desativar a navegação privada não é mais um requisito.
Miles

3
Motivo do voto negativo: as perguntas solicitam o Chrome, não o Safari.
NickG

230

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.

insira a descrição da imagem aqui

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 :)

insira a descrição da imagem aqui


27
Esta é a única resposta correta, todos os outros se relacionam com Safari (caminhada em um parque)
Mars Robertson

2
Instruções muito úteis! Vou acrescentar que, para instalar o bookmarklet, em vez de fazer a cópia, basta arrastar o link do bookmarklet "weinre target debug" fornecido para a barra de ferramentas dos favoritos (torne a barra de ferramentas visível Ctrl-Shift-Bse não estiver visível).
Kai Carver

Eu precisava atualizar meu navegador depois de instalar o bookmarklet para fazê-lo funcionar.
ooolala

npm install -g weinrenão estava funcionando para mim. Então eu tive que executá-lo com a versão npm install -g weinre@2.0.0-pre-I0Z7U9OV. verifique a versão mais recente aqui npmjs.com/package/weinre .
Vinesh

1
No momento, não temos suporte para o dom de sombra - ele mostra apenas os elementos de nível superior e seu dom de luz. Também não funciona para o shady dom, exceto os elementos de nível superior e seu shady-dom (e o light dom também).
Max Waterman

52

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.

insira a descrição da imagem aqui

insira a descrição da imagem aqui

insira a descrição da imagem aqui


7
Como inspecionar o iOS (iPhone / iPad) em um Windows usando o Chrome? Existe algum método para isso?
Surjith SM

@SurjithSM Esta resposta não ajudará no Windows enquanto você não puder instalar o XCode no Windows e criar o aplicativo ios. Tente isso em vez stackoverflow.com/a/22047495/1737158
Lukas Liesis

Eu já tive experiência com github.com/google/ios-webkit-debug-proxy, que é uma ferramenta incrível, e ontem tentei depurar o Google Chrome com o iOS Emulator - é a experiência mais incrível. Obrigado por # 3
Oleg Andreyev 15/17

10

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.


1
Sim, descobri isso depois que eu fiz essa pergunta. Isso é realmente uma vergonha para a maçã. Deixo esta questão em aberto com a chance de alguém descobrir uma maneira de fazê-lo.
Hyangelo 20/07

4

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á.


4

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.


3

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.


1
Teoricamente, o suporte à visualização na web do Chrome é implementado em: github.com/RemoteDebug/remotedebug-ios-webkit-adapter, que é construído sobre o proxy de depuração do webkit do iOS. Até agora, tive um sucesso limitado nesse projeto, mas espero que melhore.
Matt Jensen

3

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 insira a descrição da imagem aqui

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


Segui todos os passos, mas as perspectivas do meu iPhone não está sendo detectado nas VorlonJS executado em Mac
Amarjit Singh

2

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

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


Não sei por que ppl rebaixou esta resposta. a navegação privada precisa realmente ser desativada para permitir a depuração remota.
Codigo

14
@basecode Porque é uma resposta complementar que deveria estar no comentário.
GusDeCooL

2
@GusDeCooL Entendo, obrigado! Um comentário de um downvoter que explica isso teria sido útil.
amigos estão dizendo sobre basecode

0

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.


0

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.


O Adobe Edge Inspect não está mais listado no Adobe Creative Cloud. Consulte adobe.com/products/edge-inspect.html .
Ron Inbar

É verdade, no entanto, você ainda pode baixá-lo com uma assinatura atual, apesar de não estar mais em desenvolvimento. Veja como fazê-lo aqui: helpx.adobe.com/creative-cloud/kb/…
HumbleBeginnings 6/16

No entanto, o aplicativo iOS não está mais disponível. Ainda trabalhando no Android, mas não iOS mais: itunes.apple.com/app/id498621426
bg17aw


0

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


0

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.

insira a descrição da imagem aqui

insira a descrição da imagem aqui

Altamente recomendado.


-2

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.


-3

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.

DevTools em telefones reais, depurando sites responsivos.


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 ...

executar JavaScript em telefones reais usando devtools


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

Guia Rede para verificar solicitações


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 .


3
Ele pediu a depuração do chrome no iOS. Eu sou um cliente browserstack e possuir um Mac para depurar o Safari no iOS é possível, mas cromo faz ficar para a possibilidade de ser debugable remotamente
FABS

@fabs Temos isso em nosso roteiro. Além disso, eu já mencionei que ele só funciona no Safari - dispositivos iOS e Chrome para dispositivos Android :)
Sr. Estrangeiro

Para problemas de layout, isso não deve ser um problema, pois o mecanismo de layout dos dois navegadores é o webkit. Combinado com o recurso Local Server Testing , isso não requer nenhuma configuração adicional para depurar localhost.
amigos estão

1
A resposta não aborda a questão de qualquer maneira. Embora o Browserstack forneça um ótimo serviço, esta resposta está completamente fora de tópico.
Matt Jensen
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.