Como depurar problemas do lado do cliente na interface do usuário de toque AEM ou na interface do usuário clássica

Descrição

Ambiente

  • Experience Manager

Problemas/sintomas
Este guia mostra como diagnosticar problemas de JavaScript no navegador.

Exemplo de erro do JavaScript

Uncaught TypeError: $(...).not(...).draggable is not a function
at HTMLDocument. (lightbox.js:45)
at HTMLDocument.dispatch (jquery.js:4665)
at HTMLDocument.elemData.handle (jquery.js:4333)
at Object.trigger (jquery.js:4574)
at HTMLElement. (jquery.js:5284)
at Function.each (jquery.js:384)
at jQuery.fn.init.each (jquery.js:136)
at jQuery.fn.init.trigger (jquery.js:5283)

Resolução

A. Dicas de depuração do Javascript

  • Encontrar e depurar os manipuladores de eventos vinculados a um botão da interface do usuário - Se o erro ou o problema estiver na interface do usuário de toque relacionada a um botão clicável, talvez seja útil ver todos os manipuladores de eventos vinculados a esse elemento na página.  No navegador Google Chrome, clique com o botão direito do mouse no botão, imagem, link etc. e selecione "Inspect". No painel inferior esquerdo, o elemento HTML é selecionado.  No painel inferior direito, selecione a guia “Ouvintes de eventos” para ver os ouvintes de eventos vinculados ao elemento.
  • Formatar código JavaScript minificado ou difícil de ler - Ative o impressão bonita no depurador do Chrome para facilitar a leitura e a depuração do javascript.
  • Modificar o javascript localmente para testar possíveis correções - Use o Substituições locais no Chrome para editar arquivos javascript no navegador e testar as alterações antes de aplicá-las no servidor AEM.

B. Modo de depuração da biblioteca do cliente

Habilitar o modo de depuração da biblioteca do cliente pode ser útil para pesquisar os arquivos separados que compõem as bibliotecas do cliente.

  1. Abra a página no navegador Chrome para a página com erro.

  2. Na barra de endereços no final do URL, antes de qualquer âncora de URL, adicione o parâmetro da string de consulta "debugClientLibs=true".

    Por exemplo: http://localhost:4502/siteadmin?debugClientLibs=true#/content/we-retail

    Essa opção faz com que a biblioteca do cliente carregue todos os arquivos separadamente, em vez de consolidá-los.

    Na interface do usuário de toque, ativar o modo de depuração das bibliotecas do cliente pode corromper a página.  No entanto, ele ainda é um recurso útil, pois pode ser usado para exibir qual arquivo na biblioteca do cliente contém a linha de código específica que você está depurando.

  3. No navegador Chrome (no lado superior direito), acesse Ferramentas =Mais Ferramentas =Ferramentas do Desenvolvedor

  4. Clique em "Console" do "Ferramentas do desenvolvedorPainel ".

  5. O erro de JavaScript deve ser listado. À direita do erro, há um link com o arquivo e o número da linha em que o código JavaScript está falhando. Clique no link do arquivo.

  6. Agora você deve estar no Fontes na linha em que o código falhou. Defina um ponto de interrupção no código clicando com o botão direito do mouse no número da linha e selecionando Adicionar ponto de interrupção.  Consulte a Documentação do Google Chrome para obter mais detalhes sobre pontos de interrupção.

  7. Atualize a página e você pode começar a depurar o JavaScript.

C. Desativar minificação

Durante a depuração, se o javascript for minificado, será útil formatá-lo no navegador ou desativar a minificação.

  • Vá para http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl

  • Desmarcar a opção Minificar

  • Clique em Salvar

  • Atualize a página que você está depurando e o javascript será mais fácil de ler e definir pontos de interrupção.

Dica de depuração

Se não conseguir desativar a minificação nas bibliotecas do cliente, você poderá pelo menos usar o recurso pretty-print do javascript para melhorar a depuração. Consulte este artigo para saber como isso é feito no navegador Google Chrome.

Nesta página