Identifying layout errors caused by JavaScript files

1 min read

Tutorial valid only for Legacy CMS Stores.

A way to identify whether an error appearing in the layout is caused by a VTEX standard control or by a Javascript file customized in the store is to use /tools.html.

To do so, follow the steps below:

To disable the JS of the page, just add /tools.html at the end of the URL. E.g.: {AccountName}.myvtex.com/tools.html
Click on Disable in the Client JavaScript is tab.

${"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/en/tutorials/storefront/layout/how-to-identify-layout-errors-caused-by-javascript-files_1.png"}}$

Next, remove /tools.html from the URL and update the page.

If the error displayed was caused by an external JavaScript file, it will no longer appear. Thus, this file needs be adjusted.

Regarding JS files inserted in the page, it is important to follow certain assumptions:

To use an external JS rather than online JavaScript.
To check whether it will interfere in the performance of the store.

Remember that we also have the VTEX Speed tool that enables local development with shorter cache time. Vtex Speed - Download e Execution

To investigate possible problems involving CSS, we recommend using the WebDeveloper plugin - look here some tools to improve debugging customization issues.