Como depurar problemas do lado do cliente na interface do usuário de toque do AEM ou na interface do usuário clássica
O artigo explica como depurar problemas do lado do cliente na interface do usuário de toque do AEM e/ou na interface do usuário clássica por meio das seguintes medidas:
- Depuração de manipuladores de eventos vinculados a um botão da interface do usuário
- Ativando o modo de depuração da biblioteca do cliente
- Desabilitar JavaScript minificado
Descrição description
Ambiente
Experience Manager
Problemas/Sintomas
Este guia mostra como diagnosticar problemas do JavaScript no navegador.
Exemplo de erro do JavaScript
Uncaught TypeError: $(...).not(...).draggable is not a functionat 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 resolution
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 - Habilite o recurso pretty-print no depurador da Chrome para facilitar a leitura e a depuração do javascript.
- Modificar o javascript localmente para testar possíveis correções - Use o recurso 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.
-
Abra a página no navegador do Chrome na página que contém o erro.
-
Na barra de endereços no final do URL, antes de qualquer âncora de URL, adicione este 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.
-
No navegador Chrome (no lado superior direito), vá para Ferramentas =
>Mais Ferramentas =>Ferramentas do desenvolvedor -
Clique em "Console" do painel "Ferramentas do desenvolvedor".
-
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.
-
Agora você deve estar na guia Fontes da 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.
-
Atualize a página e você pode começar a depurar o JavaScript.
C. Desabilitar minificação
Durante a depuração, se o javascript for minificado, será útil formatá-lo no navegador ou desabilitar a minificação.
-
Acesse http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl
-
Desmarcar Minify
-
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 desabilitar 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.