Czy jest jakiś sposób, aby wyświetlić stronę internetową bez stylów w Chrome?

25

W przeglądarce Firefox widok -> Styl strony -> Brak stylu umożliwia wyświetlanie strony bez stylu. Pomocne w przypadku niektórych witryn nadmiernie zależnych od JS / arkuszy stylów (np. Lifehacker).

Czy w przeglądarce Google jest podobna funkcjonalność i / lub gdzie mam do niej dostęp?

Wersja 19.0.1084.56 / Ubuntu.

google-chrome css dredmorbius
źródło
Najlepszym obejściem tego problemu w Chrome jest korzystanie z przeglądarki Firefox.
wha7ever - Przywróć Monikę

Odpowiedzi:

25

Wyłącz wszystkie arkusze stylów CSS

Biorąc pod uwagę, że większość współczesnych stron definiuje wszystkie style w zewnętrznych plikach CSS, które są zawarte w <head>, usunięcie headznacznika skutecznie usunie wszystkie style (z wyjątkiem jawnych stylów wstawianych i ustawionych przez skrypty). Kliknij stronę prawym przyciskiem myszy, wybierz polecenie Inspect z menu kontekstowego i wklej to do zakładki Console:

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

A oto wersja kodu z zakładki powyżej, którą można wkleić jako adres URL zakładki (przełącz pasek zakładek w Chrome za pomocą ⌘+ shift+ bna Macu lub ctrl+ shift+ bna Linux / Windows) :

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

Możesz także wpisać powyższy kod bezpośrednio w pasku adresu, ale zanim to zrobisz, przeczytaj notatkę na końcu odpowiedzi. .

Usunięcie <head>można również wykonać na karcie Elementy devtools , klikając prawym przyciskiem myszy znacznik head i usuwając go za pomocą menu kontekstowego:

usuń tag głowy w Chrome

UWAGA: Usunięcie tagu głowy jest trochę brutalną metodą, ponieważ zabije wszystkie style, javascript, czcionki internetowe itp., A jeśli zawartość strony jest renderowana przez javascript, najprawdopodobniej otrzymasz pustą stronę. W większości witryn prawdopodobnie przyniesie to oczekiwane rezultaty.

Częstszym przypadkiem użycia jest usunięcie określonych irytujących rzeczy na stronie, takich jak kolory, marginesy, ramki iframe itp. W takim przypadku jedna z poniższych zakładek zapewni bardziej szczegółową kontrolę.

Usuń kolory, tła, marginesy, wypełnienia, szerokości

Utwórz zakładkę i dodaj następujący fragment jako adres 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';}})()

Teraz możesz kliknąć bookmarklet, aby oczyścić styl CSS na bieżącej stronie z czegoś bardziej czytelnego.

Uwaga: W rzeczywistości strona może mieć <style>blok wewnątrz <body>tagu - standard HTML5 pozwala na to i większość przeglądarek obsługuje go. Jak dotąd nie jest to powszechna praktyka, ale w miarę ewolucji frameworków internetowych możemy zobaczyć w przyszłości więcej „lokalnych arkuszy stylów”.

Jeśli chcesz po prostu poprawić czytelność, wyłączenie całego CSS może nie zapewnić najlepszej jakości. W takich przypadkach poniższe zakładki mogą dać lepsze wyniki:

Usuń nieprzewijające się nagłówki / stopki (zwiększa obszar czytania)

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

Usuń iframe (zabija większość banerów itp.)

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

Zabije to również większość osadzonych filmów, widżety komentarzy itp.

Usuń wszystkie obrazy (przeglądanie w trybie biurowym)

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

Uwaga: należy użyć tego w połączeniu z powyższym opcją Usuń iframe , ponieważ większość obrazów banerów zwykle znajduje się w elementach iframe, a ta broszura działa tylko z dokumentem najwyższego poziomu.

Bookmarklety mogą być również używane w witrynach, które nie wyświetlają treści, gdy stosowane są blokery reklam.

Możesz użyć Kreatora zakładek do unminify kodu ( przycisk Format ), edytować go zgodnie z własnymi potrzebami i zminimalizować go ( przycisk Kompresuj ) do czegoś, co możesz wkleić jako adres URL zakładki.

Bookmarklety wymienione powyżej będą również działać w większości przeglądarek mobilnych na iOS i Androidzie. Przeglądarki mobilne nie uruchamiają javascript z paska adresu, ale możesz dodać zakładkę, wkleić kod js jako adres URL, ustawić etykietę, np. clean, A następnie uruchomić ją, dotykając elementu w menu zakładek (dla IOS safari) lub wpisując cleanpasek adresu, a następnie stukając odpowiednią zakładkę w menu rozwijanym autosugestii. Może to poprawić czytelność stron, które nie mają trybu czytania .

UWAGA: Jeśli skopiujesz i wkleisz powyższe bookmarklety bezpośrednio w pasku adresu, zauważysz, że przeglądarki usuwająjavascript: prefiks - jest to funkcja bezpieczeństwa przeglądarki, więc jeśli chcesz przetestować bookmarklety bezpośrednio z paska adresu, wtedy trzeba javascript:ręcznie dodać przed kodem js.

Rozszerzenia Chrome

Jeśli szukasz rozszerzenia chrome, jest uMatrix, w którym możesz kliknąć kolumnę CSS, aby wyłączyć wszystkie CSS i style, oraz Web Developer, gdzie na karcie CSS masz opcję Wyłącz wszystkie style .

ccpizza
źródło
uMatrix (który niezależnie odkryłem w międzyczasie) faktycznie robi to samo, w zależności od witryny (lub strony lub domeny). Web Developer (wspomniany poniżej) jest zbyt nadgorliwy.
dredmorbius
7

Możesz użyć rozszerzenia Web Developer do tego:

wprowadź opis zdjęcia tutaj

Der Hochstapler
źródło
2
Dzięki. To wydaje się załatwić sprawę. Chociaż Lifehacker jest nadal nieczytelny. Działa jednak w w3m. Toczymy się tutaj w starej szkole.
dredmorbius,
Hmm. Problem polega na tym, że jest to ustawienie globalne dla wszystkich witryn / stron. Właśnie przejrzałem kilka chwil „WTF !!!” gdy nagle zacząłem widzieć, jak elementy stylizacji pojawiają się / znikają z różnych stron, kiedy przełączałem różne ustawienia Web Developer. Jest to w pewnym stopniu, ale nie do końca przydatne.
dredmorbius,
@ Dr.EdwardMorbius: Dziwne. Dla mnie to tylko tymczasowe. Nawet odświeżenie strony powoduje powrót do domyślnego widoku witryny. Ale zakładam, że nie tego też chcesz, prawda?
Der Hochstapler,
Tak. Wyłączenie arkusza stylów dla bieżącej sesji byłoby wystarczające. Przełączanie CSS, JS, plików cookie itp. Dla wszystkich witryn jest już dostępne. Niestety wydaje się, że tak się działo. Opisałbym to doświadczenie jako „lekko irytujące”.
dredmorbius,
2

Nie ma jeszcze wersji No Style dla Chrome (jeszcze?), Więc musisz użyć innej metody , takiej jak niektóre inne rozszerzenia, które mogą wyłączać style.

Możesz użyć rozszerzenia Disable Stylesheets, aby ogólnie wyłączyć arkusze stylów lub rozszerzenia Web Developer, aby włączyć lub wyłączyć wszystkie style. Pendule jest również popularnym rozszerzeniem do tego celu.

Możesz także wyłączyć style za pomocą Narzędzi dla programistów [1] [2] :

Ikona koła zębatego -> karta CSS -> Wyłącz wszystkie style

Synetech
źródło
To wydaje się wyłączać wszystkie arkusze stylów dla wszystkich stron, bez możliwości włączania / wyłączania ich na danej stronie. Nie tego szukam.
dredmorbius,
Który? Istnieją cztery opcje.
Synetech,
Nie widzę ikony rozszerzenia. Usunąć to.
dredmorbius,
Hę?
Synetech
W obszarze powiadomień po prawej stronie okna URL nie było ikony rozszerzenia „Wyłącz arkusze stylów”. Jedynym sposobem, w jaki mogłem zarządzać ustawieniami, było poruszanie się po Kluczu -> Narzędzia -> Rozszerzenia -> Wyłącz arkusze stylów -> Opcje. Nie ... bardzo ergodynamiczny.
dredmorbius,
1

Jeśli robisz to ze względu na szybkość, czy mogę zasugerować alternatywę: Linki 2

Po otwarciu przeglądarki naciśnij gi wpisz adres URL, do którego chcesz przejść. Ta przeglądarka jest lekka w stosunku do obsługiwanych standardów, ale zadziwiająco szybka nawet na bardzo starym komputerze.

Gerry
źródło
1
To bardziej prywatność / ogranicz użycie JS do minimum. Wolę w3m od rodziny przeglądarek konsolowych links / elinks - lepsza ergonomia i jestem do tego przyzwyczajony. Tak, ale naprawdę wiem, jak szybkie i lekkie mogą być przeglądarki konsolowe. Niektóre strony są jednak po prostu zepsute.
dredmorbius,
1
Gotcha Właściwie nie używam wersji konsolowej, ale GUI jest tak samo szybkie. Ale tak, masz rację, czasami strony są bardzo zepsute. Byłoby wspaniale, gdyby wszystkie strony uległy degradacji z wdziękiem.
Gerry,
2
Jestem znany z tego, że uciekam się do rysi, niektórych sed i „fmt” w skrajnych przypadkach. To sprawia, że ​​mały Jezus płacze.
dredmorbius,
1

W przeglądarce Firefox widok -> Styl strony -> Brak stylu umożliwia wyświetlanie strony bez stylu. Pomocne w przypadku niektórych witryn nadmiernie zależnych od JS / arkuszy stylów (np. Lifehacker). Czy w przeglądarce Google jest podobna funkcjonalność i / lub gdzie mam do niej dostęp? Wersja 19.0.1084.56 / Ubuntu. - Dr Edward Morbius

...

Tak. Wyłączenie arkusza stylów dla bieżącej sesji byłoby wystarczające. Przełączanie CSS, JS, plików cookie itp. Dla wszystkich witryn jest już dostępne. Niestety wydaje się, że tak się działo. Opisałbym to doświadczenie jako „lekko irytujące”. - Dr Edward Morbius

Korzystając z biblioteki jQuery, w console(Chromium / Chrome, Firefox, Opera) należy usunąć style autora z dokumentu 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

Może to być pomocne do włączania i wyłączania stylów w dokumencie HTML:

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

Ładuje jQuery do dokumentu, albo z pliku lokalnego, albo z CDN jQuery, loguje sukces, status stylu logów, włącza lub wyłącza style autora za pomocą klawisza spacji lub konsoli.

Testowane w Chromium / Chrome, Firefox i Opera dla lokalnych i internetowych dokumentów HTML.

guest271314
źródło
1

Moim obecnie preferowanym narzędziem do tego jest rozszerzenie przeglądarki uMatrix , które pozwala nawet na bardziej szczegółowe kontrole: wyłącz CSS, JS, obrazy lub inne funkcje, ładując domenę w stosunku do obecnej witryny. Zmiany można łatwo przełączać, tworzyć na stałe lub rzutować jako reguły domyślne.

To i stylowe zaspokaja większość moich potrzeb dostosowywania jako czytelnika. Tryb czytnika (Firefox) zwykle zapewnia niezawodnie treści o jednolitym stylu.

Rozszerzając pytanie: w Chrome / Android nie mam realnej opcji, a sugerowane powyżej rozwiązania nie działają.

dredmorbius
źródło
0

tylko jeden kod jquery linii ... użyj 

jQuery("head").empty();

lub w skryptach JavaScript, których możesz użyć 

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

Przejdź do strony, a następnie naciśnij ctrl + shift + i zobaczysz menu wybierz konsolę i wklej ten document.getElementsByTagName("head")[0].innerText="";kod, a następnie naciśnij enter

Vishal choudhary
źródło
2
Gdzie wpisano by te informacje?
music2myear
Masz swoją stronę, a następnie naciśnij ctrl + shift + i zobaczysz menu wybierz konsolę i wklej ten document.getElementsByTagName("head")[0].innerText="";kod, a następnie naciśnij enter
Vishal choudhary
Aby zrozumieć odpowiedź, nie powinno być konieczne czytanie komentarzy. Proszę użyć przycisku EDIT, aby dodać te informacje do samej odpowiedzi.
music2myear