Esiste un modo per visualizzare una pagina Web senza stili in Chrome?


25

In Firefox, Visualizza -> Stile pagina -> Nessuno stile consente di visualizzare una pagina non modificata. Utile per alcuni siti dipendenti eccessivamente da JS / fogli di stile (ad es. Lifehacker).

Esistono funzionalità simili in Google Chrome e / o dove accederei?

Versione 19.0.1084.56 / Ubuntu.


La soluzione migliore per questo in Chrome è usare Firefox.
wha7ever - Ripristina Monica il

Risposte:


25

Disabilita tutti i fogli di stile CSS

Dato che la maggior parte delle pagine moderne definisce tutti gli stili nei file CSS esterni che sono inclusi in <head>, la rimozione del headtag rimuoverà efficacemente tutti gli stili (tranne gli stili incorporati espliciti e quelli impostati dagli script). Fai clic con il tasto destro su una pagina, seleziona Ispeziona dal menu contestuale e incollalo nella scheda Console:

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

Ed ecco la versione del bookmarklet del codice sopra che può essere incollata come l'URL di un segnalibro (attiva la barra dei segnalibri in Chrome con + shift+ bsu Mac o ctrl+ shift+ bsu Linux / Windows) :

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

Puoi anche digitare il codice sopra direttamente nella barra degli indirizzi, ma leggi la nota alla fine della risposta prima di farlo. .

La rimozione di <head>può anche essere effettuata dalla scheda Devtools Elements , facendo clic con il tasto destro del mouse sul tag head ed eliminandolo tramite il menu di scelta rapida:

elimina il tag head in Chrome

NOTA: la rimozione del tag head è un po 'un approccio di forza bruta poiché ucciderà tutti gli stili, javascript, caratteri web, ecc. E se il contenuto della pagina è reso da javascript allora molto probabilmente otterrai una pagina vuota. Sulla maggior parte dei siti probabilmente ti darà i risultati attesi.

Un caso d'uso più frequente è rimuovere elementi fastidiosi specifici su una pagina, come colori, margini, iframe, ecc. In tal caso, uno dei seguenti bookmarklet fornirà un controllo più granulare.

Rimuovi colori, sfondi, margini, imbottiture, larghezze

Crea un segnalibro e aggiungi il seguente frammento come 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';}})()

Ora puoi fare clic sul tuo bookmarklet per ripulire lo stile CSS nella pagina corrente in qualcosa di più leggibile.

Nota: è infatti possibile che una pagina abbia un <style>blocco all'interno del <body>tag - lo standard HTML5 lo consente e la maggior parte dei browser lo supporta. Finora questa non è una pratica comune, ma con l'evoluzione dei framework web potremmo vedere più "fogli di stile locali" nel futuro web.

Se vuoi semplicemente migliorare la leggibilità, disabilitare tutti i CSS potrebbe non fornire la migliore esperienza. In questi casi i bookmarklet di seguito potrebbero dare risultati migliori:

Rimuovi intestazioni / piè di pagina non scorrevoli (aumenta l'area di lettura)

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);}}})()

Rimuovi iframe (uccide la maggior parte dei banner, ecc.)

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

Questo ucciderà anche la maggior parte dei video incorporati, widget di commenti, ecc.

Rimuovi tutte le immagini (navigazione in modalità ufficio)

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: questo deve essere utilizzato in combinazione con Rimuovi iframe sopra, poiché la maggior parte delle immagini di banner si trova in genere all'interno di iframe e questo bookmarklet funziona solo con il documento di livello superiore.

I bookmarklet possono anche essere utilizzati per siti che non visualizzeranno contenuti quando vengono utilizzati i blocchi degli annunci.

È possibile utilizzare il Bookmarklet Builder per annullare la minzione del codice ( pulsante Formato ), modificarlo in base alle proprie esigenze e ridimensionarlo ( pulsante Comprimi ) in qualcosa che è possibile incollare come URL del segnalibro.

I bookmarklet elencati sopra funzioneranno anche sulla maggior parte dei browser Web mobili sia su iOS che su Android. I browser per dispositivi mobili non eseguiranno javascript dalla barra degli indirizzi, ma è possibile aggiungere un segnalibro, incollare il codice js come URL, impostare un'etichetta, ad esempio clean, e quindi eseguirlo toccando l'elemento nel menu dei segnalibri (per IOS safari) o digitando cleannella barra degli indirizzi e quindi toccando il segnalibro corrispondente nel menu a discesa autosuggest. Ciò può migliorare la leggibilità per le pagine che non dispongono di modalità di lettura .

NOTA: Se copi e incolli i bookmarklet sopra direttamente nella barra degli indirizzi noterai che i browser rimuovono iljavascript: prefisso: questa è una funzione di sicurezza del browser, quindi se vuoi testare i bookmarklet direttamente dalla barra degli indirizzi, allora è necessario anteporre javascript:manualmente prima del codice js.

Estensioni di Chrome

Se stai cercando un'estensione di Chrome, c'è uMatrix dove puoi fare clic sulla colonna CSS per disabilitare tutti i CSS e gli stili e Web Developer dove sotto la scheda CSS hai un'opzione Disabilita tutti gli stili .


uMatrix (che ho scoperto in modo indipendente negli anni successivi) in effetti fa il trucco, sito per sito (o pagina o dominio). Lo sviluppatore web (menzionato di seguito) è troppo zelante.
dredmorbius,

7

È possibile utilizzare l' estensione Web Developer per questo:

inserisci qui la descrizione dell'immagine


2
Grazie. Questo sembra fare il trucco. Sebbene Lifehacker sia ancora illeggibile. Funziona in w3m però. La vecchia scuola è come ci muoviamo qui.
dredmorbius,

Hrm. Il problema è che questa è un'impostazione globale per tutti i siti / pagine. Ho appena passato alcuni momenti di "WTF !!!" quando improvvisamente ho iniziato a vedere gli elementi di stile apparire / scomparire da varie pagine mentre commutavo varie impostazioni di Web Developer. Quindi è in qualche modo utile, ma non del tutto.
dredmorbius,

@ Dr.EdwardMorbius: strano. Per me, questo è solo temporaneo. Anche l'aggiornamento della pagina torna alla visualizzazione predefinita del sito. Ma suppongo che non sia nemmeno quello che vuoi, vero?
Der Hochstapler,

Sì. Disattivare il foglio di stile per la sessione corrente sarebbe sufficiente. È possibile attivare CSS, JS, cookie e così via per tutti i siti. Sfortunatamente sembra essere quello che stava succedendo. Descriverei l'esperienza come "leggermente fastidiosa".
dredmorbius,

2

Non esiste una versione Chrome di No Style (ancora?), Quindi devi usare un altro metodo , come alcune delle altre estensioni che possono disabilitare gli stili.

Puoi utilizzare l' estensione Disabilita fogli di stile per disabilitare i fogli di stile in generale o l' estensione per gli sviluppatori Web per attivare o disattivare tutti gli stili. Pendule è anche un'estensione popolare per questo scopo.

Puoi anche disabilitare gli stili con gli Strumenti per sviluppatori [1] [2] :

Icona a forma di ingranaggio -> scheda CSS -> disabilita tutti gli stili


Ciò sembra disabilitare tutti i fogli di stile per tutte le pagine, senza possibilità di abilitarli / disabilitarli su una determinata pagina. Non è quello che sto cercando.
dredmorbius,

Quale? Ci sono quattro opzioni.
Synetech,

Non vedo l'icona di un'estensione. Cancellato.
dredmorbius,

Eh?
Synetech

Non era presente alcuna icona per l'estensione "Disabilita fogli di stile" nell'area di notifica a destra della finestra dell'URL. L'unico modo in cui sono riuscito a gestire le impostazioni è stato navigare tramite Chiave inglese -> Strumenti -> Estensioni -> Disabilita fogli di stile -> Opzioni. Non ... molto ergodinamico.
dredmorbius,

1

Se lo stai facendo per motivi di velocità, posso suggerire un'alternativa: Link 2

Quando si apre il browser, premere ge digitare l'URL che si desidera visitare. Questo browser è leggero sugli standard che supporta, ma sorprendentemente veloce anche su un PC molto vecchio.


1
È più una privacy / mantenere l'utilizzo di JS al minimo. Tendo a preferire w3m rispetto alla famiglia di browser per console link / elinks - migliore ergonomia e ci sono abbastanza abituato. Sì, però, ho davvero familiarità con la velocità e la leggerezza dei browser console. Tuttavia, alcuni siti sono semplicemente interrotti.
dredmorbius,

1
Gotcha. In realtà non uso la versione per console, ma la GUI è altrettanto veloce. Ma sì, hai ragione, a volte le pagine sono molto spezzate. Sarebbe bello se tutte le pagine si degradassero con grazia.
Gerry,

2
Sono stato conosciuto per ricorrere a lince, alcuni sed e 'fmt' in casi estremi. Questo fa piangere Gesù bambino.
dredmorbius,

1

In Firefox, Visualizza -> Stile pagina -> Nessuno stile consente di visualizzare una pagina non modificata. Utile per alcuni siti dipendenti eccessivamente da JS / fogli di stile (ad es. Lifehacker). Esistono funzionalità simili in Google Chrome e / o dove accederei? Versione 19.0.1084.56 / Ubuntu. - Dr. Edward Morbius

...

Sì. Disattivare il foglio di stile per la sessione corrente sarebbe sufficiente. È possibile attivare CSS, JS, cookie e così via per tutti i siti. Sfortunatamente sembra essere quello che stava succedendo. Descriverei l'esperienza come "leggermente fastidiosa". - Dr. Edward Morbius

Utilizzando la libreria jQuery, su console(Chromium / Chrome, Firefox, Opera) è necessario cancellare gli stili dell'autore da un 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

Per attivare o disattivare gli stili in un documento HTML, questo potrebbe essere utile:

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

Carica jQuery nel documento, dal file locale o dalla CDN di jQuery, registra i risultati, registra lo stato degli stili, attiva o disattiva gli stili degli autori tramite il tasto della barra spaziatrice o sulla console.

Testato su Chromium / Chrome, Firefox e Opera per documenti HTML locali e online.


1

Il mio strumento attualmente preferito per questo è l' estensione del browser uMatrix , che consente controlli ancora più precisi : disabilitare CSS, JS, immagini o altre funzionalità, caricando il dominio, rispetto al presente sito Web. Le modifiche possono essere facilmente attivate, rese permanenti o espresse come regole predefinite.

Questo ed elegante affronta la maggior parte delle mie esigenze di personalizzazione come lettore. Reader-Mode (Firefox) tende a fornire contenuti in stile uniforme in modo abbastanza affidabile.

Estendere la domanda: su Chrome / Android, non ho un'opzione praticabile e le soluzioni suggerite sopra non funzionano.


0

utilizzare solo una riga jquery code ... use

jQuery("head").empty();

o nei javascript puoi usare

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

vai alla tua pagina web e poi premi ctrl + maiusc + i vedrai un menu selezionare console e incollare questo document.getElementsByTagName("head")[0].innerText="";codice e quindi premere invio


2
Dove verranno inserite queste informazioni?
music2myear,

vai alla tua pagina web e poi premi ctrl + maiusc + i vedrai un menu selezionare console e incollare questo document.getElementsByTagName("head")[0].innerText="";codice e quindi premere
invio

Non dovrebbe essere necessario leggere i commenti per capire una risposta. Utilizzare il pulsante EDIT per aggiungere queste informazioni alla risposta stessa.
music2myear,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.