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

19

No Firefox, Visualizar - > Estilo da Página - > Nenhum estilo permite visualizar uma página não estilizada. Útil para alguns sites excessivamente dependentes de JS / folhas de estilo (por exemplo, Lifehacker).

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

Versão 19.0.1084.56 / Ubuntu.

    
por dredmorbius 10.07.2012 / 21:31

7 respostas

16

Desativar todas as folhas de estilo CSS

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

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

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

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

You can also type the code above directly into the address bar but read the note at the end of the answer before you do it..

Remover o <head> também pode ser feito a partir da aba Elementos dos ols , clicando com o botão direito do mouse na tag head e excluindo-a pelo menu de contexto:

NOTE:Removingtheheadtagisabitofabruteforceapproachsinceitwillkillallstyles,javascript,webfonts,etc,andifthepagecontentisrenderedbyjavascriptthenmostlikelyyou'llgetanemptypage.Onthemajorityofsitesitwillprobablygiveyoutheexpectedresults.

Umcasodeusomaisfrequenteéremoveritensespecíficoseirritantesdeumapágina,comocores,margens,iframes,etc.Nessecaso,umdosbookmarkletsaseguirforneceráumcontrolemaisgranular.

Removercores,planosdefundo,margens,preenchimentos,larguras

CrieumfavoritoeadicioneosnippetaseguircomooURL:

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 da página atual para algo mais legível.

Note: It is, in fact, possible for a page to have a <style> block inside the <body> tag - the HTML5 standard allows this and most browsers support it. So far this is not common practice, but as web frameworks evolve we might see more 'local style sheets' in the future web.

Se você quiser melhorar a legibilidade, desabilitar todo o CSS pode não fornecer a melhor experiência. Para esses casos, os bookmarklets abaixo podem dar 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);}}})()

Remover 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 mata a maioria dos vídeos incorporados, widgets de comentários, etc.

Remover todas as imagens (navegação no modo de 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';}})();

Note: this one needs to be used in combination with Remove iframes above, since most banner images are typically inside iframes and this bookmarklet only works with the top-level document.

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

Você pode usar o Bookmarklet Builder para desimpedir o código (o botão Format ), edite-o para atender às suas necessidades e diminua-o (o botão Compactar ) para algo que você pode colar como o URL do marcador.

The bookmarklets listed above will also work on most mobile web browsers on both iOS and Android. Mobile browsers won't run javascript from the address bar, but you can add a bookmark, paste the js code as the URL, set a label, e.g. clean, and then run it by tapping the item in the bookmarks menu (for IOS safari) or typing clean in the address bar and then tapping the corresponding bookmark in the autosuggest dropdown. This can improve readability for pages that have no reading mode.

NOTE: If you copy and paste the bookmarklets above directly into the address bar you'll notice that browsers remove the javascript: prefix — this is a browser security feature, so if you want to test the bookmarklets directly from the address bar, then you'll need to prepend javascript: manually before the js code.

Extensões do Chrome

Se você estiver procurando por uma extensão do Google Chrome, haverá uMatrix onde você pode clique na coluna CSS para desativar todos os CSS e estilos, e Desenvolvedor da Web onde, sob a guia CSS, você tem uma opção Desativar todos os estilos .

    
por 28.02.2017 / 15:12
6

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

    
por 10.07.2012 / 21:35
2

Não há uma versão do Chrome Sem estilo (ainda?), então você precisa usar < um outro método, como alguns dos outras extensões que podem desativar os estilos.

Você pode usar a extensão Disable Stylesheets para desativar as folhas de estilo em geral ou as Desenvolvedor da Web para ativar ou desativar todos os estilos. O Pendule também é uma extensão popular para essa finalidade.

Você também pode desativar estilos com as Ferramentas para Desenvolvedores [1] [2] :

Gear Icon -> CSS Tab -> Disable All Styles

    
por 10.07.2012 / 21:38
1

Se você está fazendo isso por razões de velocidade, então eu sugiro uma alternativa: Links 2

Quando o navegador abrir, pressione g e digite o URL que você deseja acessar. Este navegador é leve sobre os padrões que suporta, mas incrivelmente rápido, mesmo em um PC muito antigo.

    
por 10.07.2012 / 21:45
1

Under Firefox, View -> Page Style -> No Style allows viewing an unstyled page. Helpful for some overly-JS / stylesheet dependent sites (e.g.: Lifehacker). Is there any similar functionality under Google's Chrome, and/or where would I access this? Version 19.0.1084.56 / Ubuntu. - Dr. Edward Morbius

...

Yes. Toggling stylesheet off for the current session would be sufficent. Toggling CSS, JS, cookies, etc., for all sites is right out. Unfortunately that seems to be what was happening. I'd describe the experience as "mildly annoying". - Dr. Edward Morbius

Usando a biblioteca jQuery, em console (Chromium / Chrome, Firefox, Opera) você 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);})()

link

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

link

Carrega jQuery no documento, seja do arquivo local ou do CDN do jQuery, registra o sucesso, registra o status do estilo, ativa ou desativa os estilos de autor por keydown da barra de espaço ou no console.

Testado no Chromium / Chrome, Firefox e Opera para documentos HTML locais e on-line.

    
por 18.05.2013 / 18:18
1

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

Esse e o elegante endereço precisam da maioria das minhas necessidades de personalização como um leitor. O Reader-Mode (Firefox) tende a fornecer conteúdo com estilo uniforme de maneira confiável.

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

    
por 14.05.2017 / 07:53
0

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

jQuery("head").empty();

ou em javascripts você pode usar

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

vá para a sua página da Web e pressione ctrl + shift + i você verá um console do menu seleto e cole este código document.getElementsByTagName("head")[0].innerText=""; e depois pressione enter

    
por 01.11.2018 / 18:09