Menu
Feedback
Start here
Tutorials
Developer portal

Known Issues
Support Rules
Troubleshooting

Frequently Asked Questions
Announcements
Frequently Asked Questions
Blocking customizations to troubleshoot front-end issues
Blocking customizations to troubleshoot front-end issues
Published on 4/20/2020
Last update on 4/12/2023

Tutorial valid only for Legacy CMS Stores.

In this article, you will learn how to find the origin of the problem. The first step is to block front-end customizations. Depending on the website’s response, you will be able to identify whether the problem is in the information that VTEX delivers natively or in your page customization.

To do that, we will show you how to remove the customizations using a Chrome native tool: DevTools. You can also use Chrome’s apps and extensions for removing them. However, the native solution tends to be more secure and efficient.

How to configure DevTools

  1. To open DevTools, open Chrome and click F12 or right-click anywhere on the page and select Inspect.

{"base64":"  ","img":{"width":620,"height":319,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":79545,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/faq/Shopping/blocking-customizations-to-troubleshoot-front-end-issues_1.png"}}

  1. Search for the Request Blocking function to block all customizations made via CSS, JavaScript, and Google Tag Manager. Click on the three vertical dots on the top right of the page, as indicated in the image below. Select More Tools and then Request Blocking.

{"base64":"  ","img":{"width":658,"height":392,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":120993,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/faq/Shopping/blocking-customizations-to-troubleshoot-front-end-issues_2.png"}}

  1. A box will be displayed, as in the image below:

{"base64":"  ","img":{"width":613,"height":477,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":134026,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/faq/Shopping/blocking-customizations-to-troubleshoot-front-end-issues_3.png"}}

  1. Click on the Request Blocking tab.

Now you will determine the features you want to block. This configuration must be done only once.

  1. Click on the “+” signal and include the following items one by one:
  • */arquivos/*.js
  • */files/*js
  • */arquivos/*.css
  • */files/*.css
  • *gtm.js*

The box will finally be displayed as in the image below:

{"base64":"  ","img":{"width":632,"height":506,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":124559,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/faq/Shopping/blocking-customizations-to-troubleshoot-front-end-issues_4.png"}}

Please remember that this configuration must be done only once.

How to block customizations using DevTools

  1. Select the checkbox Enable request blocking and enable all checkboxes.

  2. This configuration will be set by default, with all options for blocking enabled.

{"base64":"  ","img":{"width":608,"height":465,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":120049,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/faq/Shopping/blocking-customizations-to-troubleshoot-front-end-issues_5.png"}}

  1. Now refresh the page by clicking on F5. The page will be displayed without custom components.

{"base64":"  ","img":{"width":602,"height":307,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":72878,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/faq/Shopping/blocking-customizations-to-troubleshoot-front-end-issues_6.png"}}

  1. To view customizations again, deselect the checkbox Enable request blocking and refresh the page.

Check if the unexpected behavior you initially observed only happens when customization is enabled. If that is the case, contact the team responsible for your front-end to investigate the problem.

If the unexpected behavior persists even after blocking customizations, open a ticket to the VTEX support explaining the problems you are experiencing.

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page
Still got questions?
Ask the community
Find solutions and share ideas in the VTEX community.
Join our community
Request support from VTEX
For personalized assistance, contact our experts.
Open a support ticket
GithubDeveloper portalCommunityFeedback