Menu
Feedback
Comece aqui
Tutoriais
Portal do desenvolvedor

Problemas conhecidos
Diretivas de suporte
Troubleshooting

Perguntas frequentes
Comunicados
Perguntas frequentes
Como bloquear customizações para investigar problemas no front-end da loja
Como bloquear customizações para investigar problemas no front-end da loja
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.

  1. Abra o Google Chrome no seu computador.
  2. Clique no botão F12 do seu teclado ou com o botão direito do mouse em qualquer lugar da tela e selecione Inspecionar.
  3. 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://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/faq/Shopping/como-bloquear-customizacoes-para-investigar-problemas-no-front-end-da-loja_1.png"}}
  4. 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://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/faq/Shopping/como-bloquear-customizacoes-para-investigar-problemas-no-front-end-da-loja_2.png"}}
  5. 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://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/faq/Shopping/como-bloquear-customizacoes-para-investigar-problemas-no-front-end-da-loja_3.png"}}
  6. 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://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/pt/faq/Shopping/como-bloquear-customizacoes-para-investigar-problemas-no-front-end-da-loja_4.png"}}

  1. 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.
  2. 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.

Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Contribuidores
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Nesta página
Ainda tem dúvidas?
Pergunte à comunidade
Encontre soluções e compartilhe ideias na comunidade VTEX.
Junte-se à nossa comunidade
Solicite suporte à VTEX
Para assistência personalizada, entre em contato com nossos especialistas.
Abra um ticket de suporte
GithubDeveloper portalComunidadeFeedback