O Responsive Device Switcher ou Add CSS/JS não funciona
Como reconhecer o erro
Se quiseres exibir e editar o teu website de forma responsiva ou queres adicionar CSS/JavaScript na tua variante, mas o teu website não carrega e exibe um erro, então isso é devido às restrições de framing.
Como corrigir o erro
Solução 1: Utilizando a extensão Varify.io® para Chrome
Para que ainda possas criar as tuas variantes, tens a opção de contornar esta restrição de framing com a extensão Varify.io® para Chrome.
- Baixe a Extensão Varify® para Chrome
- Ative-a no seu navegador e armazene o seu snippet de código Varify®
- Ative o interruptor "Allow Responsive Device Switcher"
- Recarregue a página - Pronto!
Agora tudo deve funcionar como esperado.
Uma explicação mais detalhada sobre a instalação e ativação, bem como outras funções, pode ser encontrada aqui: Extensão Varify® para navegador Chrome
Solução 2: Personalizar as opções X-Frame no seu próprio site
Se você vir uma mensagem de erro como na captura de tela acima, uma restrição de framing não está permitindo que a página seja carregada no seletor de dispositivos responsivo.
A visualização normal de desktop do editor visual não é afetada por restrições de framing.
Se a sua página é entregue com o cabeçalho de resposta X-Frame-Options com o valor "deny", a edição responsiva não pode ser usada.
Uma solução sensata nesse caso seria relaxar a restrição para X-Frame-Options: "sameorigin".
X-Frame-Options: "sameorigin" permite que suas páginas sejam incorporadas em um frame a partir do seu domínio, mas não permite que sejam incorporadas a partir de outros sites.