Depuração e erros

Depurar código e compreender onde e como visualizar erros é uma parte importante do desenvolvimento no HubSpot CMS. Existem várias ferramentas que você pode usar para aumentar a eficiência na construção e depuração e para garantir que o seu site seja otimizado à medida que você continua a construí-lo. 

O sistema de arquivos do desenvolvedor do HubSpot CMS tem muitas formas de validação para garantir que seus modelos e módulos sejam renderizados corretamente nas páginas. 

Os erros fatais são erros que impedem uma página de ser renderizada com sucesso. Para garantir que o conteúdo dinâmico seja renderizado corretamente, o HubSpot CMS evita a publicação de modelos que tenham erros fatais. Um exemplo de um erro fatal seria a falta de variáveis obrigatórias do HubL, tais como standard_header_includes. Isso causará erros ao desenvolver no Gerenciador de design ou ao fazer upload de arquivos por meio da CLI do CMS. A Extensão do VS Code suporta linting do HubL e pode exibir os erros fatais em contexto antes de fazer upload do arquivo.

Os erros fatais devem ser resolvidos para que os arquivos sejam publicados. 

Os avisos são erros ou problemas que não impedem a publicação de arquivos. Os avisos são muitas vezes sugestões de sintaxe ou problemas em potencial que um desenvolvedor deixou passar. A Extensão do VS Code suporta linting do HubL e pode exibir os avisos em contexto antes de fazer upload do arquivo. Por exemplo, se você tentar incluir um arquivo que não existe, isso gera um aviso para alertar o desenvolvedor.

Os avisos nunca impedirão a publicação de arquivos, no entanto, é recomendável investigá-los. 

Você pode ativar o modo de depuração em uma página ativa carregando a página com uma sequência de consulta ?hsDebug=true na URL.

Ao carregar uma página ativa com esta string de consulta, a página será renderizada:

• com arquivos não minificados.
• com arquivos CSS não combinados (arquivos CSS individuais entregues).
• sem colocar os arquivos em cache.

Além disso, quando você carrega uma página com ?hsDebug=true, as informações de depuração serão adicionadas à parte inferior do código-fonte da página, incluindo:

• Se a página pode ser pré-renderizada e os motivos pelos quais ela não pode ser pré-renderizada.
• Um detalhamento do tempo de solicitação de renderização, que pode ser útil para saber quais componentes da página levam mais tempo para renderizar. Esse detalhamento também será adicionado à guia Tempo no console do desenvolvedor do navegador nas solicitações Doc.

• Erros e avisos, como limites de função HubL ou arquivos ausentes.

• No editor de página, adicione o seguinte parâmetro à URL e pressione Enter: ?developerMode=true
• Com a página recarregada, agora você estará no modo de desenvolvedor. Você pode sair do modo de desenvolvedor a qualquer momento clicando em Sair do modo de desenvolvedor no canto superior direito.

No modo de desenvolvedor, você pode navegar para o código de um módulo específico clicando no módulo associado e em Abrir no gerenciador de design no editor da barra lateral.

Você também pode redefinir quaisquer alterações não publicadas para o conteúdo padrão do modelo:

• Clique na guia Conteúdo.
• À direita do nome do modelo, clique em Redefinir conteúdo.

• Na caixa de diálogo, clique em Sim, redefinir.

Dentro do Gerenciador de design, os arquivos codificados têm a opção "Mostrar saída", que abre um segundo painel de editor de código com o código transposto do arquivo que está sendo exibido. Isso é útil para ver como seu código HubL será transposto para CSS, HTML ou JavaScript, em vez de recarregar as páginas nas quais o arquivo está incluído. Também é uma ferramenta útil ao explorar novas funcionalidades do HubL, ou aprender conceitos básicos sobre o HubL, pois você pode ver facilmente o que a sua entrada do HubL irá gerar. 

O filtro |pprint do HubL pode ser usado em variáveis do HubL para imprimir informações valiosas de depuração. Ele imprimirá o tipo de variável do HubL, que pode ser útil para entender com que expressões, filtros, operadores ou funções ela pode ser usada.

Por exemplo, {{ local_dt }} imprimirá 2020-02-21 12:52:20. Se imprimirmos esta variável, poderemos ver que o valor é uma data (PyishDate: 2020-02-21 12:52:20). Isso significa que podemos usar filtros do HubL que operam ou formatam objetos de data, tais como o filtro |datetimeformat do HubL.

A informação do desenvolvedor de uma página é o contexto de todos os dados disponíveis quando uma página está sendo renderizada. Este contexto de renderização pode ser acessado por meio do HubL. Para acessar as informações do desenvolvedor de uma página, selecione o ícone da roda dentada da HubSpot no canto superior direito das páginas > Informações do desenvolvedor. 

Isso abrirá uma nova aba que retorna o contexto de renderização para uma determinada página na forma de JSON. É recomendado ter um formatador JSON instalado no seu navegador para facilitar a leitura das informações do desenvolvedor, como esta extensão de formatador JSON para Chrome. Embora grande parte da informação contida no contexto da página seja para fins internos, esta ferramenta pode ser valiosa para ver quais dados são disponibilizados por HubL ao criar modelos.

Por exemplo, a imagem a seguir mostra a informação do desenvolvedor para https://desigers.hubspot.com/docs/developer-reference/cdn.

Os valores desses dados são definidos pela guia Configurações do editor de conteúdo:

Os valores são então disponibilizados para renderização nas páginas por meio do HubL. Para imprimir o título e a metadescrição em um modelo básico, você usa o HubL a seguir.

Os dados no contexto de renderização são disponibilizados por meio do HubL, e a árvore JSON pode ser analisada utilizando notação de pontos. Os dados nas informações do desenvolvedor que os desenvolvedores frequentemente imprimem incluem valores de campos de módulos e tags que foram exportados para o contexto do modelo.

É importante verificar se os visitantes do seu site não estão sendo direcionados para links quebrados. Há duas ferramentas que você pode usar para ajudar a garantir que os visitantes do seu site cheguem ao lugar certo. Você pode usar a API de desempenho de sites para obter os status HTTP, como erros 404, e ver o tempo de atividade dos sites.

Se você receber erros 404, talvez seja bom redirecionar o visitante para uma URL relevante.

Você também pode usar a ferramenta Recomendações de SEO para identificar links quebrados dentro do conteúdo da sua página e corrigi-los rapidamente.

Há muitos fatores que influenciam a optimização e o teste da velocidade do site. Para ver ferramentas e dicas para otimizar a velocidade do seu site, consulte nosso guia.