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

Última atualização em 2024-01-16

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

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

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 - Ativar o pretty-print recurso no depurador do Chrome para facilitar a leitura e a depuração do javascript.
  • Modifique o javascript localmente para testar possíveis correções - Use o Substituições locais recurso no Chrome para editar arquivos javascript no navegador a fim de 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 na página que contém o erro.

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

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

Nesta página