Depuração de scripts em uma história ampliada

Esta demonstração mostrará o processo de depuração do início ao fim usando um dos cenários usados neste curso. Após o vídeo, você verá que resumimos os principais tópicos e a teoria abordada no vídeo para você.

Caso você queira saber qual parte do seu código é processada ou qual valor uma variável mantém, você pode usar o comando console.log(argument); no tempo de design. O argumento pode ser qualquer tipo de dados de uma string simples para uma matriz complexa.

No tempo de execução, você abre a barra de ferramentas do desenvolvedor do navegador e verifica a guia Console. Utilize a funcionalidade de filtro para se concentrar nas entradas Tipo de informação.

Quando o script é executado, ele escreve os argumentos no log do console.

Essa abordagem pode ser útil para cenários pequenos. No entanto, em uma escala maior, a abordagem se torna complicada, especialmente porque você deve remover logs de console desnecessários ao se tornar produtivo com sua história.

Para visualizar os scripts que você escreveu em sua história, execute a história e abra as ferramentas de desenvolvimento do navegador da Web.

1. Selecione a guia Fontes.
2. No nível superior da árvore de arquivos, procure a entrada que começa com sandbox.worker.main.
3. Em AnalyticApplication, procure a pasta com o nome da sua história.
4. Os scripts executados na história estão nessa pasta (os scripts precisam ser executados pelo menos uma vez para serem exibidos na lista).

Os nomes dos scripts seguem um esquema específico: <WIDGET_NAME>.<FUNCTION_NAME>.js. Os scripts são agrupados em uma pasta chamada <STORY_NAME>.

Os elementos dos nomes dos scripts têm o seguinte significado:

Por exemplo, se você definir um script para o evento onInitialization de Page_1, o WIDGET_NAME será definido automaticamente como Page_1.

Um URL válido de uma história em tempo de execução com o modo de depuração ativado tem a seguinte aparência: http://<HOST>:<PORT>/sap/fpa/ui/app.html?tenant=<TENANT_NAME>#;mode=present;view_id=appBuilding;appId=<APPLICATION_ID>&debug=true.

Para mostrar que o script exibido atualmente é o no modo de depuração, o apêndice "-dbg" é adicionado ao nome do script.

Na figura abaixo, você pode ver:

1. Um ponto de parada manual
2. O botão Retomar execução de script
3. Variáveis de script locais

Na depuração, você pode adicionar pontos de parada manuais. Siga estas etapas para definir um ponto de parada em seu script:

1. Abra o script que você deseja pausar durante a execução e, no lado esquerdo do script aberto nas ferramentas de desenvolvimento, clique no número da linha em que você deseja pausar o script.

   É exibido um marcador azul que destaca o número da linha. Isso indica que o script será pausado aqui na próxima vez que for executado.

2. Opcional: adicione mais pontos de parada no mesmo script para pausar o script em pontos diferentes durante o tempo de execução.

Para redefinir um ponto de parada, clique no marcador que deseja remover. A execução do script não é interrompida neste momento na próxima vez que o script for executado.

No modo de depuração, você pode usar a instrução debugger; em seus scripts.

Esta instrução emula a criação de um ponto de parada no script. Você não precisa definir explicitamente um ponto de parada em um script que deve ser depurado, mas o script interrompe automaticamente a execução assim que a instrução debugger; em seu script for interpretada.

Isso permite que você verifique, no tempo de design, os pontos em que seu script deve ser pausado durante a execução.

Quando o depurador é pausado em um ponto de parada, você encontra todas as variáveis de script locais juntas na guia Fontes da seção Local.

As variáveis de script globais podem ser adicionadas à guia Console. Você deve digitar manualmente os que deseja ver. A sintaxe segue a regra: this.$$.NAMEOFVARIABLE.