Existe alguma maneira de exibir uma página da web sem estilos no Chrome?

25

No Firefox, Exibir -> Estilo da página -> Sem estilo permite exibir uma página não estilizada. Útil para alguns sites excessivamente dependentes de JS / folha de estilo (por exemplo: Lifehacker).

Existe alguma funcionalidade semelhante no Chrome do Google e / ou onde eu acessaria isso?

Versão 19.0.1084.56 / Ubuntu.

google-chrome css dredmorbius
fonte
A melhor solução para isso no Chrome é usar o Firefox.
wha7ever - Restabelece Monica

Respostas:

25

Desativar todas as folhas de estilo CSS

Dado que a maioria das páginas modernas define todos os estilos nos arquivos CSS externos incluídos no <head>, a remoção da headmarca removerá efetivamente todos os estilos (exceto os estilos embutidos explícitos e os definidos pelos scripts). Clique com o botão direito do mouse em uma página, escolha Inspecionar no menu de contexto e cole-o na guia Console:

document.head.parentNode.removeChild(document.head);

E aqui está a versão do bookmarklet do código acima, que pode ser colada como o URL de um favorito (alterne a barra de favoritos no Chrome com ⌘+ shift+ bno Mac ou ctrl+ shift+ bno Linux / Windows) :

javascript:(function(){document.head.parentNode.removeChild(document.head);})()

Você também pode digitar o código acima diretamente na barra de endereços, mas leia a nota no final da resposta antes de fazer isso. .

A remoção do <head>também pode ser feita na guia Elementos do devtools , clicando com o botão direito do mouse na tag head e excluindo-a através do menu de contexto:

excluir a tag head no Chrome

NOTA: A remoção da tag head é uma abordagem de força bruta, pois mata todos os estilos, javascript, fontes da web etc., e se o conteúdo da página for renderizado por javascript, é provável que você obtenha uma página vazia. Na maioria dos sites, provavelmente ele fornecerá os resultados esperados.

Um caso de uso mais frequente é remover itens irritantes específicos de uma página, como cores, margens, iframes etc. Nesse caso, um dos seguintes bookmarklets fornecerá um controle mais granular.

Remova cores, planos de fundo, margens, preenchimentos, larguras

Crie um marcador e adicione o seguinte snippet como o URL:

javascript:(function(){for(i=0;i<document.styleSheets.length;i++){document.styleSheets.item(i).disabled=true;}all=document.getElementsByTagName('*');for(i=0;i<all.length;i++){el=all[i];el.style.cssText='';el.style.width='';el.style.padding='0px';el.style.margin='2px';el.style.backgroundImage='none';el.style.backgroundColor='#fff';el.style.color='#000';}})()

Agora você pode clicar no seu bookmarklet para limpar o estilo CSS na página atual para algo mais legível.

Nota: Na verdade, é possível que uma página tenha um <style>bloco dentro da <body>tag - o padrão HTML5 permite que isso e a maioria dos navegadores sejam compatíveis. Até o momento, isso não é uma prática comum, mas, à medida que as estruturas da Web evoluem, podemos ver mais 'folhas de estilos locais' na futura Web.

Se você simplesmente deseja melhorar a legibilidade, desabilitar todo o CSS pode não fornecer a melhor experiência. Nesses casos, os bookmarklets abaixo podem fornecer melhores resultados:

Remover cabeçalhos / rodapés sem rolagem (aumenta a área de leitura)

javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()

Remova iframes (mata a maioria dos banners, etc.)

javascript:var frames %3D document.getElementsByTagName%28"iframe"%29%3Bfor %28%3Bframes.length%3B%29 %7Bframes%5Bframes.length-1%5D.parentNode.removeChild%28frames%5Bframes.length-1%5D%29%3B%7Dvoid%280%29

Isso também matará a maioria dos vídeos incorporados, widgets de comentários etc.

Remover todas as imagens (navegação no modo escritório)

javascript:(function(){function toArray(c){var a,k;a=new Array;for(k=0;k<c.length;++k)a[k]=c[k];return a;}var images,img,altText;images=toArray(document.images);for(var i=0;i<images.length;++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,img)}var alle=document.getElementsByTagName("*");for(var i=0,max=alle.length;i<max;i++){alle[i].style.backgroundImage='none';}})();

Nota: este precisa ser usado em combinação com Remover iframes acima, pois a maioria das imagens de banner geralmente está dentro de iframes e este bookmarklet funciona apenas com o documento de nível superior.

Os bookmarklets também podem ser usados ​​para sites que não exibem conteúdo quando são usados ​​bloqueadores de anúncios.

Você pode usar o Bookmarklet Builder para desinstalar o código (o botão Formatar ), editá-lo para atender às suas necessidades e reduzi-lo novamente (o botão Compactar ) para algo que você possa colar como o URL do marcador.

Os bookmarklets listados acima também funcionarão na maioria dos navegadores da web móveis para iOS e Android. Os navegadores móveis não executam javascript na barra de endereços, mas você pode adicionar um marcador, colar o código js como URL, definir um rótulo, por exemplo clean, e depois executá-lo tocando no item no menu de marcadores (para IOS Safari) ou digitando cleanna barra de endereço e tocando no marcador correspondente no menu suspenso de sugestão automática. Isso pode melhorar a legibilidade de páginas que não têm modo de leitura .

NOTA: Se você copiar e colar os bookmarklets acima diretamente na barra de endereços, notará que os navegadores removem ojavascript: prefixo - esse é um recurso de segurança do navegador; portanto, se você quiser testar os bookmarklets diretamente da barra de endereços, poderá precisa anexar javascript:manualmente antes do código js.

Extensões do Chrome

Se você está procurando uma extensão do Chrome, existe o uMatrix, no qual você pode clicar na coluna CSS para desativar todos os estilos e CSS, e o Web Developer, na guia CSS, na opção Desativar todos os estilos .

ccpizza
fonte
O uMatrix (que eu descobri de forma independente nos anos seguintes) de fato faz o truque, site por site (ou página ou domínio). Desenvolvedor Web (mencionado abaixo) é muito zeloso.
Dredmorbius
7

Você pode usar a extensão Web Developer para isso:

insira a descrição da imagem aqui

Der Hochstapler
fonte
2
Obrigado. Isso parece fazer o truque. Embora Lifehacker ainda seja ilegível. Funciona em w3m embora. Velha escola é como nós rolamos aqui.
Dredmorbius
Hrm. O problema é que esta é uma configuração global para todos os sites / páginas. Acabei de passar alguns momentos de "WTF !!!" de repente, comecei a ver os elementos de estilo aparecerem / desaparecerem de várias páginas enquanto alternava várias configurações de desenvolvedor da Web. Portanto, é um pouco, mas não totalmente, útil.
Dredmorbius
@ Dr.EdwardMorbius: Estranho. Para mim, isso é apenas temporário. Até a atualização da página reverte para a visualização padrão do site. Mas suponho que também não é o que você quer, é?
Der Hochstapler
Sim. Desativar a folha de estilo para a sessão atual seria suficiente. A alternância de CSS, JS, cookies etc. para todos os sites está correta. Infelizmente isso parece ser o que estava acontecendo. Eu descreveria a experiência como "levemente irritante".
Dredmorbius
2

Não existe uma versão do Chrome de No Style (ainda?), Então você precisa usar outro método , como algumas das outras extensões que podem desativar os estilos.

Você pode usar a extensão Desativar folhas de estilo para desativar folhas de estilo em geral ou a extensão Web Developer para ativar ou desativar todos os estilos. Pendule também é uma extensão popular para esse fim.

Você também pode desativar os estilos com as Ferramentas do desenvolvedor [1] [2] :

Ícone de engrenagem -> guia CSS -> desativar todos os estilos

Synetech
fonte
Isso parece desabilitar todas as folhas de estilo para todas as páginas, sem capacidade de habilitá-las / desabilitá-las em uma determinada página. Não é o que estou procurando.
Dredmorbius
Qual? Existem quatro opções.
Synetech
Não vejo um ícone de extensão. Excluiu.
Dredmorbius
Hein?
Synetech
Não havia ícone para a extensão "Desativar folhas de estilo" na área de notificação à direita da janela do URL. A única maneira de gerenciar as configurações era navegar por Wrench -> Ferramentas -> Extensões -> Desativar folhas de estilo -> Opções. Não ... muito ergodinâmico.
Dredmorbius
1

Se você estiver fazendo isso por motivos de velocidade, posso sugerir uma alternativa: Links 2

Quando o navegador abrir, pressione ge digite o URL para o qual deseja ir. Este navegador é leve nos padrões que suporta, mas incrivelmente rápido, mesmo em um PC muito antigo.

Gerry
fonte
11
É mais uma privacidade / mantém o uso de JS no mínimo. Eu tendem a preferir o w3m sobre a família de navegadores de console de links / elinks - melhor ergonomia e estou bastante acostumado a isso. Sim, estou realmente familiarizado com o quão rápido e leve os navegadores de console podem ser. Alguns sites são simplesmente quebrados.
Dredmorbius
11
Peguei vocês. Na verdade, eu não uso a versão do console, mas o gui, pois é tão rápido. Mas sim, você está certo, às vezes as páginas estão muito quebradas. Seria ótimo se todas as páginas fossem degradadas normalmente.
Gerry
2
Eu sou conhecido por recorrer ao lince, alguns sed e 'fmt' em casos extremos. Isso faz o bebê Jesus chorar.
Dredmorbius
1

No Firefox, Exibir -> Estilo da página -> Sem estilo permite exibir uma página não estilizada. Útil para alguns sites excessivamente dependentes de JS / folha de estilo (por exemplo: Lifehacker). Existe alguma funcionalidade semelhante no Chrome do Google e / ou onde eu acessaria isso? Versão 19.0.1084.56 / Ubuntu. - Dr. Edward Morbius

...

Sim. Desativar a folha de estilo para a sessão atual seria suficiente. A alternância de CSS, JS, cookies etc. para todos os sites está correta. Infelizmente isso parece ser o que estava acontecendo. Eu descreveria a experiência como "levemente irritante". - Dr. Edward Morbius

Usando a biblioteca jQuery, em console(Chromium / Chrome, Firefox, Opera) deve limpar os estilos de autor de um documento HTML:

(function clearStyle(){
c='';$('link[rel=stylesheet]').attr('href',c);
$('style').html(c);$('*').attr('style',c);})()

https://github.com/guest271314/toggleStyles/blob/master/clearStyle.min.js

Para ativar ou desativar os estilos em um documento HTML, isso pode ser útil:

https://github.com/guest271314/toggleStyles/blob/master/toggleStyles.js

Carrega o jQuery no documento, a partir do arquivo local ou da CDN do jQuery, registra êxito, registra o status do estilo, ativa ou desativa os estilos de autor pressionando a tecla de barra de espaço ou no console.

Testado no Chromium / Chrome, Firefox e Opera para documentos HTML locais e online.

guest271314
fonte
1

Minha ferramenta atualmente preferida para isso é a extensão do navegador uMatrix , que permite controles ainda mais refinados: desabilite CSS, JS, imagens ou outros recursos, carregando o domínio em relação ao site atual. As alterações podem ser facilmente alternadas, tornadas permanentes ou convertidas como regras padrão.

Este e o Stylish atendem à maioria das minhas necessidades de personalização como leitor. O modo Reader (Firefox) tende a fornecer conteúdo com estilo uniforme com bastante confiabilidade.

Estendendo a pergunta: no Chrome / Android, não tenho uma opção viável, e as soluções sugeridas acima não funcionam.

dredmorbius
fonte
0

apenas um código jquery de linha ... use 

jQuery("head").empty();

ou em javascripts você pode usar 

document.getElementsByTagName("head")[0].innerText="";

vá para sua página da web e pressione ctrl + shift + i, você verá um menu, selecione console, cole esse document.getElementsByTagName("head")[0].innerText="";código e pressione enter

Vishal choudhary
fonte
2
Onde essas informações seriam inseridas?
Music2myear 01/11/19
Ir à sua página e, em seguida, pressione Ctrl + shift + i você vai ver um seleto consola menu e cole este document.getElementsByTagName("head")[0].innerText="";código e, em seguida, pressione enter
Vishal choudhary
Não deve ser necessário ler comentários para entender uma resposta. Por favor, use o botão EDITAR para adicionar essas informações à própria resposta.
Music2myear 01/11/19