Como desativar CSS no navegador para fins de teste

116

Existe alguma maneira de desabilitar todos os CSS externos em um navegador (Firefox, Chrome ...)?

Ao usar uma conexão de Internet mais lenta, às vezes apenas o HTML básico é carregado pelo navegador sem as informações de CSS. Parece que a página foi colocada em bruto na tela. Você também teria notado isso com StackOverflow.

Quero ter certeza de que minha página da web será exibida corretamente, mesmo se os arquivos CSS não forem carregados.

Não quis dizer que quero converter CSS externo em embutido. Mas eu quero uma maneira de desabilitar explicitamente todo CSS do navegador para que eu possa reposicionar meus elementos de uma maneira melhor e legível.

Sei que posso remover as entradas <link rel = 'stylesheet'>, mas e se eu tiver muitas páginas vinculadas?

ATOzTOA
fonte
4
Esta é uma pergunta muito boa. Ao que parece, por exemplo, o Chrome não permite "desligar" as folhas de estilo do autor de uma forma que seja aceitável para um usuário padrão. Isso faz com que o Chrome não esteja em conformidade com o CSS 2.1, como pode ser visto no Capítulo 3.2.6 da especificação, onde é dito que "O UA deve permitir que o usuário desligue a influência das folhas de estilo do autor." O mesmo pode ser verdadeiro para outros navegadores que não permitem isso nativamente.
NicBright de
1
clique com o botão direito na página, selecione Inspecionar no menu de contexto, localize a <head>tag, clique com o botão direito e selecione Excluir elemento .
ccpizza

Respostas:

59

O plugin Web Developer para Firefox e Chrome é capaz de fazer isso

Depois de instalar o plugin, a opção está disponível no menu CSS. Por exemplo,CSS > Disable Styles > Disable All Styles

Alternativamente, com a barra de ferramentas do desenvolvedor ativada, você pode pressionar Alt+Shift+A.

JoelKuiper
fonte
10
Você pode especificar como fazer isso lá?
John Dvorak
Obrigado ... O Firebug tem esse recurso?
ATOzTOA
3
O Firebug permite que você desabilite / habilite seletivamente alguns seletores e edite ao vivo o CSS existente, portanto, de certa forma, é possível. Para o seu propósito, o plugin Web Developer parece mais apropriado, entretanto, você tem a opção de desabilitar todos os CSS ou folhas de estilo específicas, entre outras ferramentas úteis para avaliar a acessibilidade de um site para navegadores mais antigos / móveis.
JoelKuiper
7
Essa resposta não tem nenhuma informação sobre como fazer isso, que é o que a pergunta está fazendo.
NessDan
1
O Grupo Paciello tem uma barra de ferramentas semelhante que funciona no IE 9/10/11. paciellogroup.com/resources/wat
RPNinja
70

No Chrome / Chromium, você pode fazer isso no console do desenvolvedor.

  1. Abra o console do desenvolvedor por ctrl-shift-j ou Menu-> Ferramentas-> Console do desenvolvedor.
  2. No console do desenvolvedor, navegue até a guia Fontes.
  3. No canto superior esquerdo desta guia há um ícone com um triângulo de divulgação. Clique nisso.
  4. Navegue até <domínio> → css → <arquivo css que você deseja eliminar>
  5. Destaque todo o texto e clique em delete.
  6. Enxágue e repita para cada folha de estilo que deseja desativar.
David Baucum
fonte
4
Se você tem muitas fontes e deseja descobrir onde o CSS foi aninhado, comece na guia Rede e filtre as respostas para incluir apenas folhas de estilo. Em seguida, clique com o botão direito na resposta e clique em "Abrir no painel de fontes". Em seguida, Ctrl + A, Del
KyleMit
@MartinF A "pequena seta de reprodução" é chamada apropriadamente de triângulo de divulgação / widget de divulgação.
jsejcksn
Você é o deus.
Rajat Saxena
21

Firefox (Win e Mac)

  • Através da barra de ferramentas do menu, escolha: "Exibir"> "Estilo de página"> "Sem estilo"
  • Na barra de ferramentas do desenvolvedor da Web, escolha: "CSS"> "Desativar estilos"> "Todos os estilos"

Se a Web Dev Toolbar estiver instalada, as pessoas podem usar estes atalhos de teclado: Command+ Shift+ S(Mac) e Control+ Shift+ S(Win)

  • Safari (Mac): através da barra de ferramentas do menu, escolha "Desenvolver"> "Desativar estilos"
  • Opera (Win): através do menu, escolha "Página"> "Estilo"> "Modo de usuário"
  • Chrome (Win): através do ícone de engrenagem, escolha a guia "CSS"> "Desativar todos os estilos"
  • Internet Explorer 8: através da barra de ferramentas do menu, escolha "Exibir"> "Estilo"> "Sem estilo"
  • Internet Explorer 7: através do menu da barra de ferramentas do desenvolvedor do IE: Desativar> Todos os CSS
  • Internet Explorer 6: através da barra de ferramentas de acessibilidade da Web, escolha "CSS"> "Desativar CSS"
Aravind NC
fonte
4
Chrome (Win): esta opção parece não existir mais; A resposta de @David Baucum abaixo funciona.
David Cook,
17

Este script funciona para mim (ponta do chapéu para scrappedcola)

var el=document.getElementsByTagName('*');for(var i=0;i<el.length; i++){if (el[i].getAttribute("type")=="text/css") el[i].parentNode.removeChild(el[i]); };

o estilo embutido permanece intacto, embora

apurkrt
fonte
7
$('style,link[rel="stylesheet"]').remove()consegue o mesmo, se tiver jQuery. De twitter.com/janlelis/status/433250838757126146 .
TuteC de
1
Isso é incrível, basta pressionar F12 no cromo, navegar até o console, clicar em colar e entrar.
Eric Bishard
11

Expandindo a ideia de scrappedocola / renergy, você pode transformar o JavaScript em um bookmarklet que executa contra o javascript:uri para que o código possa ser reutilizado facilmente em várias páginas sem ter que abrir as ferramentas de desenvolvimento ou manter qualquer coisa na sua área de transferência.

Basta executar o seguinte snippet e arrastar o link para sua barra de favoritos / favoritos:

<a href="javascript: var el = document.querySelectorAll('style,link');
         for (var i=0; i<el.length; i++) {
           el[i].parentNode.removeChild(el[i]); 
         };">
  Remove Styles 
</a>

  • Eu evitaria percorrer os milhares de elementos em uma página com getElementsByTagName('*')e teria que verificar e agir em cada um individualmente.
  • Eu evitaria depender do jQuery existente na página $('style,link[rel="stylesheet"]').remove()quando o javascript extra não fosse extremamente pesado.
KyleMit
fonte
Essa é a maneira mais rápida de fazer isso, gosto desse método.
ling
Para limpar CSS embutido: document.querySelectorAll('*[style]').forEach((e)=>e.removeAttribute('style'));itera apenas por meio de elementos com styleatributos existentes .
Mat Gessel
10

Instale o Adblock Plus e, em seguida, adicione a *.cssregra nas opções de Filtros (guia de filtros personalizados). O método afeta apenas as folhas de estilo externas . Ele não desativa os estilos embutidos.

Desative todos os CSS externos

Este método faz exatamente o que você pediu.

yakunins
fonte
1
Esta é a única solução que ainda funciona quando você recarrega a página. Infelizmente, você não pode testá-lo com anúncios.
sinuhepop
1
@sinuhepop Você pode desativar todas as listas de filtros no ABP. Isso não funciona?
Tuupertunut
Certo! Vou tentar Obrigado
sinuhepop
4

Outra maneira de obter a solução de @David Baucum em menos etapas:

  1. Clique com o botão direito -> inspecionar elemento
  2. Clique no nome da folha de estilo que afeta o seu elemento (apenas no lado direito da declaração)
  3. Destaque todo o texto e clique em delete.

Pode ser mais prático em alguns casos.

Raphael Larrinaga
fonte
4

Como a maioria das respostas parece ser muito antiga aqui, referindo-se a itens de menu que não consigo encontrar nas versões atuais de navegadores populares, veja como fazer isso na versão atual do Firefox Developer Edition:

  • Abrir as ferramentas do desenvolvedor ( CTRL + SHIFT + I)
  • Selecione a guia Editor de Estilos
  • Lá você deve ver todas as fontes de CSS em seu documento. Você pode desativar cada um deles clicando no ícone de olho próximo a eles.

Ícone de olho branco = habilitado;  Ícone de olho cinza = desativado

Dániel Kis-Nagy
fonte
4

Para páginas que dependem de CSS externo (a maioria das páginas hoje em dia), uma solução simples e confiável é eliminar o headelemento:

document.querySelector("head").remove();

Clique com o botão direito nesta página (no Chrome / Firefox), selecione Inspecionar , cole o código no console do devtools e pressione Enter .

Uma versão de bookmarklet do mesmo código que você pode colar como o URL de um favorito:

javascript:(function(){document.querySelector("head").remove();})()

Agora, clicando no marcador em sua barra de Favoritos, a página será exibida sem nenhuma folha de estilo css.

A remoção do cabeçalho não funcionará para páginas que usam estilos embutidos.

Se você usar o Safari no MacOS, então:

  1. Abra as Preferências do Safari ( cmd+ ,) e na guia Avançado ative a caixa de seleção "Mostrar menu de desenvolvimento na barra de menus".
  2. Agora, no menu Desenvolver, você encontrará a opção Desativar estilos .
ccpizza
fonte
2

Tentei nas ferramentas de desenvolvedor do Chrome e o método é válido apenas se o CSS estiver incluído como arquivos externos e não funcionará para estilos inline.

Array.prototype.forEach.call(document.querySelectorAll('link'), (element)=>element.remove());

Ou

var linkElements = document.querySelectorAll('link');
Array.prototype.forEach.call(linkElements, (element)=>element.remove());

Explicações

  1. document.querySelectorAll('link')obtém todos os nós do link. Isso retornará uma matriz de elementos DOM. Observe que este não é um objeto Array de javascript.
  2. Array.prototype.forEach.call(linkElements percorre os elementos do link
  3. element.remove() remove o elemento do DOM

Resultando em página HTML simples

Vetrivel
fonte
Alternativamente, para estilos inline:document.querySelectorAll("style").forEach((e)=>(e.remove()))
Samy Bencherif
2

você pode bloquear qualquer solicitação (mesmo para um único arquivo css) do inspetor com o seguinte:
    Clique com o botão direito> bloquear URL de solicitação
sem desativar outros arquivos css> https://umaar.com/dev-tips/68-block-requests/ É um recurso de inspetor padrão, sem plugins ou truques necessários

Pdor
fonte
1

No Firefox, a maneira mais simples é por meio do comando de menu Exibir> Estilo de página> Sem estilo. Mas isso também desativa os efeitos de algumas marcações HTML de apresentação. Portanto, usar os plug-ins sugeridos por @JoelKuiper geralmente é melhor; eles fornecem mais flexibilidade (por exemplo, desativando apenas algumas folhas de estilo).

Jukka K. Korpela
fonte
0

Na verdade, é mais fácil do que você pensa. Em qualquer navegador, pressione F12 para abrir o console de depuração. Isso funciona para IE, Firefox e Chrome. Não tenho certeza sobre o Opera. Em seguida, comente o CSS nas janelas de elemento. É isso aí.

devXen
fonte
O Lynx também irá ignorar todos os outros estilos. Isso não é desejado aqui.
John Dvorak
0

Ao inspecionar o HTML com a ferramenta de desenvolvimento do navegador de sua preferência (por exemplo, Chrome Devtools), encontre o <head>elemento e exclua-o.

Observe que isso também removerá js, mas para mim é a maneira mais rápida de obter a página nua .

TheodorosPloumis
fonte
0

Todas as respostas sugeridas simplesmente eliminam o css para aquele carregamento de página. Dependendo do seu caso de uso, você pode desejar nem carregar o css:

Ferramentas de desenvolvimento do Chrome> Guia Rede> Clique com o botão direito na folha de estilo em questão> bloquear URL de solicitação

phillyslick
fonte
1
Também é necessário "como desligar o CSS para toda a sessão do navegador, não importa quantos sites, janelas ou guias abramos."
Dan Jacobson
0

Para aqueles que não querem nenhum plugin ou outras coisas, podemos usar o document.styleSheets para desabilitar / habilitar o css.

// código para desabilitar todos os css

for (const item in document.styleSheets) {
  document.styleSheets[item].disabled=false;
}

Se você usa o Chrome, pode criar uma função e adicionar aos seus snippets. Para que você possa usar o console para habilitar / desabilitar o css para qualquer site.

// Snippets -> DisableCSS

function disableCss(value = true){
  for (const item in document.styleSheets) {
    document.styleSheets[item].disabled=value;
  }  
}

// no console

disableCss() // by default is disable
disableCss(false) // to enable
cijo kb
fonte