Identificar erros de layout ocasionados por arquivos JavaScript

1 min de leitura

Tutorial válido apenas para lojas CMS Portal Legado.

Uma maneira de identificar se um erro apresentado no layout é ocasionado por um controle padrão da VTEX ou por um arquivo Javascript personalizado na loja é utilizar o /tools.html.

Para isso faça os seguintes passos :

Para desabilitar o JS da página basta colocar o /tools.html no fim da URL. Ex: {AccountName}.myvtex.com/tools.html
Clique em Disable na aba Client JavaScript is.

${"base64":" ","img":{"width":464,"height":435,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":20444,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/layout/como-identificar-erros-de-layout-ocasionados-por-arquivos-javascript_1.png"}}$

Após isso, retire o /tools.html da URL e atualize a página.

Se o erro que estava sendo apresentado é ocasionado por um Javascript externo, o mesmo não irá aparecer mais. Com isso é necessário ajustar esse arquivo.

Sobre arquivos JavaScript inseridos na página é importante seguir algumas premissas:

Utilizar JavaScript externo, e não online.
Verificar se o mesmo não irá interferir na performance da loja.

Lembrando que temos também o Vtex Speed ferramenta que possibilita o desenvolvimento local com um tempo de cache menor. Vtex Speed - Download e Execução

Para investigar possíveis problemas envolvendo CSS recomendamos o uso do plugin WebDeveloper - veja aqui algumas ferramentas para melhorar a debugar problemas de customização.