Identificar errores de layout causados por archivos JavaScript

1 min de lectura

Tutorial válido solo para tiendas CMS Portal Legado.

Una manera de identificar si un error presentado en el layout es causado por un control estándar de VTEX o por un archivo Javascript personalizado en la tienda es usar el /tools.html.

Para eso, siga los siguientes pasos:

Para deshabilitar el JavaScript de la página basta colocar el /tools.html al final de la URL. Ej: {AccountName}.myvtex.com/tools.html
Haga clic en Disable en la pestaña 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/es/tutorials/storefront/layout/como-identificar-errores-de-layout-causados-por-archivos-javascript_1.png"}}$
Después retirar el /tools.html da URL y actualizar la página.

Si el error que se estaba presentando es causado por un Javascript externo, el mismo no aparecerá más. Así, será necesario ajustar ese archivo.

Sobre archivos JavaScript insertados en la página, es importante seguir algunas premisas:

Usar JavaScript externo y no inline.
Verificar si el mismo no va a interferir en el desempeño de la tienda.

Recordamos que también tenemos el VTEX Speed, herramienta que permite el desarrollo local con tiempo de cache menor. Vtex Speed - Descarga y Ejecución

Para investigar posibles problemas relacionados con CSS recomendamos el uso del plugin WebDeveloper - vea aquí algunas herramientas para mejorar el debug de problemas de personalización.