Preparação para a solução de problemas
Objetivos de aprendizagem
Após concluir esta unidade, você estará apto a:
- Explicar os benefícios de trabalhar com código não minimizado.
- Demonstrar como obter componentes Web do Lightning não minimizados.
- Localizar o JavaScript dos componentes Web do Lightning no DevTools.
- Usar Ignore List (Lista de ignorados) para focar somente no seu código.
- Habilitar formatadores personalizados para decoradores com proxy.
Componentes Web do Lightning têm desafios únicos de JavaScript
A solução de problemas de JavaScript é uma habilidade por si só. A solução de problemas dos componentes Web do Lightning, criada com JavaScript, usa essa habilidade e desenvolve-a. Uma das primeiras coisas que você constata é que os componentes Web do Lightning são compilados e minimizados. A minimização reduz o tamanho dos componentes e agiliza o carregamento deles pelo navegador. Porém, isso também dificulta a solução de problemas. O código minimizado é particularmente difícil de ser trabalhado porque as quebras de linha são removidas e os nomes das variáveis são alterados.
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. Vamos configurar um ambiente para você explorar o 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.
Acompanhar com o Trail Together
Deseja acompanhar especialistas enquanto trabalha nesta etapa? Veja este vídeo que faz parte da série Trail Together no Trailhead Live. Na seção Recursos, há um link para acessar a seção completa.
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?
Crie um novo Trailhead Playground agora para acompanhar e experimentar as etapas deste módulo. Role até o final desta página, clique no nome do playground e selecione Create Playground (Criar Playground). Normalmente, leva de 3 a 4 minutos para que o Salesforce crie seu Trailhead Playground. Você também poderá utilizar o Trailhead Playground quando for necessário concluir os desafios práticos.
Habilitar o modo de depuração
Essa única etapa simplifica muito a solução de problemas de código. Embora os componentes Web do Lightning ainda sejam compilados, com o Debug Mode (Modo de depuração) habilitado na organização, eles não são minimizados. 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.
- 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).
- Marque a caixa ao lado do seu usuário.
- Clique em Enable (Habilitar).
Desativar o armazenamento em cache durante o desenvolvimento
Desative a configuração de armazenamento em cache seguro e persistente do navegador para ver o efeito das alterações de código sem esvaziar o cache.
A configuração do armazenamento em cache melhora o desempenho do recarregamento de páginas, evitando deslocamentos extras para o servidor.
- Em Setup (Configuração), insira
Session
(Sessão) na caixa Busca rápida e selecione Session Settings (Configurações de sessão).
- Desmarque a seleção para Enable secure and persistent browser caching to improve performance (Ativar cache de navegador seguro e persistente para melhorar o desempenho).
- Clique em Save (Salvar).
Depois de desativar a configuração de armazenamento em cache do navegador, recarregue uma página para testar as alterações no código sem limpar o cache. Recomendamos que você reative a configuração de armazenamento em cache do navegador depois de depurar seu código.
Puxar os Componentes Web do Lightning do GitHub
- Conclua as instruções no repositório readme do GitHub.
- No App Launcher (Iniciador de aplicativos) no seu playground, encontre e abra Solutions (Soluções), em Items (Itens).
Seu ambiente já está pronto para solucionar alguns problemas usando o DevTools do navegador.
Verifique seus conhecimentos dos principais pontos da seção com esses flashcards.
Leia a pergunta ou a questão em cada cartão e clique ou toque no cartão para revelar a resposta correta. Clique na seta para a direita para passar para o próximo cartão e na seta para a esquerda para retornar ao cartão anterior.
Abrir o DevTools
Vamos analisar o aplicativo Solutions com o Chrome DevTools.
- No App Launcher (Iniciador de aplicativos) no seu playground, encontre e abra Solutions (Soluções), em Items (Itens).
- Clique com o botão direito do mouse na janela do navegador e selecione Inspect (Inspecionar) e clique na guia Sources (Fontes).
O DevTools contém o Menu do DevTools (1) e, quando a guia Sources (Fontes) é selecionada, o painel Sources (Fontes), que contém:
- O painel File Navigator (Navegador de arquivos) (2) lista todos os arquivos solicitados a partir dessa página da web.
- O painel do Editor de código (3) exibe os arquivos selecionados no Navegador de arquivos.
- No painel JavaScript Debugging (Depuração do JavaScript) (4) contém a barra de ferramentas de controle Breakpoint (Ponto de interrupção) e muitas outras ferramentas que podem ser usadas para inspecionar o JavaScript.
Menu do DevTools
O menu do DevTools tem várias opções que permitem visualizar diferentes partes do navegador. Neste módulo, trabalhamos principalmente com Sources (Fontes) e Console.
- Use o painel Elements (Elementos) para visualizar e alterar o DOM e CSS.
- Use o painel Console para ler mensagens como as que foram criadas com
console.log()
, interagir com variáveis e executar JavaScript.
- Use o painel Sources (Fontes) para visualizar e depurar arquivos JavaScript.
Alterar a localização do DevTools
Por padrão, as ferramentas ficam encaixadas no lado direito da tela. As ferramentas também podem ser encaixadas à esquerda ou na parte inferior da tela ou até podem ser desencaixadas em uma janela separada.
Clique em Customize and control DevTools (Personalizar e controlar o DevTools) e selecione o lado do encaixe que você deseja usar. (As imagens neste módulo mostram o DevTools encaixado na parte inferior.)
Habilitar formatadores personalizados
Os componentes Web do Lightning usam proxies em JavaScript para impor que certos tipos de dados sejam somente leitura. Principalmente dados provisionados por decoradores (@api, @track, @wire). Em Debug Mode (Modo de depuração), os formatadores personalizados dividem os proxies em partes legíveis. Em seguida, no Chrome DevTools, você vê o valor real em vez do proxy. Vamos habilitar os formatadores personalizados.
- Em DevTools, clique em Settings (Configurações) . A página Preferences (Preferências) é aberta.
- Em Console, selecione Custom formatters (Formatadores personalizados).
Usar a lista de ignorados
A Lista de ignorados permite que você ignore arquivos JavaScript selecionados ao usar o DevTools para que você só pause em suas próprias exceções. Isso permite ignorar o código da estrutura cujo problema você não deseja solucionar.
- Em Settings (Configurações), clique em Ignore List (Lista de ignorados).
- Clique em Add pattern (Adicionar padrão).
- Insira
/components/.*.js$
e clique em Add (Adicionar).
- Feche as configurações.
Localizar os componentes Web do Lightning
Em Sources (Fontes), os componentes Web do Lightning são exibidos em File Navigator (Navegador de arquivos) (em Page [Página]). Todos os componentes Web do Lightning personalizados da página atual estão na pasta modules/c.
- Em DevTools, clique na guia Sources (Origens).
- Em File Navigator (Navegador de arquivos), em Page (Página), expanda lightning/n e depois modules/c.
- Clique em display.js. O arquivo é aberto no Editor de código.
- Em display.js encontre
class Display
(classe Display). (Clique na janela Code [Código] e pressione Ctrl+F [Windows] ou Cmd+F [macOS]. Na caixa Busca rápida, insiraclass Display
[classe Display].)
Observe que o código foi compilado, mas não foi minimizado, portanto, os nomes das variáveis não foram alterados.
Verifique seus conhecimentos dos principais pontos da seção com esses flashcards.
Leia a pergunta ou a questão em cada cartão e clique ou toque no cartão para revelar a resposta correta. Clique na seta para a direita para passar para o próximo cartão e na seta para a esquerda para retornar ao cartão anterior.
Você vai começar a trabalhar com essas novas ferramentas na próxima unidade.
Recursos
- Trailhead Live: Trail Together - Solução de problemas dos componentes Web do Lightning
- Guia de desenvolvimento de componentes Web do Lightning: Habilitar o Debug Mode (Modo de depuração) no Salesforce
- Blog de desenvolvedores do Salesforce: Depurar seus componentes Web do Lightning
- Galeria de vídeos dos componentes Web do Lightning: Depurar componentes Web do Lightning
- Blog de desenvolvedores do Salesforce: Aumentar suas habilidades em LWC - Parte 1
- Chrome DevTools: Depurar o JavaScript
- Chrome DevTools: Visão geral