{"section":"faq","requestedLocale":"pt","requestedSlug":"como-bloquear-customizacoes-para-investigar-problemas-no-front-end-da-loja","locale":"pt","slug":"como-bloquear-customizacoes-para-investigar-problemas-no-front-end-da-loja","path":"docs/pt/faq/shopping/como-bloquear-customizacoes-para-investigar-problemas-no-front-end-da-loja.md","branch":"main","content":"> ⚠️ Tutorial válido apenas para lojas CMS Portal (Legado).\n\nNeste 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.\n\nPara 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.\n\n## Como configurar o DevTools\n\nPara configurar o [Chrome DevTools](https://developer.chrome.com/docs/devtools/), siga os passos abaixo. \n\n1. Abra o [Google Chrome](https://www.google.com/intl/pt-BR/chrome/) no seu computador.\n2. Clique no botão `F12` do seu teclado ou com o botão direito do mouse em qualquer lugar da tela e selecione **Inspecionar**.\n3. Clique nos três pontos verticais na parte superior direita da página, conforme indicado na imagem abaixo.\n![Customizations1 - PT](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/faq/shopping/como-bloquear-customizacoes-para-investigar-problemas-no-front-end-da-loja_1.png)\n4. 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. \n![Customizations2 - PT](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/faq/shopping/como-bloquear-customizacoes-para-investigar-problemas-no-front-end-da-loja_2.png)\n5. A aba **Bloqueios de solicitação de rede** abrirá em seguida como mostra a imagem abaixo:\n![Customizations3 - PT](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/faq/shopping/como-bloquear-customizacoes-para-investigar-problemas-no-front-end-da-loja_3.png)\n6. 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:\n\n * `*/arquivos/*.js`\n * `*/files/*js`\n * `*/arquivos/*.css`\n * `*/files/*.css`\n * `*gtm.js*`\n\n![Customizations4 - PT](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/faq/shopping/como-bloquear-customizacoes-para-investigar-problemas-no-front-end-da-loja_4.png)\n
    \n
  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. \n
  2. Agora atualize a página. Ela será exibida sem os componentes customizados.
    3. \n
\n\nPara voltar a visualizar as customizações, desmarque oa opção **Ativar bloqueio de solicitação de rede** e atualize a página novamente.\n\nVerifique 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.\n\nSe mesmo com as customizações bloqueadas o comportamento indesejado permanecer, abra um chamado para o suporte da VTEX detalhando o que está acontecendo."}