มีวิธีการดูหน้าเว็บที่ไม่มีสไตล์ใน Chrome หรือไม่?


25

ภายใต้ Firefox, ดู -> สไตล์ของหน้า -> ไม่มีสไตล์อนุญาตให้ดูเพจที่ไม่มีสไตล์ มีประโยชน์สำหรับไซต์ที่ต้องพึ่งพา JS / สไตล์ชีทมากเกินไป (เช่น: Lifehacker)

มีฟังก์ชั่นที่คล้ายกันภายใต้ Chrome ของ Google และ / หรือฉันจะเข้าถึงสิ่งนี้ได้ที่ไหน?

รุ่น 19.0.1084.56 / Ubuntu


วิธีแก้ปัญหาที่ดีที่สุดสำหรับ Chrome คือการใช้ Firefox
wha7ever - Reinstate Monica

คำตอบ:


25

ปิดการใช้งาน CSS สไตล์ชีททั้งหมด

เนื่องจากหน้าที่ทันสมัยส่วนใหญ่จะกำหนดสไตล์ทั้งหมดในไฟล์ CSS ภายนอกซึ่งรวมอยู่ในการ<head>ลบheadแท็กจะเป็นการลบสไตล์ทั้งหมดอย่างมีประสิทธิภาพ (ยกเว้นสไตล์อินไลน์อย่างชัดเจนและสไตล์ที่กำหนดโดยสคริปต์) คลิกขวาที่หน้าเลือกการตรวจสอบจากเมนูบริบทและวางลงในแท็บคอนโซล:

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

และนี่คือเวอร์ชัน bookmarklet ของโค้ดด้านบนซึ่งสามารถวางเป็น URL ของบุ๊กมาร์ก(สลับแถบบุ๊กมาร์กใน Chrome ด้วย+ shift+ bบน Mac หรือctrl+ shift+ bบน Linux / Windows) :

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

คุณสามารถพิมพ์รหัสด้านบนลงในแถบที่อยู่ได้โดยตรง แต่อ่านบันทึกท้ายคำตอบก่อนที่จะทำ .

การลบ<head>สามารถทำได้จากแท็บdevtools Elementsโดยคลิกขวาที่แท็กส่วนหัวและลบออกผ่านเมนูบริบท:

ลบแท็กหัวใน Chrome

หมายเหตุ: การลบแท็กส่วนหัวเป็นวิธีการที่ดุร้ายเพราะมันจะฆ่าทุกรูปแบบ, จาวาสคริปต์, แบบอักษรของเว็บ ฯลฯ และหากเนื้อหาของหน้าเว็บถูกแสดงผลโดยจาวาสคริปต์ก็เป็นไปได้ว่าคุณจะได้หน้าว่าง ในเว็บไซต์ส่วนใหญ่อาจจะให้ผลลัพธ์ที่คาดหวัง

กรณีการใช้งานบ่อยครั้งมากขึ้นคือการลบสิ่งที่น่ารำคาญในหน้าเช่นสี, ระยะขอบ, iframes เป็นต้นในกรณีเช่นนี้ bookmarklet อย่างใดอย่างหนึ่งต่อไปนี้จะให้การควบคุมที่ละเอียดยิ่งขึ้น

ลบสีพื้นหลังขอบช่องว่างภายในความกว้าง

สร้างบุ๊กมาร์กและเพิ่มตัวอย่างต่อไปนี้เป็น 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';}})()

ตอนนี้คุณสามารถคลิกที่คั่นหนังสือของคุณเพื่อล้างสไตล์ CSS ในหน้าปัจจุบันไปยังสิ่งที่อ่านง่ายขึ้น

หมายเหตุ:ในความเป็นจริงเป็นไปได้สำหรับหน้าเว็บที่มี<style>บล็อกอยู่ภายใน<body>แท็ก - มาตรฐาน HTML5 อนุญาตให้สิ่งนี้และเบราว์เซอร์ส่วนใหญ่สนับสนุน จนถึงตอนนี้ไม่ได้เป็นเรื่องธรรมดา แต่เป็นกรอบเว็บที่พัฒนาเราอาจเห็น 'สไตล์ชีทท้องถิ่น' มากขึ้นในเว็บในอนาคต

หากคุณเพียงต้องการปรับปรุงการอ่านแล้วการปิดใช้งาน CSS ทั้งหมดอาจไม่ให้ประสบการณ์ที่ดีที่สุด ในกรณีเช่นนี้ bookmarklet ด้านล่างอาจให้ผลลัพธ์ที่ดีกว่า:

ลบส่วนหัว / ท้ายกระดาษที่ไม่ได้เลื่อน (เพิ่มพื้นที่การอ่าน)

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

ลบ iframes (ฆ่าแบนเนอร์ส่วนใหญ่ ฯลฯ )

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

การทำเช่นนี้จะฆ่าวิดีโอที่ฝังส่วนใหญ่วิดเจ็ตแสดงความคิดเห็น ฯลฯ

ลบภาพทั้งหมด (การค้นหาในโหมดสำนักงาน)

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

หมายเหตุ: สิ่งนี้จะต้องใช้ร่วมกับRemove iframesด้านบนเนื่องจากภาพแบนเนอร์ส่วนใหญ่มักจะอยู่ใน iframes และ bookmarklet นี้ใช้ได้กับเอกสารระดับบนสุดเท่านั้น

สามารถใช้ bookmarklet สำหรับไซต์ที่ไม่แสดงเนื้อหาเมื่อมีการใช้ตัวบล็อกโฆษณา

คุณสามารถใช้Bookmarklet Builderเพื่อยกเลิกการลดขนาดรหัส ( ปุ่มรูปแบบ ) แก้ไขให้เหมาะกับความต้องการของคุณและย่อขนาดกลับมา ( ปุ่มบีบอัด ) ให้เป็นสิ่งที่คุณสามารถวางเป็นที่คั่นหน้า URL

bookmarklet ที่ระบุไว้ด้านบนนี้จะทำงานบนเว็บเบราว์เซอร์มือถือส่วนใหญ่บนทั้ง iOS และ Android เบราว์เซอร์มือถือจะไม่เรียกใช้จาวาสคริปต์จากแถบที่อยู่ แต่คุณสามารถเพิ่มบุ๊กมาร์กวางรหัส js เป็น URL ตั้งป้ายกำกับเช่นcleanจากนั้นเรียกใช้โดยแตะที่รายการในเมนูบุ๊คมาร์ค (สำหรับ IOS safari) หรือพิมพ์cleanในแถบที่อยู่แล้วแตะบุ๊กมาร์กที่เกี่ยวข้องในดรอปดาวน์อัตโนมัติ นี้สามารถปรับปรุงการอ่านสำหรับหน้าเว็บที่ไม่มีโหมดการอ่าน

หมายเหตุ:หากคุณคัดลอกและวาง bookmarklet ด้านบนลงในแถบที่อยู่โดยตรงคุณจะสังเกตเห็นว่าเบราว์เซอร์ลบjavascript:คำนำหน้า - นี่คือคุณลักษณะความปลอดภัยของเบราว์เซอร์ดังนั้นหากคุณต้องการทดสอบ bookmarklets โดยตรงจากแถบที่อยู่คุณจะเห็น จำเป็นต้องเสริมjavascript:ด้วยตนเองก่อนรหัส js

ส่วนขยายของ Chrome

หากคุณกำลังมองหาการขยายโครเมี่ยมแล้วมีuMatrixซึ่งคุณสามารถคลิกคอลัมน์ CSS ที่จะปิดการใช้งานทุกรูปแบบ CSS และและนักพัฒนาเว็บที่ภายใต้แท็บ CSS คุณมีตัวเลือกรูปแบบการปิดใช้งานทั้งหมด


uMatrix (ซึ่งฉันได้ค้นพบอย่างอิสระในช่วงหลายปีที่ผ่านมา) ได้ทำการหลอกลวงบนพื้นฐานของแต่ละไซต์ (หรือหน้าหรือโดเมน) นักพัฒนาเว็บ (ระบุไว้ด้านล่าง) เกินไปเกินไป
dredmorbius

7

คุณสามารถใช้Web Developer extension ได้:

ป้อนคำอธิบายรูปภาพที่นี่


2
ขอบคุณ ดูเหมือนว่าจะทำเคล็ดลับ แม้ว่า Lifehacker จะยังอ่านไม่ได้ ทำงานใน w3m แม้ว่า โรงเรียนเก่าเป็นวิธีที่เรากลิ้งที่นี่
dredmorbius

การบริหารทรัพยากรมนุษย์ ปัญหาคือว่านี่เป็นการตั้งค่าส่วนกลางสำหรับทุกไซต์ / หน้า ฉันเพิ่งผ่านช่วงเวลาไม่กี่นาทีของ "WTF !!!" ทันใดนั้นฉันก็เริ่มเห็นองค์ประกอบของการออกแบบปรากฏขึ้น / หายไปจากหน้าต่างๆในขณะที่ฉันสลับการตั้งค่า Web Developer ต่างๆ ดังนั้นมันค่อนข้างมีประโยชน์ แต่ไม่ทั้งหมด
dredmorbius

@ Dr.EdwardMorbius: แปลก สำหรับฉันนี่เป็นเพียงชั่วคราว แม้แต่การรีเฟรชหน้าจะเปลี่ยนเป็นมุมมองเริ่มต้นของไซต์ แต่ฉันคิดว่านั่นไม่ใช่สิ่งที่คุณต้องการเช่นกันใช่ไหม
Der Hochstapler

ใช่. การสลับสไตล์ชีทสำหรับเซสชันปัจจุบันจะพอเพียง สลับ CSS, JS, คุกกี้และอื่น ๆ สำหรับเว็บไซต์ทั้งหมด น่าเสียดายที่ดูเหมือนจะเป็นสิ่งที่เกิดขึ้น ฉันจะอธิบายประสบการณ์ว่า "น่ารำคาญเล็กน้อย"
dredmorbius

2

ไม่มีรุ่นของสไตล์ไม่มี Chrome (หรือยัง) คุณต้องใช้วิธีอื่นเช่นส่วนขยายอื่น ๆที่สามารถปิดใช้งานสไตล์ได้

คุณสามารถใช้ปิดการใช้งาน Stylesheetsขยายไปยังสไตล์ชีตปิดการใช้งานทั่วไปหรือนักพัฒนาเว็บส่วนขยายเพื่อสลับทุกรูปแบบหรือปิด Penduleยังเป็นส่วนขยายที่เป็นที่นิยมสำหรับวัตถุประสงค์นี้

คุณสามารถปิดการใช้งานสไตล์ด้วยเครื่องมือของนักพัฒนา[1] [2] :

ไอคอนรูปเฟือง -> แท็บ CSS -> ปิดใช้งานลักษณะทั้งหมด


ที่ปรากฏขึ้นเพื่อปิดการใช้งานสไตล์ชีททั้งหมดสำหรับทุกหน้าโดยไม่มีความสามารถในการเปิด / ปิดการใช้งานในแต่ละหน้า ไม่ใช่สิ่งที่ฉันกำลังมองหา
dredmorbius

อันไหน? มีสี่ตัวเลือก
Synetech

ฉันไม่เห็นไอคอนส่วนขยาย ลบทิ้ง
dredmorbius

หือ?
Synetech

ไม่มีไอคอนสำหรับส่วนขยาย "ปิดการใช้งานสไตล์ชีท" ในพื้นที่แจ้งเตือนทางด้านขวาของหน้าต่าง URL วิธีเดียวที่ฉันสามารถจัดการการตั้งค่าได้คือการใช้ประแจ -> เครื่องมือ -> ส่วนขยาย -> ปิดการใช้งานสไตล์ชีท -> ตัวเลือก ไม่ใช่ ... สรีรศาสตร์มาก
dredmorbius

1

หากคุณกำลังทำสิ่งนี้ด้วยเหตุผลความเร็วฉันขอแนะนำทางเลือกอื่น: ลิงค์ 2

เมื่อเบราว์เซอร์เปิดขึ้นมาให้กดgและพิมพ์ URL ที่คุณต้องการไป เบราว์เซอร์นี้มีน้ำหนักเบาตามมาตรฐานที่รองรับ แต่รวดเร็วอย่างน่าอัศจรรย์แม้บนพีซีที่เก่ามาก


1
มันเป็นความเป็นส่วนตัวมากกว่า / รักษาการใช้ JS ให้น้อยที่สุด ฉันมักจะชอบ w3m มากกว่าลิงค์ / ตระกูล elinks ของคอนโซลเบราว์เซอร์ - การยศาสตร์ที่ดีกว่าและฉันค่อนข้างชินกับมัน ใช่ฉันคุ้นเคยกับเบราว์เซอร์คอนโซลที่รวดเร็วและเบา บางเว็บไซต์ก็แค่ใช้งานไม่ได้
dredmorbius

1
Gotcha จริง ๆ แล้วฉันไม่ได้ใช้เวอร์ชันคอนโซล แต่ gui ก็เร็วพอ แต่ใช่คุณพูดถูกบางครั้งหน้าเสียมาก มันจะดีถ้าทุกหน้าเสื่อมโทรมอย่างสง่างาม
เจอร์รี่

2
ฉันได้รับการรู้จักที่จะคมคมบางส่วนและ 'fmt' ในกรณีที่รุนแรง สิ่งนี้ทำให้พระเยซูทารกร้องไห้
dredmorbius

1

ภายใต้ Firefox, ดู -> สไตล์ของหน้า -> ไม่มีสไตล์อนุญาตให้ดูเพจที่ไม่มีสไตล์ มีประโยชน์สำหรับไซต์ที่ต้องพึ่งพา JS / สไตล์ชีทมากเกินไป (เช่น: Lifehacker) มีฟังก์ชั่นที่คล้ายกันภายใต้ Chrome ของ Google และ / หรือฉันจะเข้าถึงสิ่งนี้ได้ที่ไหน? รุ่น 19.0.1084.56 / Ubuntu - ดร. เอ็ดเวิร์ดมอร์เบียส

...

ใช่. การสลับสไตล์ชีทสำหรับเซสชันปัจจุบันจะเพียงพอ การสลับ CSS, JS, คุกกี้ ฯลฯ สำหรับเว็บไซต์ทั้งหมดนั้นถูกต้องแล้ว น่าเสียดายที่ดูเหมือนจะเป็นสิ่งที่เกิดขึ้น ฉันจะอธิบายประสบการณ์ว่า "น่ารำคาญเล็กน้อย" - ดร. เอ็ดเวิร์ดมอร์เบียส

การใช้ไลบรารี jQuery ที่console(Chromium / Chrome, Firefox, Opera) ควรล้างสไตล์ผู้แต่งจากเอกสาร 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

หากต้องการสลับเปิดหรือปิดสไตล์ในเอกสาร HTML สิ่งนี้อาจมีประโยชน์:

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

โหลด jQuery ลงในเอกสารจากไฟล์โลคัลหรือจาก CDN ของ jQuery บันทึกความสำเร็จสถานะบันทึกสไตล์สลับการเปิดหรือปิดสไตล์ผู้เขียนโดยการกดแป้นเว้นวรรคหรือที่คอนโซล

ผ่านการทดสอบใน Chromium / Chrome, Firefox และ Opera สำหรับเอกสาร HTML ในท้องถิ่นและออนไลน์


1

เครื่องมือที่ฉันต้องการในปัจจุบันคือส่วนขยายเบราว์เซอร์ uMatrixซึ่งช่วยให้ควบคุมได้ละเอียดยิ่งขึ้น: ปิดการใช้งาน CSS, JS, รูปภาพหรือคุณสมบัติอื่น ๆ โดยโหลดโดเมนเทียบกับเว็บไซต์ปัจจุบัน การเปลี่ยนแปลงอาจสลับได้อย่างง่ายดายทำถาวรหรือโยนเป็นกฎเริ่มต้น

ที่อยู่นี้มีสไตล์ที่อยู่ส่วนใหญ่ของความต้องการปรับแต่ง as-a-reader ของฉัน Reader-Mode (Firefox) มีแนวโน้มที่จะให้เนื้อหาที่มีสไตล์เหมือนกันอย่างน่าเชื่อถือ

การขยายคำถาม: ใน Chrome / Android ฉันไม่มีตัวเลือกที่ใช้การได้และโซลูชันที่แนะนำข้างต้นไม่ทำงาน


0

รหัส jquery บรรทัดเดียวเท่านั้น ... ใช้

jQuery("head").empty();

หรือในจาวาสคริปต์ที่คุณสามารถใช้ได้

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

ไปที่หน้าเว็บของคุณแล้วกด ctrl + shift + i คุณจะเห็นเมนูเลือกคอนโซลและวางdocument.getElementsByTagName("head")[0].innerText="";รหัสนี้แล้วกด Enter


2
ข้อมูลนี้จะถูกป้อนที่ไหน?
music2myear

ไปที่หน้าเว็บของคุณแล้วกด ctrl + shift + i คุณจะเห็นเมนูเลือกคอนโซลและวางdocument.getElementsByTagName("head")[0].innerText="";รหัสนี้แล้วกด Enter
Vishal choudhary

ไม่จำเป็นต้องอ่านความคิดเห็นเพื่อทำความเข้าใจคำตอบ กรุณาใช้ปุ่มแก้ไขเพื่อเพิ่มข้อมูลนี้ให้กับคำตอบนั้น
music2myear
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.