Olá, pessoal! 👋 Sejam muito bem-vindos à nossa Aula 84, um marco importante em nossa jornada do “Shopify do Zero ao Avançado”!

Eu sou seu professor, com mais de uma década de experiência transformando ideias em lojas virtuais de sucesso no Shopify. Nesta aula, vamos mergulhar em um dos temas mais críticos e desafiadores para qualquer desenvolvedor: Debugging e Resolução de Problemas Técnicos. 🐛🔍

Como desenvolvedores, a realidade é que nem tudo sai perfeito de primeira. Erros acontecem, scripts falham, layouts quebram. A diferença entre um bom e um excelente desenvolvedor não é não cometer erros, mas sim saber como encontrá-los, entendê-los e corrigi-los de forma eficiente. 💪

Preparem-se para afiar suas habilidades de detetives digitais! Vamos explorar as ferramentas e a mentalidade necessárias para identificar e solucionar qualquer mistério que possa surgir na sua loja Shopify.

—

Aula 84 – Loja Shopify do Zero ao Avançado: Debugging e resolução de problemas técnicos

📚 O que você vai aprender nesta aula

Nesta aula avançada, você irá:

• Identificar os tipos mais comuns de problemas que surgem em lojas Shopify, desde falhas de layout até bugs em funcionalidades.
• Dominar as ferramentas de desenvolvedor do navegador (Chrome DevTools, Firefox Developer Tools) para inspeção, depuração e análise de rede.
• Aprender técnicas avançadas para depurar código Liquid, entendendo como inspecionar variáveis e fluxos.
• Utilizar o console.log e breakpoints para rastrear e depurar scripts JavaScript customizados.
• Compreender como analisar logs de erro no painel de administração da Shopify, especialmente relacionados a apps e pedidos.
• Desenvolver uma metodologia de isolamento de problemas, crucial para resolver bugs complexos.
• Adotar boas práticas de desenvolvimento para prevenir erros e facilitar a depuração futura.

🔗 Conectando com aulas anteriores

Até agora, construímos uma base sólida! Nas aulas anteriores, você aprendeu sobre:

• Estrutura de temas Shopify (Aulas 40-45), incluindo arquivos layout, templates, sections, snippets, assets e config.
• Programação com Liquid (Aulas 46-55), onde vimos objetos, propriedades, filtros, tags e controle de fluxo.
• Personalização de temas com HTML, CSS e JavaScript (Aulas 56-65), adicionando funcionalidades e estilização customizadas.
• Integração com APIs e apps de terceiros (Aulas 70-75), que frequentemente envolvem scripts e requisições externas.
• Otimização de performance (Aulas 80-82), onde uma boa depuração é essencial para identificar gargalos.

Praticamente tudo o que você aprendeu a construir, você precisará depurar em algum momento. Um CSS que não aplica, um script que não funciona, um dado Liquid que não aparece – todos são cenários onde as habilidades de depuração que veremos hoje serão seus melhores aliados. Esta aula é a cola que une todo o seu conhecimento de desenvolvimento, permitindo que você resolva problemas em qualquer camada da sua loja Shopify.

📖 Conteúdo Principal

A depuração (debugging) é a arte e a ciência de encontrar e corrigir erros (bugs) no código. É uma habilidade indispensável que separa um codificador de um engenheiro de software completo.

1. A Mentalidade do Debugger 🕵️‍♂️

Antes de pular nas ferramentas, vamos falar sobre a abordagem:

• Seja Sistemático: Não adivinhe. Teste hipóteses, uma de cada vez.
• Seja Paciente: Erros podem ser frustrantes, mas a paciência leva à solução.
• Seja Lógico: Pense como um computador. Siga o fluxo do código passo a passo.
• Minimize as Variáveis: Tente isolar o problema o máximo possível.
• Documente: Anote o que você tentou, o que funcionou e o que não funcionou.

2. Tipos Comuns de Problemas em Lojas Shopify

Vamos categorizar os problemas mais frequentes:

2.1. Problemas de Layout e Estilização (CSS) 🎨

• Elementos desalinhados, sobrepostos.
• Estilos não aplicados ou sobrescritos por outros.
• Responsividade quebrada em diferentes dispositivos.
• Imagens ou ícones que não carregam.

2.2. Problemas de Funcionalidade (JavaScript) ⚙️

• Botões, menus dropdown ou formulários que não respondem.
• Carrosséis ou galerias de imagens que não funcionam.
• Validações de formulário que falham ou não aparecem.
• Scripts de terceiros (apps) que entram em conflito.
• Requisições AJAX que falham ou retornam dados inesperados.

2.3. Problemas de Dados e Lógica (Liquid) 📦

• Informações do produto (preço, descrição) incorretas ou ausentes.
• Filtros de coleção que não funcionam ou exibem produtos errados.
• Loops infinitos ou dados duplicados.
• Variáveis Liquid não definidas ou com valores inesperados.
• Lógica condicional (if/else) que não se comporta como esperado.

2.4. Problemas de Integração e Apps 🤝

• Apps de reviews, upsell ou chat que não carregam.
• Sincronização de dados entre Shopify e outros sistemas (ERPs, CRMs) falhando.
• Pagamentos ou entregas com erros específicos do gateway/transportadora.
• APIs de terceiros que retornam erros.

2.5. Problemas de Performance 🐌

• Página carregando muito lentamente.
• Imagens não otimizadas, muitos scripts bloqueadores.
• Requisições de rede excessivas ou lentas.
• (Este é um tópico que aprofundaremos na próxima aula, mas a depuração é a base para identificá-los).

3. Ferramentas Essenciais do Desenvolvedor (Navegador) 🛠️

Seu navegador é seu melhor amigo no debugging. Vamos focar no Chrome DevTools (os conceitos são semelhantes em outros navegadores). Para abri-lo, clique com o botão direito em qualquer lugar da página e selecione “Inspecionar” ou use Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (macOS).

3.1. Painel Elements (Elementos) 🌳

• O que faz: Exibe a estrutura HTML da página e os estilos CSS aplicados a cada elemento. Permite edição “ao vivo” para testes.
• Como usar:
• Use o ícone de “selecionar elemento” (seta no canto superior esquerdo) para clicar em qualquer parte da página e inspecionar seu HTML e CSS.
• Na aba “Styles” (Estilos), veja quais regras CSS estão sendo aplicadas, sua origem e se estão sendo sobrescritas.
• Na aba “Computed” (Computado), veja os valores finais de todas as propriedades CSS após a cascata.
• Na aba “Event Listeners”, veja quais eventos JS estão atrelados a um elemento.

3.2. Painel Console (Console) 💬

• O que faz: Exibe mensagens de log de JavaScript, avisos e erros. Permite executar comandos JavaScript em tempo real.
• Como usar:
• Fique de olho em mensagens de erro (Uncaught TypeError, 404 Not Found para scripts/assets).
• Use console.log('Mensagem:', variavel) no seu JS para imprimir valores e rastrear o fluxo do código.
• Use console.warn() para avisos e console.error() para erros intencionais.
• Execute comandos JS diretamente para testar funcionalidades ou inspecionar objetos globais.

3.3. Painel Sources (Fontes) 💡

• O que faz: Permite depurar código JavaScript em detalhes, definir breakpoints, inspecionar variáveis e controlar a execução do script.
• Como usar:
• Navegue até o arquivo JavaScript que você quer depurar.
• Clique em um número de linha para definir um breakpoint. Quando o código atingir essa linha, a execução será pausada.
• Use os botões de controle de execução: Step over (próxima linha), Step into (entrar em função), Step out (sair da função), Resume (continuar).
• Na seção “Scope” (Escopo), inspecione os valores das variáveis locais e globais no ponto de interrupção.

3.4. Painel Network (Rede) 🌐

• O que faz: Mostra todas as requisições de rede feitas pela página (HTML, CSS, JS, imagens, chamadas API, etc.), seus tempos de carregamento e respostas.
• Como usar:
• Recarregue a página com o painel aberto para ver todas as requisições.
• Filtre por tipo (JS, CSS, XHR/Fetch) para encontrar o que procura.
• Procure por requisições com status de erro (4xx, 5xx) que podem indicar problemas com assets ausentes ou falhas de API.
• Analise o tempo de carregamento de cada recurso para identificar gargalos de performance.

4. Debugging com Liquid 💧

O Liquid é um código renderizado no servidor, o que significa que você não pode depurá-lo diretamente no navegador como o JavaScript. No entanto, temos técnicas eficazes:

4.1. Inspecionando Variáveis com | json ✨

O filtro json é um salva-vidas! Ele converte qualquer objeto ou variável Liquid em uma string JSON, tornando seu conteúdo legível na página.

Detalhes do Produto:
{{ product | json }}


Variáveis da Coleção:
{{ collection | json }}


{% assign meu_array_custom = "item1,item2,item3" | split: "," %}
Meu Array Customizado:
{{ meu_array_custom | json }}




  Dica: Envolva o output em tags 
 para manter a formatação JSON legível.
  Cuidado: Não deixe esses outputs de debug em produção, pois expõem dados e poluem o HTML. Use {% comment %} ou remova após a depuração.

4.2. Usando {% comment %} para Isolar Código 📝
Se você suspeita que um bloco de código Liquid está causando um problema, você pode desativá-lo temporariamente.

{% comment %}
Este é um bloco de código Liquid que pode estar causando problemas.
{% for item in collection.products %}
{{ item.title }}

{% endfor %}
{% endcomment %}




  Benefício: Permite testar a página sem o código suspeito. Se o problema sumir, você sabe onde procurar.

4.3. Testes Condicionais 🧐
Para verificar se uma variável existe ou tem o valor esperado:

{% if product %}
Produto existe! Título: {{ product.title }}

{% else %}
Produto não encontrado ou variável product está vazia.

{% endif %}
{% if product.price > 100 %}
Este produto é caro!

{% endif %}


Isso ajuda a entender se seus dados estão chegando como você espera e como a lógica Liquid está respondendo a eles.
5. Debugging JavaScript Avançado 🧑‍💻
5.1. console.log() Detalhado
Além de simplesmente imprimir variáveis, você pode usar console.log para depuração mais estruturada:
javascript

// assets/theme.js
console.log('Script theme.js carregado.');
function adicionarAoCarrinho(produtoId) {
console.log('Função adicionarAoCarrinho chamada para o produto:', produtoId);
// Exemplo de como checar o tipo de uma variável
if (typeof produtoId !== 'number') {
console.error('Produto ID não é um número:', produtoId);
return; // Parar a execução se o ID for inválido
}
// Simula a lógica de adicionar ao carrinho
fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: produtoId, quantity: 1 }] })
})
.then(response => {
console.log('Resposta da API de carrinho:', response);
if (!response.ok) {
console.error('Erro ao adicionar ao carrinho:', response.statusText);
// Você pode tentar parsear o corpo da resposta para mais detalhes
return response.json().then(err => {
console.error('Detalhes do erro:', err);
throw new Error(err.message);
});
}
return response.json();
})
.then(data => {
console.log('Item adicionado ao carrinho com sucesso:', data);
// Atualizar UI do carrinho
})
.catch(error => {
console.error('Falha na requisição de adição ao carrinho:', error);
});
}
// Event listener exemplo
document.addEventListener('DOMContentLoaded', () => {
const addToCartButton = document.querySelector('.add-to-cart-button');
if (addToCartButton) {
addToCartButton.addEventListener('click', (event) => {
event.preventDefault(); // Previne o comportamento padrão do link/botão
const productId = parseInt(addToCartButton.dataset.productId); // Assumindo data-product-id
adicionarAoCarrinho(productId);
});
} else {
console.warn('Botão "Adicionar ao Carrinho" não encontrado.');
}
});



  console.group()/console.groupEnd(): Para organizar logs em grupos recolhíveis.
  console.table(): Para exibir arrays de objetos de forma tabular.
  console.trace(): Para ver a pilha de chamadas que levou a uma função.

5.2. Breakpoints e o Statement debugger; 🛑

  Breakpoints: Vimos no Painel Sources. São sua principal ferramenta para pausar a execução e inspecionar o estado do código.
  debugger; Statement: Adicionar a palavra-chave debugger; diretamente no seu código JavaScript fará com que o navegador pause a execução naquele ponto, se o DevTools estiver aberto. É como um breakpoint programático.

javascript

function calcularTotal(preco, quantidade) {
debugger; // A execução vai pausar aqui
let total = preco * quantidade;
console.log('Total calculado:', total);
return total;
}


5.3. Try-Catch Blocks para Tratamento de Erros 🚧
Envolva código que pode falhar em blocos try-catch para capturar erros e lidar com eles elegantemente, impedindo que seu script inteiro pare.
javascript

try {
// Código que pode gerar um erro
let dadosInvalidos = JSON.parse("{chave: valor}"); // Isso vai falhar!
console.log(dadosInvalidos);
} catch (error) {
console.error("Um erro ocorreu ao processar dados:", error.message);
// Você pode exibir uma mensagem para o usuário, enviar o erro para um serviço de log, etc.
}


6. Debugging de Integrações e Apps Shopify 🧩
Quando o problema parece vir de um app ou integração:

  Verifique o Painel de Administração:
  Pedidos (Orders): Na timeline de um pedido, você pode ver logs de eventos de apps de pagamento, envio, ou fulfillment.
  Apps: Muitos apps têm seus próprios dashboards com logs de atividades, erros de sincronização ou configurações. Verifique a documentação do app!
  Notificações/Alertas: Shopify pode emitir alertas sobre apps com problemas.
  Painel Network do Navegador: Observe as requisições AJAX e Fetch. Se um app usa APIs de terceiros, você verá as chamadas aqui. Procure por erros 4xx (cliente) ou 5xx (servidor) nas respostas.
  Isolamento: Desative o app temporariamente (se possível) para ver se o problema desaparece. Se sim, o app é a causa. Reative-o e tente isolar qual funcionalidade dele está causando o conflito.

7. Estratégias de Isolamento de Problemas 🔬
Essa é a arte da depuração!

  Desativar o "Último Suspeito": Se o problema começou após instalar um app ou fazer uma alteração no código, comece desfazendo ou desativando essa última alteração.
  Teste com um Tema Limpo: Duplique seu tema atual e crie um novo tema "Dawn" limpo. Teste o problema no tema limpo. Se o problema não ocorrer, ele está no seu tema customizado.
  Comentário Metódico: Comente grandes blocos de código (HTML, Liquid, JS) um por um. Se o problema sumir, descomente metade do bloco e repita. Isso é a "pesquisa binária" na depuração.
  Reproduza o Erro: Tente reproduzir o erro de forma consistente. Quais são os passos exatos? Qual navegador, dispositivo, condição? Quanto mais você entende como o erro ocorre, mais fácil será corrigi-lo.
  Verificação de Variáveis: Se o problema é de dados (Liquid ou JS), imprima ou inspecione todas as variáveis envolvidas para ver seus valores em cada etapa.

8. Boas Práticas para Prevenir Erros e Facilitar a Depuração 😇

  Controle de Versão (Git): Use Git para gerenciar seu código. Isso permite reverter para versões anteriores se algo quebrar. (Abordamos isso em aulas de setup de ambiente).
  Desenvolvimento em Tema Duplicado/Staging: Nunca faça grandes alterações diretamente no tema ativo. Sempre trabalhe em um tema duplicado ou em um ambiente de desenvolvimento separado.
  Comentários no Código: Explique a lógica complexa, o porquê de certas decisões e as áreas que podem ser sensíveis.
  Código Limpo e Modular: Escreva funções e componentes pequenos e bem definidos. Isso torna o código mais fácil de entender e depurar.
  Validação de Entrada: Sempre valide os dados de entrada (formulários, APIs) para evitar comportamentos inesperados.
  Documentação: Mantenha um registro de bugs encontrados e suas soluções. Isso cria uma base de conhecimento valiosa.

---
💻 Exemplos Práticos
Vamos colocar a mão na massa com alguns cenários comuns.
Exemplo 1: Depurando CSS com o Painel Elements
Problema: O botão "Adicionar ao Carrinho" está com a cor de fundo errada e o texto não está centralizado.
Cenário: Temos um botão Adicionar
1.  Abra o DevTools: Clique com o botão direito no botão e selecione "Inspecionar".
2.  Painel Elements: Você verá o HTML do botão selecionado.
3.  Aba Styles: À direita, você verá todas as regras CSS aplicadas ao botão.

  Procure por background-color e text-align.
  Você pode ver que talvez uma regra mais genérica (button { background-color: gray; }) esteja sobrescrevendo a sua específica (.add-to-cart-button { background-color: green; }). A regra sobrescrita será riscada.
  Teste ao vivo: Clique na propriedade CSS e altere o valor, ou adicione novas propriedades (ex: background-color: #007bff; text-align: center;). Veja a mudança acontecer instantaneamente na página. Isso ajuda a encontrar a regra correta.
  Prioridade CSS: Lembre-se da especificidade do CSS (IDs > Classes > Elementos).
  Box Model: Na aba "Computed" e na visualização no topo do Styles, você pode ver o box model (margin, border, padding, content) do elemento, útil para problemas de espaçamento.

Screenshot Simulado:

[Imagine um screenshot do Chrome DevTools, com o painel Elements mostrando um , e o painel Styles à direita mostrando várias regras CSS para o botão. Uma regra 'background-color: gray;' seria riscada, e uma 'background-color: blue;' com '!important' ou maior especificidade estaria ativa, além de um 'text-align: left;' que o usuário estaria editando para 'center'.]



Exemplo 2: Depurando JavaScript com console.log e Breakpoints
Problema: Um script customizado que deveria mostrar uma mensagem de "Produto adicionado!" após adicionar um item ao carrinho não está funcionando.
Código (assets/custom-cart.js):
javascript

// Este código está no seu arquivo assets/custom-cart.js
document.addEventListener('DOMContentLoaded', () => {
const addToCartForms = document.querySelectorAll('form[action="/cart/add"]');
if (addToCartForms.length > 0) {
addToCartForms.forEach(form => {
form.addEventListener('submit', async (event) => {
event.preventDefault(); // Impede o envio padrão do formulário
// Usando console.log para rastrear o início da função
console.log('Formulário de adicionar ao carrinho enviado. Iniciando requisição AJAX.');
const formData = new FormData(form);
const data = Object.fromEntries(formData.entries()); // Converte FormData para objeto
// console.log para ver os dados que serão enviados
console.log('Dados do formulário para envio:', data);
try {
const response = await fetch('/cart/add.js', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ items: [{ id: parseInt(data.id), quantity: parseInt(data.quantity || 1) }] })
});
// console.log para ver a resposta bruta
console.log('Resposta da API de adicionar ao carrinho:', response);
if (response.ok) {
const result = await response.json();
console.log('Produto adicionado com sucesso:', result); // Log de sucesso
alert('Produto adicionado ao carrinho!'); // Mensagem de sucesso
// Atualizar minicarrinho ou algo similar
} else {
const errorResult = await response.json();
console.error('Erro ao adicionar produto:', errorResult); // Log de erro
alert(Erro ao adicionar: ${errorResult.message});
}
} catch (error) {
console.error('Falha na requisição de adicionar ao carrinho:', error); // Captura erros de rede
alert('Ocorreu um erro inesperado. Tente novamente.');
}
});
});
} else {
console.warn('Nenhum formulário de adicionar ao carrinho encontrado.');
}
});
// Outra função que pode estar causando problema
function funcaoQueFalha() {
// debugger; // Ponto de parada aqui
let a = 10;
let b = undefined;
// let c = a * b; // Isso causaria um erro NaN
// console.log('Resultado da falha:', c);
}
// Chamar a função (ex: por um evento, ou para teste)
// funcaoQueFalha();


Passos para Depuração:
1.  Abra o DevTools e vá para a aba Console.
2.  Recarregue a página: Observe os logs. Você verá "Nenhum formulário de adicionar ao carrinho encontrado."? Isso indica que seu seletor form[action="/cart/add"] pode estar errado ou o script está carregando antes do HTML.
3.  Interaja com o botão "Adicionar ao Carrinho":

  Se você vir "Formulário de adicionar ao carrinho enviado. Iniciando requisição AJAX.", o script está ouvindo.
  Se vir "Dados do formulário para envio:", verifique se id e quantity estão corretos.
  Se não houver mensagem, o problema pode ser no addEventListener ou no querySelectorAll.

4.  Aba Network: Se a requisição POST /cart/add.js não aparecer, o JavaScript não está disparando a requisição. Se aparecer, clique nela, vá para a aba "Response" para ver a resposta do servidor.
5.  Aba Sources:

  Vá para assets/custom-cart.js.
  Defina um breakpoint na linha console.log('Dados do formulário para envio:', data);.
  Clique no botão "Adicionar ao Carrinho" na loja. A execução do código vai pausar no breakpoint.
  No painel à direita, em "Scope", você pode inspecionar o objeto data. Verifique se data.id e data.quantity têm os valores esperados.
  Use os botões Step over para avançar linha a linha e observar as mudanças nas variáveis e o fluxo.
  Se você tivesse debugger; na funcaoQueFalha(), o DevTools pausaria lá automaticamente.

Screenshot Simulado:

[Imagine um screenshot do Chrome DevTools, com o painel Sources. O arquivo 'custom-cart.js' estaria aberto. Haveria um breakpoint em uma linha dentro do 'submit' event listener. À direita, o painel 'Scope' mostraria variáveis como 'data', 'response', etc., com seus valores atuais no momento da pausa.]


Exemplo 3: Depurando Liquid com | json
Problema: As variantes do produto não estão sendo exibidas corretamente na página do produto.
Cenário: Você espera um array de variantes, mas nada aparece.
Código (sections/main-product.liquid):


Variantes Disponíveis:
{% comment %}
Adicionando o debug aqui para ver o objeto product
{% endcomment %}
{{ product | json }}


{% if product.variants.size > 0 %}

{% for variant in product.variants %}

{{ variant.title }} - {{ variant.price | money }}

{% endfor %}

{% else %}
Nenhuma variante encontrada para este produto.

{% endif %}


Passos para Depuração:
1.  Edite o Tema: Vá em "Loja Online" -> "Temas" -> "Ações" -> "Editar código" para seu tema.
2.  Localize o Arquivo: Abra sections/main-product.liquid (ou o arquivo relevante da página do produto).
3.  Adicione {{ product | json }}: Cole o bloco 

{{ product | json }}
 como no exemplo acima.
4.  Visualize a Loja: Vá para a página de um produto na sua loja.
5.  Analise o JSON: Na página, você verá uma grande estrutura JSON. Procure pela chave "variants".

  Se "variants" for um array vazio []: O problema é na configuração do produto no Shopify Admin – ele realmente não tem variantes.
  Se "variants" for um array com objetos: O Liquid está recebendo as variantes. O problema pode estar no seu loop {% for variant in product.variants %} ou na forma como você acessa variant.title ou variant.price. Verifique a sintaxe.
  Se product for null ou o JSON não aparecer: O objeto product não está sendo passado corretamente para o template/section. Isso pode acontecer se você estiver tentando acessar product em um contexto onde ele não está disponível (ex: em um snippet que não recebeu o product como parâmetro).

Screenshot Simulado:

[Imagine um screenshot de uma página de produto no Shopify, com um bloco de texto 
 exibindo a representação JSON do objeto 'product'. O usuário estaria rolando para encontrar a chave 'variants' e verificar seu conteúdo.]



🎯 Exercícios e Desafios
Hora de praticar, meu caro desenvolvedor! 💪
1.  Erro de CSS:

  No seu tema de desenvolvimento, crie um novo snippet test-css-bug.liquid e inclua-o em sections/header.liquid.
  Dentro desse snippet, crie um 

.
  No seu assets/theme.css (ou similar), adicione:

css

.bug-box {
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
border-radius: 5px;
}
/ Intencionalmente cause um problema /
div {
background-color: blue !important; / Isso vai sobrescrever /
}



  Desafio: Use o painel Elements para identificar por que a caixa não está vermelha e corrija o CSS para que ela seja vermelha.

2.  Erro de JavaScript:

  Crie um novo snippet test-js-bug.liquid e adicione um Clique para erro. Inclua este snippet em sections/footer.liquid.
  No seu assets/theme.js, adicione:

javascript

document.getElementById('buggyButton').addEventListener('click', () => {
let numero = "dez";
let resultado = numero * 2; // Isso resultará em NaN
console.log("Resultado da operação:", resultado);
// Tente acessar uma propriedade de um objeto inexistente
let obj = null;
// console.log(obj.propriedade); // Descomente para causar um erro fatal
});



  Desafio: Clique no botão. Use o painel Console para ver o NaN. Use um breakpoint e o painel Sources para pausar a execução e inspecionar a variável numero antes da multiplicação. Tente comentar a linha console.log(obj.propriedade); e use um try-catch para lidar com esse erro de forma mais elegante.

3.  Erro de Liquid:

  Vá para a página de uma coleção na sua loja.
  Edite templates/collection.liquid ou a section correspondente (ex: sections/main-collection.liquid).
  Adicione o seguinte Liquid para tentar exibir o título de cada produto, mas com um erro:


{% comment %} Simulação de erro Liquid {% endcomment %}
{% for prod in collection.products %}
{{ prod.titulo_errado }}

{% endfor %}
{% comment %} Adicione um debug para o objeto collection {% endcomment %}
{{ collection | json }}




  Desafio: Use {{ collection | json }} para inspecionar o objeto collection e os products dentro dele. Descubra qual é a propriedade correta para o título do produto (dica: title) e corrija o código.

📝 Resumo da Aula
Nesta aula, desvendamos o mundo do debugging e da resolução de problemas técnicos no Shopify. Cobrimos:

  A importância de uma mentalidade sistemática na depuração.
  Os tipos comuns de problemas em CSS, JavaScript, Liquid e integrações.
  O uso mestre das ferramentas de desenvolvedor do navegador (Elements, Console, Sources, Network).
  Técnicas essenciais para depurar Liquid com | json e {% comment %}.
  Métodos avançados para depurar JavaScript usando console.log, breakpoints e try-catch.
  Estratégias para isolar problemas, incluindo desativar apps e usar temas limpos.
  Boas práticas para evitar bugs e facilitar a manutenção.

Com essas habilidades em seu arsenal, você está muito mais preparado para construir e manter lojas Shopify robustas e sem falhas. A prática leva à perfeição – quanto mais você depurar, mais rápido e eficiente você se tornará!
🚀 Preparação para próxima aula
Com o debugging dominado, podemos agora focar na performance! Na próxima aula, Aula 85, mergulharemos fundo na Otimização de Performance da Loja Shopify. Vamos aprender a:

  Analisar e otimizar o tempo de carregamento da página.
  Trabalhar com compressão de imagens e assets.
  Implementar lazy loading para imagens e vídeos.
  Otimizar o carregamento de JavaScript e CSS.
  Utilizar ferramentas de auditoria de performance como Lighthouse.

Teremos um curso prático sobre como deixar sua loja voando baixo, garantindo uma experiência de usuário fantástica e melhorando seu SEO.
📚 Recursos Adicionais

  MDN Web Docs - Browser Developer Tools: https://developer.mozilla.org/en-US/docs/Tools (Excelente documentação para todas as ferramentas do navegador)
  Chrome DevTools Documentation: https://developer.chrome.com/docs/devtools/ (Detalhes específicos para o Chrome)
  Shopify Liquid Cheatsheet: https://shopify.dev/docs/api/liquid/cheat-sheet (Sempre útil para verificar objetos e filtros Liquid)
  Shopify Theme Kit CLI: https://shopify.dev/docs/themes/tools/theme-kit (Ferramenta para desenvolvimento local e sincronização de temas, essencial para um workflow de depuração eficiente).

Até a próxima, pessoal! Continuem codificando e, agora, depurando com maestria! ✨

🚀 Pronto para a próxima aula?
Continue sua jornada Shopify!
 Ver todas as aulas 

Related Posts


Aula 84 - Loja Shopify do Zero ao Avançado: Debugging e resolução de problemas técnicos
Aula 84 - Loja Shopify do Zero ao Avançado: Debugging e resolução de problemas técnicos…


Aula 53 - Loja Shopify do Zero ao Avançado: SEO técnico avançado para dominar o Google
Aula 53 - Loja Shopify do Zero ao Avançado: SEO técnico avançado para dominar o…


Aula 38 - Loja Shopify do Zero ao Avançado: Debugging e otimização de código Liquid
Aula 38 - Loja Shopify do Zero ao Avançado: Debugging e otimização de código Liquid…


Aula 28 - Loja Shopify do Zero ao Avançado: Configurando zonas de frete inteligentes e estratégicas
Aula 28 - Loja Shopify do Zero ao Avançado: Configurando zonas de frete inteligentes e…


Aula 23 - Loja Shopify do Zero ao Avançado: Menu de navegação estratégico e experiência do usuário
Aula 23 - Loja Shopify do Zero ao Avançado: Menu de Navegação Estratégico e Experiência…