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?
<head>
tag, clique com o botão direito e selecione Excluir elemento .Respostas:
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
.fonte
No Chrome / Chromium, você pode fazer isso no console do desenvolvedor.
fonte
Firefox (Win e Mac)
Se a Web Dev Toolbar estiver instalada, as pessoas podem usar estes atalhos de teclado: Command+ Shift+ S(Mac) e Control+ Shift+ S(Win)
fonte
Este script funciona para mim (ponta do chapéu para scrappedcola)
o estilo embutido permanece intacto, embora
fonte
$('style,link[rel="stylesheet"]').remove()
consegue o mesmo, se tiver jQuery. De twitter.com/janlelis/status/433250838757126146 .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:
getElementsByTagName('*')
e teria que verificar e agir em cada um individualmente.$('style,link[rel="stylesheet"]').remove()
quando o javascript extra não fosse extremamente pesado.fonte
document.querySelectorAll('*[style]').forEach((e)=>e.removeAttribute('style'));
itera apenas por meio de elementos comstyle
atributos existentes .Instale o Adblock Plus e, em seguida, adicione a
*.css
regra 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.Este método faz exatamente o que você pediu.
fonte
Outra maneira de obter a solução de @David Baucum em menos etapas:
Pode ser mais prático em alguns casos.
fonte
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:
CTRL + SHIFT + I
)fonte
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
head
elemento: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:
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:
fonte
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.
Ou
Explicações
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.Array.prototype.forEach.call(linkElements
percorre os elementos do linkelement.remove()
remove o elemento do DOMResultando em página HTML simples
fonte
document.querySelectorAll("style").forEach((e)=>(e.remove()))
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
fonte
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).
fonte
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í.
fonte
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 .
fonte
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
fonte
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
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
// no console
fonte