Cara menonaktifkan CSS di Browser untuk tujuan pengujian

Adakah cara agar saya dapat menonaktifkan semua CSS eksternal di browser (Firefox, Chrome ...)?

Saat menggunakan koneksi internet yang lebih lambat, terkadang hanya HTML kosong yang dimuat oleh browser tanpa info CSS. Sepertinya halaman tersebut telah dibiarkan mentah di layar. Anda akan memperhatikan ini dengan StackOverflow juga.

Saya ingin memastikan bahwa halaman web saya muncul dengan baik meskipun file CSS tidak dimuat.

Saya tidak bermaksud untuk mengubah CSS eksternal menjadi sebaris. Tapi saya ingin cara untuk secara eksplisit menonaktifkan semua CSS dari browser sehingga saya dapat memposisikan ulang elemen saya dengan cara yang lebih baik dan mudah dibaca.

Saya tahu saya dapat menghapus entri <link rel = 'stylesheet'>, tetapi bagaimana jika saya memiliki banyak halaman yang ditautkan?

Plugin Pengembang Web untuk Firefox dan Chrome dapat melakukan ini

Setelah Anda menginstal plugin, opsi ini tersedia di menu CSS. Sebagai contoh,CSS > Disable Styles > Disable All Styles

Atau dengan bilah alat pengembang diaktifkan, Anda dapat menekan Alt+Shift+A.

Di Chrome / Chromium Anda dapat melakukan ini di konsol pengembang.

1. Munculkan konsol pengembang dengan ctrl-shift-j atau Menu-> Alat-> Konsol Pengembang.
2. Di dalam konsol pengembang jelajahi ke tab Sumber.
3. Di pojok kiri atas tab ini terdapat ikon dengan segitiga pengungkapan. Klik di atasnya.
4. Jelajahi ke <domain> → css → <file css yang ingin Anda hapus>
5. Sorot semua teks dan tekan delete.
6. Bilas dan ulangi untuk setiap lembar gaya yang ingin Anda nonaktifkan.

Firefox (Win dan Mac)

• Melalui bilah alat menu, pilih: "Tampilan"> "Gaya Halaman"> "Tanpa Gaya"
• Melalui Bilah Alat Pengembang Web, pilih: "CSS"> "Nonaktifkan Gaya"> "Semua Gaya"

Jika Bilah Alat Pengembang Web diinstal, orang dapat menggunakan pintasan keyboard ini: Command+ Shift+ S(Mac) dan Control+ Shift+ S(Win)

• Safari (Mac): Melalui bilah alat menu, pilih "Kembangkan"> "Nonaktifkan Gaya"
• Opera (Win): Melalui menu, pilih "Page"> "Style"> "User Mode"
• Chrome (Menang): Melalui ikon roda gigi, pilih tab "CSS"> "Nonaktifkan Semua Gaya"
• Internet Explorer 8: Melalui menu toolbar, pilih "View"> "Style"> "No Style"
• Internet Explorer 7: melalui menu IE Developer Toolbar: Disable> All CSS
• Internet Explorer 6: Melalui Bilah Alat Aksesibilitas Web, pilih "CSS"> "Nonaktifkan CSS"

Skrip ini bekerja untuk saya (ujung topi ke scrappedcola)

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

gaya sebaris tetap utuh

Memperluas ide scrappedocola / renergy, Anda dapat mengubah JavaScript menjadi bookmarklet yang dijalankan melawan javascript:uri sehingga kode dapat digunakan kembali dengan mudah di beberapa halaman tanpa harus membuka alat pengembang atau menyimpan apa pun di clipboard Anda.

Jalankan saja cuplikan berikut dan seret tautan ke bilah bookmark / favorit Anda:

<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>

• Saya akan menghindari perulangan melalui ribuan elemen pada halaman dengan getElementsByTagName('*')dan harus memeriksa dan bertindak masing-masing secara individual.
• Saya akan menghindari mengandalkan jQuery yang ada di halaman dengan $('style,link[rel="stylesheet"]').remove()javascript tambahan tidak terlalu rumit.

Instal Adblock Plus, lalu tambahkan *.cssaturan di opsi Filter (tab filter khusus). Metode ini hanya memengaruhi stylesheet eksternal . Itu tidak mematikan gaya sebaris.

Nonaktifkan semua CSS eksternal

Metode ini melakukan persis seperti yang Anda minta.

Cara lain untuk mencapai solusi @David Baucum dalam beberapa langkah:

1. Klik kanan -> periksa elemen
2. Klik pada nama stylesheet yang memengaruhi elemen Anda (tepat di sisi kanan deklarasi)
3. Sorot semua teks dan tekan delete.

Ini bisa lebih praktis dalam beberapa kasus.

Karena sebagian besar jawaban tampaknya cukup lama di sini, merujuk item menu yang tampaknya tidak dapat saya temukan di versi browser populer saat ini, berikut cara melakukannya di versi saat ini di Edisi Pengembang Firefox:

• Buka Alat Pengembang ( CTRL + SHIFT + I)
• Pilih tab Style Editor
• Di sana Anda akan melihat semua sumber CSS di dokumen Anda. Anda dapat menonaktifkan masing-masing dengan mengklik ikon mata di sebelahnya.

Untuk halaman yang mengandalkan CSS eksternal (sebagian besar halaman saat ini), solusi sederhana dan andal adalah dengan mematikan headelemen:

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

Klik kanan halaman ini (di Chrome / Firefox), pilih Inspect , tempel kode di konsol devtools dan tekan Enter .

Versi bookmarklet dari kode yang sama yang dapat Anda tempel sebagai URL bookmark:

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

Sekarang mengklik bookmark di bilah Favorit Anda akan menampilkan halaman tanpa lembar gaya css.

Menghapus head tidak akan berfungsi untuk halaman yang menggunakan gaya sebaris.

Jika Anda kebetulan menggunakan Safari di MacOS maka:

1. Buka Safari Preferences ( cmd+ ,) dan di tab Advanced aktifkan kotak centang "Show Develop menu in menu bar".
2. Sekarang di bawah menu Develop Anda akan menemukan opsi Disable Styles .

Saya mencoba di alat Pengembang Chrome dan metode ini hanya valid jika CSS disertakan sebagai file eksternal dan tidak akan berfungsi untuk gaya sebaris.

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

Atau

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

Penjelasan

1. document.querySelectorAll('link')mendapatkan semua node tautan. Ini akan mengembalikan array elemen DOM. Perhatikan bahwa ini bukan objek Array javascript.
2. Array.prototype.forEach.call(linkElements loop melalui elemen tautan
3. element.remove() menghapus elemen dari DOM

Menghasilkan halaman HTML biasa

Anda dapat memblokir permintaan apa pun (bahkan untuk satu file css) dari inspektur dengan yang berikut:
    Klik kanan> blokir URL permintaan
tanpa menonaktifkan file css lainnya> https://umaar.com/dev-tips/68-block-requests/ Ini fitur pemeriksa standar, tidak perlu plugin atau trik

Di Firefox, cara paling sederhana adalah melalui perintah menu View> Page Style> No Style. Tetapi ini juga mematikan efek dari beberapa markup HTML presentasional. Jadi menggunakan plugin seperti yang disarankan oleh @JoelKuiper biasanya lebih baik; mereka memberikan lebih banyak fleksibilitas (misalnya, mematikan hanya beberapa lembar gaya).

Sebenarnya, ini lebih mudah dari yang Anda pikirkan. Di browser apa pun, tekan F12 untuk membuka konsol debug. Ini berfungsi untuk IE, Firefox, dan Chrome. Tidak yakin tentang Opera. Kemudian komentari CSS di jendela elemen. Itu dia.

Saat memeriksa HTML dengan alat Pengembangan Browser yang Anda inginkan (mis. Chrome Devtools) temukan <head>elemen tersebut dan hapus semuanya.

Perhatikan bahwa ini juga akan menghapus js tetapi bagi saya ini adalah cara tercepat untuk membuat halaman telanjang .

Semua jawaban yang disarankan hanya menghilangkan css untuk pemuatan halaman itu. Bergantung pada kasus penggunaan Anda, Anda mungkin tidak ingin memuat css sama sekali:

Alat Pengembang Chrome> Tab Jaringan> Klik kanan pada lembar gaya yang dimaksud> blokir url permintaan

Bagi yang tidak menginginkan plugin atau barang lain, kita bisa menggunakan document.styleSheets untuk menonaktifkan / mengaktifkan css.

// kode untuk menonaktifkan semua css

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

Jika Anda menggunakan chrome, Anda dapat membuat fungsi dan menambahkannya ke cuplikan Anda. Sehingga Anda dapat menggunakan konsol untuk mengaktifkan / menonaktifkan css untuk situs manapun.

// Cuplikan -> NonaktifkanCSS

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

// di konsol

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