Skip to main content

Preparação para a solução de problemas

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

  • Criar gravações de perfis de desempenho.
  • Inspecionar a pilha de chamadas para encontrar problemas.
  • Demonstrar como selecionar uma parte de uma gravação de perfil.
  • Usar o Gerenciador de tarefas do Chrome para finalizar processos.

Solução de problemas de desempenho em componentes Web do Lightning

O desempenho surge da perspetiva da rapidez do site. O Tempo de página experimentado (EPT) é uma métrica de desempenho que o Salesforce usa no Lightning para medir o tempo de carregamento da página. A ideia por trás dessa métrica é determinar quanto tempo uma página leva para ser carregada e ficar em um “estado utilizável” para que um usuário possa interagir significativamente com ela. Para a maioria das páginas, o objetivo é ficar abaixo dos 3 segundos.

A solução de problemas de desempenho dos componentes Web do Lightning pode levar você em várias direções. O EPT é um indicador de alto nível do desempenho da página. Para analisar mais a fundo os problemas de desempenho, há três áreas principais a considerar.

  • Desempenho da rede
  • Desempenho do navegador
  • Complexidade e personalização da página

Triângulo do EPT com Desempenho da rede, Desempenho do navegador e Complexidade e personalização da página identificados em cada lado do triângulo.

Antes de começar

Na maior parte dos navegadores, as ferramentas de desenvolvedor têm caraterísticas semelhantes. Neste módulo, o foco será o Chrome DevTools.

Presumimos que você tem seu ambiente de desenvolvimento Salesforce DX configurado e se sente confortável em usá-lo para criar componentes Web do Lightning e implantá-los em uma organização. Se você ainda não está familiarizado com esse processo, conclua o projeto Início rápido: Componentes Web do Lightning antes de prosseguir no módulo.

Este módulo depende muito de sua experiência com o Chrome DevTools no módulo anterior da trilha: Solução de problemas dos componentes Web do Lightning. Na verdade, se tive acabado de concluir esse emblema, seu Playground deverá estar pronto para usar o código do GitHub necessário para o módulo.

Se tiver concluído o emblema Solução de problemas dos componentes Web do Lightning, verifique se tem o código mais recente do GitHub.

  1. No Visual Studio Code, abra o projeto troubleshoot-lwc.
    • Clique em File > Open (Arquivo | Abrir) (macOS) ou File > Open Folder (Arquivo | Abrir pasta) (Windows) e selecione o diretório troubleshoot-lwc.
  1. Abra a Command Palette (Paleta de comandos) pressionando Ctrl+Shift+P (Windows) ou Cmd+Shift+P (macOS).
  2. Insira git.
  3. Selecione Git: Pull.
  4. No diretório force-app/main/default, abra o diretório permissionsets.
  5. Verifique se o arquivo Bad_Bunch_Full_Access.permissionset-meta.xml existe.
  6. Clique com o botão direito do mouse na pasta padrão em force-app/main.
  7. Selecione SFDX: Deploy Source to Org (SFDX: Implantar origem na organização).
  8. Clique em View > Terminal (Exibir | Terminal).
  9. Atribua o conjunto de permissões Bad Bunch Full Access (Acesso total ao Bad Bunch) ao usuário padrão executando o seguinte comando no terminal:
    sf org assign permset -n Bad_Bunch_Full_Access
  10. Avance para Comece com um navegador limpo abaixo.

Configurar seu ambiente de solução de problemas

Primeiro, é necessário configurar um Trailhead Playground com alguns componentes Web do Lightning e prepará-lo para a solução de problemas.

Pronto para praticar nos Componentes Web do Lightning?

Não temos um desafio prático neste módulo, mas você pode experimentar as etapas em seu Trailhead Playground. Veja como acessar seu Playground. Primeiro, verifique se você está conectado ao Trailhead. Em seguida, clique no avatar do usuário no canto superior direito desta página e selecione Hands-on Orgs (Organizações práticas) na lista suspensa. Clique em Launch (Iniciar) ao lado da organização que você deseja abrir. Ou, se quiser criar um novo playground, clique em Create Playground (Criar playground).

Habilitar o Debug Mode (Modo de depuração)

Essa etapa simplifica muito a solução de problemas de código. Com o Debug Mode (Modo de depuração) habilitado na organização, o código não é minimizado. Assim, os nomes das variáveis permanecem iguais e a estrutura geral do código não é alterada, o que facilita muito a solução de problemas.

  1. Em Setup (Configuração), insira Debug Mode (Modo de depuração) na caixa Busca rápida e, em seguida, selecione Debug Mode (Modo de depuração).
  2. Marque a caixa ao lado do seu usuário.
  3. Clique em Enable (Habilitar).

Puxar os Componentes Web do Lightning do GitHub

  1. Conclua as instruções no repositório readme do GitHub.
  2. No Visual Studio Code, atribua o conjunto de permissões Bad Bunch Full Access (Acesso total ao Bad Bunch) ao usuário padrão executando o seguinte comando no terminal.
    sf org assign permset -n Bad_Bunch_Full_Access

Seu ambiente já está pronto para solucionar alguns problemas usando o DevTools do navegador.

Começar com um navegador limpo

  1. Abra um navegador Chrome no modo de navegação anônima ou de convidado.
    Isso garantirá que o Chrome seja executado sem extensões instaladas e em estado limpo. As extensões podem criar ruído nas medições de desempenho.
    • Clique em Customize and control Google Chrome (Personalizar e controlar o Google Chrome) () e selecione New Incognito Window (Nova janela anônima).
  1. Abra seu Playground.
  2. Garanta que Debug Mode (Modo de depuração) esteja ativado para seu usuário.
    Isso também exibirá o EPT no navegador.
    EPT exibido na janela do navegador.
Nota

Você também pode fazer com que o EPT seja exibido usando o sufixo de URL “?eptVisible=1”.

Corrigir bloqueios ou falhas do navegador Chrome

Os exemplos de componentes Web do Lightning neste emblema podem provocar o bloqueio do navegador ou até falhas no Chrome. Há uma ferramenta interessante que permite fechar guias que não respondem. Vamos dar uma olhada.

  1. Clique com o botão direito do mouse na área em branco na seção de guias do navegador Chrome e selecione Gerenciador de tarefas.
    Menu do botão direito do mouse com opções para Nova guia, Reabrir guia fechada, Marcar todas as guias como favorito, Nomear a janela e Gerenciador de tarefas.
  2. Clique em um item no Gerenciador de tarefas para ver a opção Finalizar processo.
    Gerenciador de tarefas com um item selecionado e o botão Finalizar processo ativo.

Agora que temos uma solução para sair de um processo bloqueado, vamos começar. 

Abrir a guia Desempenho do DevTools

Vamos analisar o aplicativo Bad Bunch com a guia Performance (Desempenho) do Chrome DevTools.

  1. No Iniciador de aplicativos (), no seu playground, encontre e abra o Bad Bunch.
  2. Clique com o botão direito do mouse na janela do navegador e clique em Inspect (Inspecionar).
  3. Clique em Customize and control DevTools (Personalizar e controlar o DevTools) () e selecione o lado do encaixe que deseja usar. (As imagens do módulo mostram o DevTools desencaixado em uma janela separada.)
    Botões de opções do lado do encaixe com a opção Desencaixar em uma janela separada em destaque.
    Com o DevTools em uma janela separada, é possível ter melhor acesso a todos os dados durante a solução de problemas.
  4. Selecione a guia Performance (Desempenho).
    DevTools aberto com a guia Performance (Desempenho) selecionada.

Opções de desempenho

Existem muitas opções e informações que podem ser obtidas na área Desempenho. Aqui estão algumas que iremos abordar.

Os botões da barra de ferramentas das opções de desempenho são descritos na tabela a seguir.

Botão

Ação

Descrição

Registro

Inicia uma nova gravação de perfil com todas as atividades da página ocorridas como resultado de interações.

Iniciar a criação de perfil e recarregar a página

Inicia uma nova gravação de perfil enquanto recarrega a página, analisando o desempenho de uma página enquanto ela está sendo carregada. Interrompe automaticamente a gravação quando a página é carregada. 

Limpar

Limpa todas as gravações do perfil. Não se esqueça de salvar os perfis desejados para serem analisados posteriormente. 

Carregar perfil

Carrega perfis que foram previamente registrados e salvos.

Salvar perfil

Salva um perfil registrado.

Mostrar sessões recentes da linha de tempo

Lista as gravações de perfis para essa sessão do DevTools. Use essa opção para alternar entre as gravações. Se o DevTools for fechado, as gravações serão apagadas. Não se esqueça de salvar os perfis para análise futura antes de fechar o DevTools.

Fazer capturas de tela

Faz capturas de tela de todos os quadros durante a gravação. Não se esqueça de desativar esse recurso quando estiver trabalhando com dados confidenciais e quiser gravar o perfil.

Mostrar linha de tempo da memória

Se essa opção estiver ativada durante a visualização de um perfil gravado, apresentará as métricas de memória dessa gravação.

Recolher lixo

Força a recolha do lixo durante a gravação de um perfil.

Configurações de captura

Abre configurações extras, como opções de regulagem para rede e CPU.

Regulagem da rede

Nas configurações de captura, permite definir o nível de regulagem da rede necessário para a solução de problemas.

Regulagem da CPU

Nas configurações de captura, permite definir o nível de regulagem da CPU necessário para a solução de problemas. A regulagem depende das capacidades do seu computador. 

Gravar um perfil

  1. Com o aplicativo Bad Bunch aberto, na guia DevTools Performance (Desempenho do DevTools), clique em Record (Registro) ().
    Observe que o ícone Record (Registro) fica vermelho e a janela de status apresenta Status Profiling (Perfil do status) e o botão Stop (Parar).
    Janela de status gravando um perfil exibindo o botão Stop (Parar).
  2. No aplicativo Bad Bunch, clique em Do Something (Fazer algo).
    Aguarde até que o tempo de execução seja apresentado. Isso deve demorar um pouco e o navegador basicamente ficará bloqueado enquanto executa a solicitação.
    Botão Do Something (Fazer algo) com o tempo de execução: aproximadamente 4571 milissegundos.
  3. Agora, clique em Do Something Faster (Fazer algo mais rápido).
    O tempo será apresentado muito mais rapidamente.
    Botão Do Something Faster (Fazer algo mais rápido) com tempo de execução: aproximadamente 20 milissegundos.
  4. No painel Performance (Desempenho), clique em Stop (Parar) na janela de status.
    A gravação para. Em seguida, os dados são processados e os resultados são exibidos no painel Performance (Desempenho).
    Painel Performance (Desempenho) do DevTools com a gravação do perfil apresentada.
    É muita informação!
Nota

A navegação na seção Desempenho pode ser um pouco confusa. Role para baixo com o mouse e o zoom será aumentado e reduzido em vez de rolar para cima ou para baixo. Veja os comandos básicos.

    • Rolar com o mouse ou o trackpad para aumentar e diminuir o zoom
    • Clique e arraste em qualquer parte da IU para rolar para cima/baixo/esquerda/direita
    • Clique e arraste a barra de rolagem para rolar para cima/para baixo
    • Use as teclas WASD para aumentar/reduzir o zoom e rolar para a esquerda/direita (ou as teclas equivalentes no seu teclado, se forem diferentes)
    • Use as teclas para cima/para baixo para alterar as categorias e para a esquerda/direita para as expandir/recolher
  1. As cores usadas no gráfico da CPU são utilizadas no painel Summary (Resumo) nos gráficos.
    Painel Performance (Desempenho) com o gráfico da CPU e o painel Summary (Resumo) destacados em vermelho.
    Observe a cor maximizada no gráfico da CPU. Esse é um forte indicador de um possível problema. Observando a cor correspondente no painel Summary (Resumo), vemos que o Scripting estava maximizado.
  2. Abra a seção Main (Principal) para ver a pilha de chamadas JavaScript dos eventos à medida que eles foram chamados.
    Painel Performance (Desempenho) mostrando a seção Main (Principal) com a pilha de chamadas JavaScript.
    As barras são eventos e o tamanho mostra o tempo que eles levaram para serem executados. Quando empilhado, o evento superior causou o evento inferior. Entender a natureza de thread único do JavaScript é fundamental para solucionar problemas de desempenho do LWC.
  3. Selecione um dos eventos para apresentar detalhes no painel Summary (Resumo).
    Painel Performance (Desempenho) mostrando a seção Main (Principal) e invokeListenerByPlacement selecionado.
    Observe que este em particular é o evento do aura invokeListenersByPlacement (o evento está no arquivo aura_proddebug.js na linha 516). Isso faz parte do código básico do Lightning e não é o que você está procurando para solucionar o problema.
  4. Selecione um dos eventos runExpensiveLoop.
    Painel Performance (Desempenho) mostrando a seção Main (Principal) e runExpensiveLoop selecionado.
    Parece que ele foi executado várias vezes, mas isso pode induzir pessoas a erros. O DevTools usa a heurística para saber como exibir os resultados. No entanto, esse é nosso código, não um evento do Aura.
  5. No painel Summary (Resumo), clique no link no arquivo example1_Loop.js. Ele vai levar você até o painel Sources (Origens) com o código destacado com o tempo de execução.
    Painel Sources (Origens) mostrando o arquivo example1_Loop.js com linhas destacadas mostrando tempos de execução.
    Você pode ver na linha 99 que a análise da sequência de caracteres JSON no loop está demorando muito.
  6. Volte para a guia Performance (Desempenho) e clique em um espaço em branco na seção Main (Principal) para limpar a seleção runExpensiveLoop.
  7. Ao lado da guia Summary (Resumo), selecione Bottom-Up (De baixo para cima).
    O painel Bottom-Up (De baixo para cima) mostra primeiro os eventos com maior tempo de execução.
    Essa é outra forma de ver o que está demorando mais tempo para ser executado. O painel Bottom-Up (De baixo para cima) mostra apenas os eventos da parte selecionada da gravação. Vamos dar uma olhada no clique do botão Do Something Faster (Fazer algo mais rápido).

Selecionar a parte da gravação que será usada

  1. Mova o mouse para a direita ou para a esquerda na seção Overview (Visão geral) (a área com gráficos de FPS, CPU e NET) para exibir a captura de tela desse momento na gravação.
    Painel Performance (Desempenho) exibindo uma captura de tela do ponto selecionado da gravação.
  2. Clique e arraste o mouse sobre a seção da gravação que você pretende selecionar.
    Selecione a área do clique do botão Do Something Faster (Fazer algo mais rápido).
    Painel Performance (Desempenho) exibindo a seleção de uma parte da gravação.
    Você pode ver que se trata de uma seção muito menor da gravação.
Nota

A gravação terá um visual diferente do apresentado devido às diferenças nas capacidades do computador.

  1. Clique no evento runOptimalLoop para ver os detalhes no painel Summary (Resumo). Pode ser necessário selecionar a guia Summary (Resumo) se você ainda estiver exibindo o painel Bottom-Up (De baixo para cima).
  2. Clique no link example1_Loop.js para alternar para o painel Sources (Origens) novamente.
    Painel Sources (Origens) mostrando o arquivo example1_Loop.js com linhas destacadas mostrando tempos de execução.
    Você pode ver que runOptimalLoop é semelhante a runExpensiveLoop, exceto que a análise JSON acontece fora do loop for na linha 112. Executar a análise apenas uma vez fora do loop for na linha 112 leva apenas ~0,1s, como você pode ver na coluna lateral. Na linha 99, onde a análise foi executada várias vezes no loop, levou um total de ~4.343,3ms. Isso representa um aumento de 4 MILHÕES porcento quando comparamos o posicionamento da análise dentro do método! Seus tempos de gravação podem variar em relação a esses resultados.
  3. Clique em Save Profile (Salvar perfil) () para baixar esse perfil para salvar uma cópia, selecione um local para o arquivo JSON que foi salvo e clique em Save (Salvar).
    Você pode usar Load Profile (Carregar perfil) () para carregá-lo posteriormente.
Nota

Existem perfis pré-gravados no repositório GitHub clonado para consulta:

    • Clique em Load Profile (Carregar perfil) e navegue até seu projeto DX.
    • Abra a pasta profiles (perfis) e selecione Example-1-Loop-profile.json.

Vamos dar uma olhada em alguns outros exemplos de componentes Web do Lightning na próxima unidade.

Recursos

Compartilhe seu feedback do Trailhead usando a Ajuda do Salesforce.

Queremos saber sobre sua experiência com o Trailhead. Agora você pode acessar o novo formulário de feedback, a qualquer momento, no site Ajuda do Salesforce.

Saiba mais Continue compartilhando feedback