Apakah ada cara untuk melihat halaman web tanpa gaya di Chrome?

25

Di bawah Firefox, Lihat -> Gaya Halaman -> Tidak Gaya memungkinkan melihat halaman tanpa gaya. Bermanfaat untuk beberapa situs yang terlalu bergantung pada JS / stylesheet (mis: Lifehacker).

Apakah ada fungsi serupa di bawah Google Chrome, dan / atau di mana saya akan mengakses ini?

Versi 19.0.1084.56 / Ubuntu.

google-chrome css dredmorbius
sumber
Solusi terbaik untuk ini di Chrome adalah menggunakan Firefox.
Siapa saja

Jawaban:

25

Nonaktifkan semua style sheet CSS

Mengingat bahwa sebagian besar halaman modern mendefinisikan semua gaya dalam file CSS eksternal yang termasuk dalam <head>, menghapus headtag akan secara efektif menghapus semua gaya (kecuali gaya inline eksplisit dan yang ditetapkan oleh skrip). Klik kanan pada halaman, pilih Periksa dari menu konteks dan tempel ini ke tab Konsol:

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

Dan di sini adalah versi bookmarklet dari kode di atas yang dapat ditempelkan sebagai URL bookmark (beralih bilah bookmark di Chrome dengan ⌘+ shift+ bdi Mac atau ctrl+ shift+ bdi Linux / Windows) :

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

Anda juga dapat mengetikkan kode di atas langsung ke bilah alamat tetapi baca catatan di akhir jawaban sebelum melakukannya. .

Menghapus <head>juga dapat dilakukan dari tab Elemen devtools , dengan mengklik kanan tag kepala dan menghapusnya melalui menu konteks:

hapus tag kepala di Chrome

CATATAN: Menghapus tag kepala sedikit pendekatan brute force karena akan membunuh semua gaya, javascript, font web, dll, dan jika konten halaman dirender oleh javascript maka kemungkinan besar Anda akan mendapatkan halaman kosong. Pada sebagian besar situs mungkin akan memberi Anda hasil yang diharapkan.

Kasing penggunaan yang lebih sering adalah untuk menghapus hal-hal yang mengganggu tertentu pada halaman, seperti warna, margin, iframe, dll. Dalam kasus seperti itu, salah satu bookmarklet berikut akan memberikan kontrol lebih rinci.

Hapus warna, latar belakang, margin, bantalan, lebar

Buat bookmark dan tambahkan snippet berikut sebagai 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';}})()

Sekarang Anda dapat mengklik bookmarklet Anda untuk membersihkan gaya CSS pada halaman saat ini untuk sesuatu yang lebih mudah dibaca.

Catatan: Faktanya, sebuah halaman mungkin memiliki <style>blok di dalam <body>tag - standar HTML5 memungkinkan ini dan sebagian besar browser mendukungnya. Sejauh ini ini bukan praktik umum, tetapi karena kerangka kerja web berkembang, kita mungkin melihat lebih banyak 'style sheet lokal' di web masa depan.

Jika Anda hanya ingin meningkatkan keterbacaan maka menonaktifkan semua CSS mungkin tidak memberikan pengalaman terbaik. Untuk kasus seperti itu, bookmarklet di bawah ini mungkin memberikan hasil yang lebih baik:

Hapus header / footer yang tidak bergulir (menambah area baca)

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

Hapus iframe (bunuh sebagian besar spanduk, dll)

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

Ini juga akan membunuh sebagian besar video tertanam, widget komentar, dll.

Hapus semua gambar (penjelajahan mode kantor)

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

Catatan: yang ini perlu digunakan dalam kombinasi dengan Hapus iframe di atas, karena sebagian besar gambar spanduk biasanya di dalam iframe dan bookmarklet ini hanya berfungsi dengan dokumen tingkat atas.

Bookmarklet juga dapat digunakan untuk situs yang tidak akan menampilkan konten saat pemblokir iklan digunakan.

Anda dapat menggunakan Bookmarklet Builder untuk menghapus kode tersebut ( tombol Format ), mengeditnya sesuai dengan kebutuhan Anda, dan memperkecilnya kembali ( tombol Kompres ) ke sesuatu yang dapat Anda tempelkan sebagai URL bookmark.

Bookmarklets yang tercantum di atas juga akan berfungsi di sebagian besar browser web seluler di iOS dan Android. Peramban seluler tidak akan menjalankan javascript dari bilah alamat, tetapi Anda dapat menambahkan bookmark, menempelkan kode js sebagai URL, mengatur label, misalnya clean, dan kemudian menjalankannya dengan mengetuk item di menu bookmark (untuk iOS safari) atau mengetik cleandi bilah alamat dan kemudian mengetuk bookmark yang sesuai di dropdown sugesti otomatis. Ini dapat meningkatkan keterbacaan untuk halaman yang tidak memiliki mode membaca .

CATATAN: Jika Anda menyalin dan menempel bookmarklet di atas langsung ke bilah alamat, Anda akan melihat bahwa browser menghapusjavascript: awalan - ini adalah fitur keamanan browser, jadi jika Anda ingin menguji bookmarklet langsung dari bilah alamat, maka Anda akan perlu diawali javascript:secara manual sebelum kode js.

Ekstensi Chrome

Jika Anda mencari ekstensi chrome maka ada uMatrix di mana Anda dapat mengklik kolom CSS untuk menonaktifkan semua CSS dan gaya, dan Pengembang Web di mana di bawah tab CSS Anda memiliki opsi Nonaktifkan Semua Gaya .

ccpizza
sumber
uMatrix (yang saya temukan secara independen pada tahun-tahun berikutnya) sebenarnya melakukan trik, berdasarkan situs-situs (atau halaman, atau domain). Pengembang Web (disebutkan di bawah) terlalu bersemangat.
dredmorbius
7

Anda dapat menggunakan ekstensi Pengembang Web untuk itu:

masukkan deskripsi gambar di sini

Der Hochstapler
sumber
2
Terima kasih. Itu tampaknya melakukan trik. Padahal Lifehacker masih belum terbaca. Bekerja di w3m. Sekolah tua adalah cara kita berguling di sini.
dredmorbius
Hrm Masalahnya adalah ini adalah pengaturan global untuk semua situs / halaman. Saya baru saja melalui beberapa saat "WTF !!!" ketika saya tiba-tiba mulai melihat elemen gaya muncul / hilang dari berbagai halaman saat saya beralih berbagai pengaturan Pengembang Web. Jadi itu agak, tapi tidak sepenuhnya, berguna.
dredmorbius
@ Dr.EdwardMorbius: Aneh. Bagi saya, ini hanya sementara. Bahkan menyegarkan halaman kembali ke tampilan default situs. Tapi saya berasumsi itu juga bukan yang Anda inginkan, bukan?
Der Hochstapler
Iya nih. Mematikan gaya lembar untuk sesi saat ini sudah cukup. Alihkan CSS, JS, cookie, dll., Karena semua situs tidak ada. Sayangnya sepertinya itulah yang terjadi. Saya akan menggambarkan pengalaman itu sebagai "agak menjengkelkan".
dredmorbius
2

Tidak ada versi Chrome dari Gaya Tidak (belum?), Jadi Anda harus menggunakan metode lain , seperti beberapa ekstensi lain yang dapat menonaktifkan gaya.

Anda dapat menggunakan ekstensi Nonaktifkan Stylesheets untuk menonaktifkan stylesheet secara umum atau ekstensi Pengembang Web untuk mengaktifkan atau menonaktifkan semua gaya. Pendule juga merupakan ekstensi populer untuk tujuan ini.

Anda juga dapat menonaktifkan gaya dengan Alat Pengembang [1] [2] :

Ikon Gear -> Tab CSS -> Nonaktifkan Semua Gaya

Synetech
sumber
Itu tampaknya menonaktifkan semua stylesheet untuk semua halaman, tanpa kemampuan untuk mengaktifkan / menonaktifkannya pada halaman tertentu. Bukan yang saya cari.
dredmorbius
Yang mana? Ada empat opsi.
Synetech
Saya tidak melihat ikon ekstensi. Dihapus itu.
dredmorbius
Ya?
Synetech
Tidak ada ikon untuk ekstensi "Nonaktifkan Lembar Gaya" di area pemberitahuan di sebelah kanan jendela URL. Satu-satunya cara saya bisa mengelola pengaturan adalah menavigasi melalui Kunci Inggris -> Alat -> Ekstensi -> Nonaktifkan Stylesheets -> Opsi. Tidak ... sangat ergodinamik.
dredmorbius
1

Jika Anda melakukan ini karena alasan kecepatan maka dapatkah saya menyarankan alternatif: Tautan 2

Saat browser terbuka tekan gdan ketik url yang ingin Anda tuju. Browser ini ringan pada standar yang didukungnya, tetapi sangat cepat bahkan pada PC yang sangat tua.

Gerry
sumber
1
Ini lebih merupakan privasi / menjaga penggunaan JS seminimal mungkin. Saya cenderung lebih suka w3m daripada keluarga tautan / elinks dari browser konsol - ergonomi yang lebih baik dan saya cukup terbiasa dengannya. Ya, saya sangat akrab dengan seberapa cepat dan ringannya browser konsol. Beberapa situs hanya rusak biasa saja.
dredmorbius
1
Gotcha. Saya sebenarnya tidak menggunakan versi konsol, tetapi gui seperti itu sama cepatnya. Tapi ya, Anda benar, terkadang halaman sangat rusak. Akan lebih bagus jika semua halaman terdegradasi dengan anggun.
Gerry
2
Saya telah dikenal menggunakan lynx, sed sed, dan 'fmt' dalam kasus-kasus ekstrem. Ini membuat bayi Yesus menangis.
dredmorbius
1

Di bawah Firefox, Lihat -> Gaya Halaman -> Tidak Gaya memungkinkan melihat halaman tanpa gaya. Bermanfaat untuk beberapa situs yang terlalu bergantung pada JS / stylesheet (mis: Lifehacker). Apakah ada fungsi serupa di bawah Google Chrome, dan / atau di mana saya akan mengakses ini? Versi 19.0.1084.56 / Ubuntu. - Dr. Edward Morbius

...

Iya nih. Mematikan gaya lembar untuk sesi saat ini sudah cukup. Mengalihkan CSS, JS, cookie, dll., Karena semua situs tidak ada. Sayangnya sepertinya itulah yang terjadi. Saya akan menggambarkan pengalaman itu sebagai "agak menjengkelkan". - Dr. Edward Morbius

Menggunakan perpustakaan jQuery, at console(Chromium / Chrome, Firefox, Opera) harus menghapus gaya penulis dari dokumen 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

Untuk mengaktifkan atau menonaktifkan gaya dalam dokumen HTML, ini mungkin berguna:

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

Memuat jQuery ke dalam dokumen, baik dari file lokal atau dari CDN jQuery, keberhasilan log, status gaya log, mengaktifkan atau menonaktifkan gaya penulis dengan keydown bilah spasi atau di konsol.

Diuji dalam Chromium / Chrome, Firefox dan Opera untuk dokumen HTML lokal dan online.

guest271314
sumber
1

Alat saya saat ini lebih disukai untuk ini adalah ekstensi browser uMatrix , yang memungkinkan kontrol bahkan lebih halus: menonaktifkan CSS, JS, gambar, atau fitur lainnya, dengan memuat domain, relatif terhadap situs web ini. Perubahan dapat dengan mudah diubah, dibuat permanen, atau dilemparkan sebagai aturan default.

Ini dan Alamat gaya sebagian besar kebutuhan kustomisasi saya sebagai pembaca. Mode Pembaca (Firefox) cenderung memberikan konten dengan gaya yang seragam dengan cukup andal.

Memperluas pertanyaan: Di Chrome / Android, saya tidak memiliki opsi yang layak, dan solusi yang disarankan di atas tidak berfungsi.

dredmorbius
sumber
0

hanya satu baris kode jquery ... gunakan 

jQuery("head").empty();

atau dalam javascripts yang dapat Anda gunakan 

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

pergi ke halaman web Anda dan kemudian tekan ctrl + shift + i Anda akan melihat menu pilih konsol dan tempel document.getElementsByTagName("head")[0].innerText="";kode ini dan kemudian tekan enter

Vishal choudhary
sumber
2
Di mana informasi ini dimasukkan?
music2myear
goto halaman web Anda dan kemudian tekan ctrl + shift + saya Anda akan melihat menu pilih konsol dan tempel document.getElementsByTagName("head")[0].innerText="";kode ini dan kemudian tekan enter
Vishal choudhary
Seharusnya tidak perlu membaca komentar untuk memahami jawaban. Silakan gunakan tombol EDIT untuk menambahkan informasi ini ke jawabannya sendiri.
music2myear