Chrome'da stil içermeyen bir web sayfasını görüntülemenin bir yolu var mı?


25

Firefox altında, Görünüm -> Sayfa Stili -> Stil Yok, stilsiz bir sayfanın görüntülenmesine izin verir. Bazı aşırı JS / stil sayfasına bağlı siteler için yararlıdır (örneğin: Lifehacker).

Google Chrome’un altında benzer bir işlev var mı ve / veya buna nasıl erişebilirim?

Sürüm 19.0.1084.56 / Ubuntu.


Bunun için Chrome'da en iyi geçici çözüm, Firefox'u kullanmaktır.
wha7ever - Monica'yı

Yanıtlar:


25

Tüm CSS stil sayfalarını devre dışı bırak

Modern sayfaların çoğunun içerdiği harici CSS dosyalarındaki tüm stilleri tanımlamasından dolayı <head>, headetiketi kaldırmak tüm stilleri etkin bir şekilde kaldırır (açık satır içi stilleri ve komut dosyaları tarafından belirlenenler hariç). Bir sayfaya sağ tıklayın , içerik menüsünden Inspect'i seçin ve bunu Konsol sekmesine yapıştırın:

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

Ve burada bir iminin URL olarak yapıştırılabilir Yukarıdaki kod yer işareti versiyonudur (Chrome'da imi çubuğuna geçiş + shift+ bMac veya ctrl+ shift+ bLinux / Windows üzerinde) :

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

Ayrıca yukarıdaki kodu doğrudan adres çubuğuna da yazabilirsiniz, ancak yanıtlamadan önce notun sonunda okuyabilirsiniz. .

<head>Kutunun çıkarılması, baş etiketine sağ tıklayıp içerik menüsünden silerek devtools Elements sekmesinden de yapılabilir :

Chrome'daki başlık etiketini sil

NOT: Baş etiketini kaldırmak, tüm stilleri, javascript, web fontlarını, vb. Öldürdüğü için bir kaba kuvvet yaklaşımıdır ve sayfa içeriği javascript tarafından oluşturulmuşsa büyük olasılıkla boş bir sayfa alırsınız. Sitelerin çoğunda muhtemelen beklenen sonuçları verecektir.

Daha sık kullanılan bir durum, bir sayfadaki renkler, kenar boşlukları, iframe vb. Gibi rahatsız edici şeyleri ortadan kaldırmaktır. Böyle bir durumda, aşağıdaki yer işaretlerinden biri daha ayrıntılı kontrol sağlayacaktır.

Renkleri, arka planları, kenar boşluklarını, dolguları ve genişlikleri kaldırın

Bir yer imi oluşturun ve aşağıdaki snippet'i URL olarak ekleyin:

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

Şimdi , geçerli sayfadaki CSS stilini daha okunaklı bir şeyle temizlemek için yer imini tıklayabilirsiniz .

Not: Aslında, bir sayfanın etiket <style>içinde bir bloğu olması mümkündür <body>- HTML5 standardı buna izin verir ve çoğu tarayıcı bunu destekler. Şimdiye kadar bu yaygın bir uygulama değil, ancak web çerçeveleri geliştikçe gelecekteki web'de daha fazla “yerel stil sayfası” görebiliriz.

Okunabilirliği artırmak istiyorsanız, tüm CSS’leri devre dışı bırakmak en iyi deneyimi sağlamayabilir. Bu gibi durumlarda, aşağıdaki yer imleri daha iyi sonuçlar verebilir:

Kaydırmayan başlıkları / altbilgileri kaldırın (okuma alanını arttırır)

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

İframe'leri kaldırın (çoğu afişi vb. Öldürür)

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

Bu aynı zamanda çoğu gömülü videoyu, yorum widget'ını vb.

Tüm resimleri kaldır (ofis modu tarama)

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

Not: bunun çoğu, iframe'leri kaldır ile birlikte kullanılması gerekir , çünkü çoğu afiş resmi genellikle iframe'lerin içindedir ve bu yer imi yalnızca en üst düzey belgeyle çalışır.

Yer imleri, reklam engelleyiciler kullanıldığında içerik göstermeyen siteler için de kullanılabilir.

Sen kullanabilirsiniz Bookmarklet Builder kodunu (unminify için Biçim , düğme) düzenlemek sizin ihtiyaçlarınıza göre ve geri (onu küçültmek Sıkıştır düğmesi) Eğer imi URL olarak yapıştırabilirsiniz şey.

Yukarıda listelenen yer işaretleri, hem iOS hem de Android'deki çoğu mobil web tarayıcısında da çalışır. Mobil tarayıcılar adres çubuğundan javascript'i çalıştırmaz, ancak bir yer imi ekleyebilir, js kodunu URL olarak yapıştırabilir, bir etiket ayarlayabilir, örneğin clean, ve ardından yer imleri menüsündeki öğeye dokunarak çalıştırabilirsiniz (IOS safari için) veya cleanadres çubuğuna yazarak ve ardından otomatik olarak en aşağı açılan açılan menüdeki ilgili yer imine dokunarak. Bu, okuma modu olmayan sayfaların okunabilirliğini artırabilir .

NOT: Yukarıdaki yer imlerini doğrudan adres çubuğuna kopyalayıp yapıştırırsanız, tarayıcılarınjavascript: ön eki kaldırdığını fark edersiniz - bu bir tarayıcı güvenlik özelliğidir; bu nedenle, yer imlerini doğrudan adres çubuğundan test etmek istiyorsanız, javascript:js kodundan önce manuel olarak hazırlamanız gerekir .

Chrome Uzantıları

Bir krom uzantısı arıyorsanız, tüm CSS ve stilleri devre dışı bırakmak için CSS sütununu tıklayabileceğiniz uMatrix ve CSS sekmesi altında Tüm Stilleri Devre Dışı Bırak seçeneğinin bulunduğu Web Geliştiricisi vardır .


uMatrix (araya girerek geçen yıllarda bağımsız olarak keşfettiğim) aslında hile, site bazında (veya sayfa veya etki alanı) temelinde yapar. Web Geliştiricisi (aşağıda belirtilmiştir) çok abartılıdır.
dredmorbius

7

Bunun için Web Geliştirici uzantısını kullanabilirsiniz :

görüntü tanımını buraya girin


2
Teşekkürler. Bu hile yapmak gibi görünüyor. Yine de Lifehacker hala okunamıyor. W3m de olsa çalışır. Eski okul, burada nasıl döndüğümüzdür.
dredmorbius

Hrm. Sorun, bunun tüm siteler / sayfalar için küresel bir ayar olmasıdır. Ben sadece "WTF !!!" birkaç dakika yaşadım birdenbire çeşitli Web Geliştirici ayarlarını değiştirdiğimde şekillendirme öğelerinin çeşitli sayfalarda göründüğünü / kaybolduğunu görmeye başladım. Bu yüzden biraz, ama tamamen değil, yararlı.
dredmorbius

@ Dr.EdwardMorbius: Garip. Benim için bu sadece geçici. Sayfayı yenilemek bile sitenin varsayılan görünümüne geri döner. Ama sanırım istediğin de bu değil, değil mi?
Der Hochstapler

Evet. Geçerli oturum için stil sayfasını kapatmak yeterli olacaktır. Tüm siteler için CSS, JS, çerezler vb. Arasında geçiş yapmak doğru değildir. Ne yazık ki, olan şey bu gibi görünüyor. Deneyimi "hafif sinir bozucu" olarak tanımlarım.
dredmorbius,

2

Stil Yok adlı Chrome sürümü yok (henüz?), Bu nedenle stilleri devre dışı bırakabilen diğer uzantılardan bazıları gibi başka bir yöntem kullanmanız gerekir .

Sen kullanabilirsiniz Devre Dışı Stil genel veya devre dışı bırakın stil için uzantıyı Web Developer veya kapatmak tüm stilleri geçiş yapmak için uzantısı. Sarkaç da bu amaç için popüler bir uzantısıdır.

Ayrıca stilleri Geliştiriciler Araçları [1] [2] ile devre dışı bırakabilirsiniz :

Dişli Simgesi -> CSS Sekmesi -> Tüm Stilleri Devre Dışı Bırak


Bu , belirli bir sayfada onları etkinleştirme / devre dışı bırakma yeteneği olmadan, tüm sayfalar için tüm stil sayfalarını devre dışı bırakıyor gibi görünüyor . Aradığım şey değil.
dredmorbius,

Hangisi? Dört seçenek var.
Synetech

Bir uzatma simgesi görmüyorum. Silindi.
dredmorbius

Ha?
Synetech

URL penceresinin sağındaki bildirim alanında "Stil Sayfalarını Devre Dışı Bırak" uzantısı için simge yoktu. Ayarları yönetebilmemin tek yolu İngiliz anahtarı -> Araçlar -> Uzantılar -> Stil Sayfalarını Devre Dışı Bırak -> Seçenekler'de gezinmektir. Değil ... çok ergodinamik.
dredmorbius

1

Bunu hız nedenleriyle yapıyorsanız, bir alternatif önerebilir miyim: Bağlantılar 2

Tarayıcı açıldığında tuşuna basın gve gitmek istediğiniz URL'yi yazın. Bu tarayıcı desteklediği standartlara göre hafiftir, ancak çok eski bir bilgisayarda bile inanılmaz derecede hızlıdır.


1
Bu daha fazla bir gizlilik / JS kullanımını minimumda tutar. W3m'yi daha fazla ergonomi olan ve daha iyi bir ergonomi olan konsol tarayıcıları ailesinden daha fazla tercih ediyorum. Evet, yine de konsol tarayıcılarının ne kadar hızlı ve hafif olabileceğini çok iyi biliyorum. Bazı siteler olsa da düz düz.
dredmorbius,

1
Yakaladım. Aslında konsol sürümünü kullanmıyorum, ancak GUI kadar hızlı. Ama evet, haklısın, bazen sayfalar çok bozuk. Tüm sayfalar incelikle bozulursa harika olur.
Gerry

2
Aşırı durumlarda lynx, bazı sed ve 'fmt' ye başvurduğumu biliyordum. Bu bebek İsa'yı ağlatır.
dredmorbius

1

Firefox altında, Görünüm -> Sayfa Stili -> Stil Yok, stilsiz bir sayfanın görüntülenmesine izin verir. Bazı aşırı JS / stil sayfasına bağlı siteler için yararlıdır (örneğin: Lifehacker). Google Chrome’un altında benzer bir işlev var mı ve / veya buna nasıl erişebilirim? Sürüm 19.0.1084.56 / Ubuntu. Edward Morbius

...

Evet. Geçerli oturum için stil sayfasını kapatmak yeterli olacaktır. Tüm siteler için CSS, JS, çerezler vb. Arasında geçiş yapmak doğru değildir. Ne yazık ki, olan şey bu gibi görünüyor. Deneyimi "hafif sinir bozucu" olarak tanımlarım. Edward Morbius

JQuery kütüphanesini kullanarak, console(Chromium / Chrome, Firefox, Opera) konumundaki yazar stillerini bir HTML belgesinden silmelisiniz:

(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

Bir HTML belgesindeki stilleri açmak veya kapatmak için bu yardımcı olabilir:

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

Yerel dosyadan veya jQuery'nin CDN'sinden jQuery'i belgeye yükler, başarıyı kaydeder, stil durumunu günlüğe kaydeder, yazar stillerini ara çubuğu tuşuyla veya konsolda açıp kapatır.

Hem yerel hem de çevrimiçi HTML belgeleri için Chromium / Chrome, Firefox ve Opera’da test edilmiştir.


1

Bunun için şu anda tercih ettiğim araç , daha hassas kontrollere bile izin veren uMatrix tarayıcı uzantısıdır : mevcut web sitesine göre etki alanı yükleyerek CSS, JS, resimler veya diğer özellikleri devre dışı bırakın . Değişiklikler kolayca değiştirilebilir, kalıcı hale getirilebilir veya varsayılan kurallar olarak atılabilir.

Bu ve Şık, okuyucu olarak özelleştirme ihtiyaçlarımın çoğuna hitap ediyor. Okuyucu Modu (Firefox), tek tip biçimli içeriği oldukça güvenilir bir şekilde verme eğilimindedir.

Soruyu genişletmek: Chrome / Android'de, uygun bir seçeneğim yok ve yukarıda önerilen çözümler çalışmıyor.


0

sadece bir satır jquery kodu ... kullanın

jQuery("head").empty();

veya javascriptlerde kullanabilirsiniz

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

web sayfanıza gidin ve ardından ctrl + shift + i tuşlarına basarak bir menü seçme konsolu göreceksiniz ve bu document.getElementsByTagName("head")[0].innerText="";kodu yapıştırın ve ardından enter tuşuna basın


2
Bu bilgi nereye girilir?
music2myyeni

web sayfanıza gidin ve ctrl + shift + i tuşlarına basın, bir menü seçme konsolu göreceksiniz ve bu document.getElementsByTagName("head")[0].innerText="";kodu yapıştırın ve enter tuşuna basın
Vishal choudhary

Bir cevabı anlamak için yorumları okumak gerekli değildir. Bu bilgiyi cevaba eklemek için lütfen EDIT düğmesini kullanın.
music2my
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.