Como desativar CSS no navegador para fins de teste

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?

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.

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.

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"

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

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.

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.

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.

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.

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 .

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

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

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).

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í.

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 .

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

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