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.

Nota

Deseja aprender em português (Brasil)? Comece o desafio em um Trailhead Playground de português (Brasil) e use as traduções fornecidas entre parênteses para navegar. Copie e cole somente os valores em inglês porque as validações dos desafios dependem de dados em inglês. Se você não passar no desafio em sua organização de português (Brasil), recomendamos que (1) mude o local para os Estados Unidos, (2) mude o idioma para inglês, seguindo as instruções aqui, e (3) clique novamente no botão “Validar o desafio”.

Consulte o emblema Trailhead no seu idioma para saber mais sobre como aproveitar a experiência de Trailhead em outros idiomas.

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.

Sim, estamos falando de um Trailhead Playground totalmente novo! Se você estiver usando uma organização ou um Trailhead Playground existente, poderá ter problemas na hora de concluir os desafios.

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 Lightning Web Security

Como solução temporária para trabalhar com pontos de interrupção, desative o Lightning Web Security.

Em Setup (Configuração), insira Session (Sessão) na caixa Busca rápida e selecione Session Settings (Configurações de sessão).
Em Lightning Web Security, desmarque a caixa Use Lightning Web Security for Lightning web components and Aura Componentes (Usar o Lightning Web Security para componentes Web do Lightning e Componentes do Aura).
Clique em Save (Salvar).

Realizar um esvaziamento de cache e uma reinicialização total

Para garantir que a desativação do Lightning Web Security tenha efeito, o cache do navegador precisa ser limpo seguido de uma reinicialização total do navegador.

Clique com o botão direito do mouse na janela do navegador e selecione Inspect (Inspecionar).
Clique com o botão direito em e selecione Empty Cache and Hard Reload (Esvaziamento de cache e reinicialização total).

Menu Reload (Reinicialização) com as opções: Normal Reload (Reinicialização normal), Hard Reload (Reinicialização total), e Empty Cache and Hard Reload (Esvaziamento de cache e reinicialização total).

Puxar os Componentes Web do Lightning do GitHub

Conclua as instruções no repositório readme do GitHub.

Importante!

O arquivo readme faz referência aos comandos do SFDX mais antigos. Em vez disso, use os comandos do SF atualizados abaixo.

Para atualizar a CLI, use:

sf update

Para atribuir o conjunto de permissões, use:

sf org assign permset -n Solutions_Full_Access

No Iniciador de aplicativos () no Playground, encontre e abra Solutions (Soluções).

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 Iniciador de aplicativos () no Playground, encontre e abra Solutions (Soluções).
Clique com o botão direito do mouse na janela do navegador e selecione Inspect (Inspecionar) e clique na guia Sources (Fontes).

Existem várias maneiras de abrir o DevTools no navegador Chrome.

No menu, clique em Customize and control Google Chrome| More tools | Developer tools (Personalizar e controlar o Google Chrome | Mais ferramentas | Ferramentas de desenvolvedor) e selecione Sources (Fontes).

Pressione F12 ou Ctrl+Shift+I (Windows), ou Cmd+Option+I (macOS).

Aplicativo Solutions com o DevTools aberto. Textos explicativos correspondentes à descrição que vem em seguida.

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.

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) Ícone do DevTools e selecione o lado do encaixe que você deseja usar. (As imagens neste módulo mostram o DevTools encaixado na parte inferior.)

Os botões de opções ao lado do encaixe são Desencaixar em uma janela separada, Encaixar à esquerda, Encaixar na parte inferior e Encaixar à direita.

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

Console com a opção Custom formatters (Formatadores personalizados) selecionada.

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 /aura_prod.*.js$ e clique em Add (Adicionar).
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.

File Navigator (Navegador de arquivos) em Page (Página), lighting/n e modules/c expandidos.

Clique em display.js. O arquivo é aberto no Editor de código.

tela display.js

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, insira class 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.

Se você vir apenas algumas linhas de código no arquivo JavaScript, significa que o Debug Mode (Modo de depuração) não está habilitado na organização. Se a ativação do Debug Mode (Modo de depuração) não redefinir o código no Editor de código, faça uma reinicialização total: Com o DevTools aberto, clique com o botão direito do mouse no botão Reload (Reinicialização) do navegador e clique em Hard Reload (Reinicialização total)