Tarayıcıda CSS'yi test amacıyla devre dışı bırakma

Bir tarayıcıdaki (Firefox, Chrome ...) tüm harici CSS'yi devre dışı bırakmanın bir yolu var mı?

Daha yavaş internet bağlantısı kullanıldığında, bazen CSS bilgisi olmadan tarayıcı tarafından yalnızca çıplak HTML yüklenir. Görünüşe göre sayfa ekrana ham yerleştirilmiş. Bunu StackOverflow ile de fark etmişsinizdir.

CSS dosyaları yüklenmemiş olsa bile web sayfamın düzgün göründüğünden emin olmak istiyorum.

Harici CSS'yi satır içi olarak dönüştürmek istediğimi söylemedim. Ancak, tüm CSS'yi tarayıcıdan açıkça devre dışı bırakmanın bir yolunu istiyorum, böylece öğelerimi daha iyi ve okunabilir bir şekilde yeniden konumlandırabilirim.

<Link rel = 'stylesheet'> girişlerini kaldırabileceğimi biliyorum, ama ya çok sayıda bağlantılı sayfam varsa?

Firefox ve Chrome için Web Developer eklentisi bunu yapabilir

Eklentiyi yükledikten sonra seçenek CSS menüsünde mevcuttur. Örneğin,CSS > Disable Styles > Disable All Styles

Alternatif olarak, geliştirici araç çubuğu etkinken tuşuna basabilirsiniz Alt+Shift+A.

Chrome / Chromium'da bunu geliştirici konsolundan yapabilirsiniz.

1. Geliştirici konsolunu ctrl-shift-j veya Menü-> Araçlar-> Geliştirici Konsolu ile açın.
2. Geliştirici konsolunda Kaynaklar sekmesine gidin.
3. Bu sekmenin sol üst köşesinde açıklama üçgenine sahip bir simge bulunur. Üstüne tıkla.
4. <Etki alanı> → css → <ortadan kaldırmak istediğiniz css dosyasına göz atın>
5. Tüm metni vurgulayın ve sil düğmesine basın.
6. Devre dışı bırakmak istediğiniz her stil sayfası için durulayın ve tekrarlayın.

Firefox (Win ve Mac)

• Menü araç çubuğundan, "Görünüm"> "Sayfa Stili"> "Stil Yok" u seçin
• Web Geliştirici Araç Çubuğu aracılığıyla, "CSS"> "Stilleri Devre Dışı Bırak"> "Tüm Stiller" öğesini seçin.

Web Geliştirici Araç Çubuğu yüklüyse, insanlar şu klavye kısayollarını kullanabilir: Command+ Shift+ S(Mac) ve Control+ Shift+ S(Win)

• Safari (Mac): Menü araç çubuğu aracılığıyla, "Geliştir"> "Stilleri Devre Dışı Bırak" ı seçin
• Opera (Win): Menü aracılığıyla "Sayfa"> "Stil"> "Kullanıcı Modu" nu seçin
• Chrome (Win): Dişli çark simgesiyle "CSS" sekmesini> "Tüm Stilleri Devre Dışı Bırak" ı seçin
• Internet Explorer 8: Menü araç çubuğundan "Görünüm"> "Stil"> "Stil Yok" u seçin
• Internet Explorer 7: IE Geliştirici Araç Çubuğu menüsü aracılığıyla: Devre Dışı Bırak> Tüm CSS
• Internet Explorer 6: Web Erişilebilirlik Araç Çubuğu aracılığıyla, "CSS"> "CSS'yi Devre Dışı Bırak" ı seçin

Bu komut dosyası benim için çalışıyor (şapka ipucu hurdaya çıkarılmışcola)

var el=document.getElementsByTagName('*');for(var i=0;i<el.length; i++){if (el[i].getAttribute("type")=="text/css") el[i].parentNode.removeChild(el[i]); };

satır içi stil bozulmadan kalır

Scrappedocola / renergy'nin fikrini genişleterek, JavaScript'i uri'ye karşı çalışan bir yer imine dönüştürebilirsiniz , javascript:böylece kod, geliştirme araçlarını açmanıza veya panonuzda herhangi bir şeyi tutmanıza gerek kalmadan birden çok sayfada kolayca yeniden kullanılabilir.

Aşağıdaki parçacığı çalıştırın ve bağlantıyı yer imleri / sık kullanılanlar çubuğunuza sürükleyin:

<a href="javascript: var el = document.querySelectorAll('style,link');
         for (var i=0; i<el.length; i++) {
           el[i].parentNode.removeChild(el[i]); 
         };">
  Remove Styles 
</a>

• Bir sayfadaki binlerce öğenin arasında dolaşmaktan kaçınırdım. getElementsByTagName('*') ve her birini ayrı ayrı kontrol .
• $('style,link[rel="stylesheet"]').remove()Ekstra javascript aşırı derecede hantal olmadığında , sayfada bulunan jQuery'ye güvenmekten kaçınırım .

Adblock Plus'ı yükleyin, ardından *.cssFiltreler seçeneklerinde kural ekleyin (özel filtreler sekmesi). Yöntem yalnızca harici stil sayfalarını etkiler . Satır içi stilleri kapatmaz.

Tüm harici CSS'yi devre dışı bırakın

Bu yöntem tam olarak istediğini yapıyor.

@David Baucum'un çözümüne daha az adımda ulaşmanın başka bir yolu :

1. Sağ tıklayın -> öğeyi inceleyin
2. Öğenizi etkileyen stil sayfasının adına tıklayın (bildirimin hemen sağ tarafında)
3. Tüm metni vurgulayın ve sil düğmesine basın.

Bazı durumlarda daha kullanışlı olabilir.

Yanıtların çoğu burada oldukça eski göründüğünden, popüler tarayıcıların mevcut sürümlerinde bulamadığım menü öğelerine atıfta bulunarak, Firefox Developer Edition'daki mevcut sürümde bunu şu şekilde yapabilirsiniz:

• Geliştirici Araçlarını Aç ( CTRL + SHIFT + I)
• Stil Editörü sekmesini seçin
• Orada belgenizdeki tüm CSS kaynaklarını görmelisiniz. Yanlarındaki göz simgesine tıklayarak her birini devre dışı bırakabilirsiniz.

Harici CSS'ye (günümüzde çoğu sayfa) dayanan sayfalar için basit ve güvenilir bir çözüm, headöğeyi öldürmektir :

document.querySelector("head").remove();

Seçin (Krom / Firefox'da) bu sayfayı sağ tıklayın inceleyin devtools konsolu ve basında kodu yapıştırın girin .

Bir yer iminin URL'si olarak yapıştırabileceğiniz aynı kodun yer imi uygulaması:

javascript:(function(){document.querySelector("head").remove();})()

Şimdi Sık Kullanılanlar çubuğunuzdaki yer işaretine tıkladığınızda, sayfa herhangi bir css stil sayfası olmadan gösterilecektir.

Satır içi stilleri kullanan sayfalarda başlığın kaldırılması çalışmayacaktır.

Safari'yi MacOS'ta kullanıyorsanız:

1. Safari Tercihlerini ( cmd+ ,) açın ve Gelişmiş sekmesinde "Menü çubuğunda Geliştirme menüsünü göster" onay kutusunu etkinleştirin.
2. Şimdi Geliştir menüsünde bir Stilleri Devre Dışı Bırak seçeneği bulacaksınız .

Chrome Geliştirici araçlarını denedim ve yöntem yalnızca CSS harici dosyalar olarak dahil edilirse ve satır içi stiller için çalışmazsa geçerlidir.

Array.prototype.forEach.call(document.querySelectorAll('link'), (element)=>element.remove());

Veya

var linkElements = document.querySelectorAll('link');
Array.prototype.forEach.call(linkElements, (element)=>element.remove());

açıklamalar

1. document.querySelectorAll('link')tüm bağlantı düğümlerini alır. Bu, DOM öğelerinin dizisini döndürecektir. Bunun javascript'in Array nesnesi olmadığını unutmayın.
2. Array.prototype.forEach.call(linkElements bağlantı elemanları aracılığıyla döngüler
3. element.remove() öğeyi DOM'dan kaldırır

Düz HTML sayfasında sonuç

: aşağıdakilerden ile müfettiş gelen (hatta tek bir css dosyası için) herhangi bir isteği engelleyebilirsiniz
    Sağ tıklama> blok istek URL'ye
> Diğer css dosyalarını devre dışı bırakmadan https://umaar.com/dev-tips/68-block-requests/ O var standart bir denetçi özelliği, eklenti veya numara gerekmez

Firefox'ta en basit yol, Görünüm> Sayfa Stili> Stil Yok menü komutudur. Ancak bu, bazı sunum HTML biçimlendirmelerinin etkilerini de kapatır. Dolayısıyla, @JoelKuiper'in önerdiği şekilde eklentileri kullanmak genellikle daha iyidir; daha fazla esneklik sağlarlar (örneğin, sadece bazı stil sayfalarını kapatmak).

Aslında düşündüğünüzden daha kolay. Herhangi bir tarayıcıda hata ayıklama konsolunu açmak için F12 tuşuna basın. Bu, IE, Firefox ve Chrome için çalışır. Opera hakkında emin değilim. Ardından eleman pencerelerinde CSS'yi yorumlayın. Bu kadar.

Tercih ettiğiniz Tarayıcı Geliştirme aracıyla (ör. Chrome Devtools) HTML'yi incelerken <head>öğeyi bulun ve silin.

Bunun js'yi de kaldıracağına dikkat edin, ancak benim için sayfayı çıplak hale getirmenin en hızlı yolu bu .

Önerilen tüm yanıtlar, yalnızca o sayfa yüklemesi için css'yi ortadan kaldırır. Kullanım durumunuza bağlı olarak, css'i hiç yüklememek isteyebilirsiniz:

Chrome Geliştirici Araçları> Ağ Sekmesi> Söz konusu stil sayfasını sağ tıklayın> engelleme isteği url'si

Herhangi bir eklenti veya başka şeyler istemeyenler için, css'yi devre dışı bırakmak / etkinleştirmek için document.styleSheets'i kullanabiliriz.

// tüm css'yi devre dışı bırakmak için kod

for (const item in document.styleSheets) {
  document.styleSheets[item].disabled=false;
}

Chrome kullanıyorsanız, bir işlev oluşturabilir ve parçacıklarınıza ekleyebilirsiniz. Böylece konsolu herhangi bir site için css'yi etkinleştirmek / devre dışı bırakmak için kullanabilirsiniz.

// Snippet'ler -> DisableCSS

function disableCss(value = true){
  for (const item in document.styleSheets) {
    document.styleSheets[item].disabled=value;
  }  
}

// konsolda

disableCss() // by default is disable
disableCss(false) // to enable