Como bloquear customizações para investigar problemas no front-end da loja

Perguntas frequentes

Publicado em 20/04/2020

•

Última atualização em 12/04/2023

Tutorial válido apenas para lojas CMS Portal Legado.

Neste artigo, você vai aprender como verificar a origem de um problema front-end. O primeiro passo é bloquear as customizações de front-end. A partir da resposta do site, será possível entender se o problema está na informação que a VTEX entrega de forma nativa ou na customização da sua página.

Para fazer isso, vamos ensinar como retirar as customizações por meio de uma ferramenta nativa do próprio Chrome, o DevTools. Existe também a opção de usar apps e extensões do Chrome que retiram as customizações, porém a solução nativa tende a ser mais segura e eficiente.

Como configurar o DevTools

Para configurar o Chrome DevTools, siga os passos abaixo.

Abra o Google Chrome no seu computador.
Clique no botão F12 do seu teclado ou com o botão direito do mouse em qualquer lugar da tela e selecione Inspecionar.
Clique nos três pontos verticais na parte superior direita da página, conforme indicado na imagem abaixo.
${"base64":" ","img":{"width":2076,"height":798,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":266178,"url":"https://images.ctfassets.net/alneenqid6w5/3fMKFRgHKwCa8dlwcMbnDk/cb8f01010eb287fcc5b63f2b9956a2ad/Captura_de_Tela_2022-09-20_a__s_14.51.15.png"}}$
Selecione Mais ferramentas e, em seguida, Bloqueios de solicitação de rede para bloquear todas as customizações feitas via CSS, JavaScript e Google Tag Manager.
${"base64":" ","img":{"width":1092,"height":684,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":161818,"url":"https://images.ctfassets.net/alneenqid6w5/7wjDCIMx0j0VMLFBlJs4x3/cee054457174fb6309d84826753d7411/Captura_de_Tela_2022-09-20_a__s_14.59.20.png"}}$
A aba Bloqueios de solicitação de rede abrirá em seguida como mostra a imagem abaixo:
${"base64":" ","img":{"width":2078,"height":1394,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":361783,"url":"https://images.ctfassets.net/alneenqid6w5/1oi04fyBlkMVmio4LtMVcv/8eaa7683eaccc0f4af13088a328c022b/Captura_de_Tela_2022-09-20_a__s_15.00.47.png"}}$
Clique em Adicionar padrão para definir o primeiro recursos será bloqueado. Para adicionar mais recursos, clique em + e, depois de defini-lo, clique em Adicionar. Essa configuração precisa ser feita apenas uma vez no seu navegador. Inclua os itens abaixo:

*/arquivos/*.js
*/files/*js
*/arquivos/*.css
*/files/*.css
*gtm.js*

${"base64":" ","img":{"width":2080,"height":652,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":89661,"url":"https://images.ctfassets.net/alneenqid6w5/49opNOaTq3t2xJ2HpAnuo1/021f16c927cedf17ec8c8410b447c026/Captura_de_Tela_2022-09-20_a__s_15.14.39.png"}}$

Marque a opção Ativar bloqueio de solicitação de rede e habilite todos os checkboxes abaixo. Essa será a configuração que ficará definida por padrão, com todas as opções habilitadas para bloqueio.
Agora atualize a página. Ela será exibida sem os componentes customizados.

Para voltar a visualizar as customizações, desmarque oa opção Ativar bloqueio de solicitação de rede e atualize a página novamente.

Verifique se o comportamento indesejado que você observou originalmente acontece apenas com a customização ativada. Se for o caso, entre em contato com o time responsável pelo seu front-end para que eles verifiquem o que está ocorrendo.

Se mesmo com as customizações bloqueadas o comportamento indesejado permanecer, abra um chamado para o suporte da VTEX detalhando o que está acontecendo.