วิธีปิดการใช้งาน CSS ในเบราว์เซอร์เพื่อการทดสอบ

มีวิธีใดบ้างที่ฉันสามารถปิดการใช้งาน CSS ภายนอกทั้งหมดในเบราว์เซอร์ (Firefox, Chrome ... )

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

ฉันต้องการตรวจสอบให้แน่ใจว่าหน้าเว็บของฉันปรากฏขึ้นแม้ว่าจะไม่ได้โหลดไฟล์ CSS ก็ตาม

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

ฉันรู้ว่าฉันสามารถลบรายการ <link rel = 'stylesheet'> ได้ แต่จะเกิดอะไรขึ้นถ้าฉันมีหน้าที่เชื่อมโยงจำนวนมาก

ปลั๊กอินนักพัฒนาเว็บสำหรับFirefoxและChromeสามารถทำได้

เมื่อคุณติดตั้งปลั๊กอินแล้วตัวเลือกจะมีอยู่ในเมนู CSS ตัวอย่างเช่น,CSS > Disable Styles > Disable All Styles

Alt+Shift+Aอีกทางเลือกหนึ่งที่มีแถบเครื่องมือนักพัฒนาที่เปิดใช้งานคุณสามารถกด

ใน Chrome / Chromium คุณสามารถทำได้ในคอนโซลนักพัฒนาซอฟต์แวร์

1. เปิดคอนโซลนักพัฒนาโดย ctrl-shift-j หรือ Menu-> Tools-> Developer Console
2. ภายในคอนโซลนักพัฒนาให้เรียกดูแท็บแหล่งที่มา
3. ที่มุมบนซ้ายของแท็บนี้จะมีไอคอนสามเหลี่ยมเปิดเผย คลิกที่มัน
4. เรียกดู <domain> → css → <css ไฟล์ที่คุณต้องการกำจัด>
5. ไฮไลต์ข้อความทั้งหมดแล้วกดลบ
6. ล้างและทำซ้ำสำหรับแต่ละสไตล์ชีตที่คุณต้องการปิดใช้งาน

Firefox (Win และ Mac)

• ผ่านแถบเครื่องมือเมนูเลือก: "View"> "Page Style"> "No Style"
• ผ่านแถบเครื่องมือนักพัฒนาเว็บเลือก: "CSS"> "ปิดใช้งานสไตล์"> "สไตล์ทั้งหมด"

หากติดตั้งแถบเครื่องมือ Web Dev ผู้อื่นจะสามารถใช้แป้นพิมพ์ลัดนี้ได้: Command+ Shift+ S(Mac) และControl+ Shift+ S(Win)

• Safari (Mac): ผ่านแถบเครื่องมือเมนูเลือก "พัฒนา"> "ปิดใช้งานสไตล์"
• Opera (Win): ผ่านเมนูเลือก "Page"> "Style"> "User Mode"
• Chrome (Win): ผ่านไอคอนรูปเฟืองเลือกแท็บ "CSS"> "ปิดใช้งานสไตล์ทั้งหมด"
• Internet Explorer 8: ผ่านแถบเครื่องมือเมนูเลือก "View"> "Style"> "No Style"
• Internet Explorer 7: ผ่านเมนูแถบเครื่องมือนักพัฒนา IE: ปิดใช้งาน> CSS ทั้งหมด
• Internet Explorer 6: ผ่านแถบเครื่องมือการเข้าถึงเว็บเลือก "CSS"> "ปิดการใช้งาน CSS"

สคริปต์นี้ใช้ได้กับฉัน (ปลายหมวกถึง 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]); };

สไตล์อินไลน์ยังคงเหมือนเดิม

เมื่อขยายความคิดของ scrappedocola / renergy คุณสามารถเปลี่ยนJavaScript ให้เป็น bookmarkletที่ดำเนินการกับjavascript:uri เพื่อให้โค้ดสามารถใช้ซ้ำได้อย่างง่ายดายในหลาย ๆ หน้าโดยไม่ต้องเปิดเครื่องมือ dev หรือเก็บอะไรไว้ในคลิปบอร์ดของคุณ

เพียงแค่เรียกใช้ข้อมูลโค้ดต่อไปนี้แล้วลากลิงก์ไปที่บุ๊กมาร์ก / แถบรายการโปรดของคุณ:

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

• ฉันจะหลีกเลี่ยงการวนซ้ำองค์ประกอบหลายพันรายการในหน้าgetElementsByTagName('*')และต้องตรวจสอบและดำเนินการทีละรายการ
• ฉันจะหลีกเลี่ยงการพึ่งพา jQuery ที่มีอยู่ในหน้า$('style,link[rel="stylesheet"]').remove()เมื่อ javascript พิเศษไม่ยุ่งยากมากเกินไป

ติดตั้ง Adblock Plus จากนั้นเพิ่ม*.cssกฎในตัวเลือกตัวกรอง (แท็บตัวกรองแบบกำหนดเอง) วิธีนี้มีผลกับสไตล์ชีตภายนอกเท่านั้น ไม่ปิดรูปแบบอินไลน์

ปิดการใช้งาน CSS ภายนอกทั้งหมด

วิธีนี้ทำตามที่คุณถามทุกประการ

อีกวิธีในการบรรลุโซลูชันของ @David Baucum ในขั้นตอนน้อยลง:

1. คลิกขวา -> ตรวจสอบองค์ประกอบ
2. คลิกชื่อสไตล์ชีตที่มีผลกับองค์ประกอบของคุณ (ทางด้านขวาของการประกาศ)
3. ไฮไลต์ข้อความทั้งหมดแล้วกดลบ

อาจจะสะดวกกว่าในบางกรณี

เนื่องจากคำตอบส่วนใหญ่ดูเหมือนจะค่อนข้างเก่าที่นี่การอ้างอิงรายการเมนูที่ฉันดูเหมือนจะไม่พบในเบราว์เซอร์ยอดนิยมเวอร์ชันปัจจุบันนี่คือวิธีการทำในเวอร์ชันปัจจุบันใน Firefox Developer Edition:

• เปิดเครื่องมือสำหรับนักพัฒนา ( CTRL + SHIFT + I)
• เลือกแท็บ Style Editor
• คุณจะเห็นแหล่งที่มาทั้งหมดของ CSS ในเอกสารของคุณ คุณสามารถปิดการใช้งานแต่ละรายการได้โดยคลิกไอคอนรูปดวงตาที่อยู่ข้างๆ

สำหรับหน้าเว็บที่ใช้ CSS ภายนอก (ปัจจุบันหน้าส่วนใหญ่) วิธีแก้ปัญหาที่ง่ายและเชื่อถือได้คือการฆ่าheadองค์ประกอบ:

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

คลิกขวาที่หน้านี้ (ใน Chrome / Firefox) เลือกตรวจสอบวางโค้ดในคอนโซล devtools และกดEnter

รหัส bookmarklet รุ่นเดียวกับที่คุณสามารถวางเป็น URL ของบุ๊กมาร์ก:

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

ตอนนี้การคลิกที่บุ๊กมาร์กในแถบรายการโปรดของคุณจะแสดงเพจโดยไม่มีสไตล์ชีท css

การถอดส่วนหัวจะใช้ไม่ได้กับเพจที่ใช้สไตล์อินไลน์

หากคุณใช้ Safari บน MacOS แล้ว:

1. เปิดการตั้งค่า Safari ( cmd+ ,) และในแท็บขั้นสูงให้เปิดใช้งานช่องทำเครื่องหมาย "แสดงเมนูการพัฒนาในแถบเมนู"
2. ตอนนี้ภายใต้เมนูพัฒนาคุณจะพบตัวเลือกปิดการใช้งานสไตล์

ฉันลองใช้เครื่องมือสำหรับนักพัฒนา Chrome แล้วและวิธีนี้ใช้ได้ก็ต่อเมื่อรวม CSS เป็นไฟล์ภายนอกและจะใช้ไม่ได้กับสไตล์อินไลน์

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

หรือ

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

คำอธิบาย

1. document.querySelectorAll('link')รับโหนดลิงก์ทั้งหมด สิ่งนี้จะส่งคืนอาร์เรย์ขององค์ประกอบ DOM โปรดทราบว่านี่ไม่ใช่ Array object ของ javascript
2. Array.prototype.forEach.call(linkElements ลูปผ่านองค์ประกอบลิงก์
3. element.remove() ลบองค์ประกอบออกจาก DOM

ส่งผลให้หน้า HTML ธรรมดา

คุณสามารถปิดกั้นการร้องขอใด ๆ (ถึงแม้จะเป็นไฟล์เดียว CSS) จากการตรวจสอบกับต่อไปนี้:
    คลิกขวา> บล็อก URL คำขอ
โดยไม่ต้องปิดการใช้งานไฟล์ CSS อื่น ๆ > https://umaar.com/dev-tips/68-block-requests/ มัน คุณสมบัติตัวตรวจสอบมาตรฐานไม่จำเป็นต้องใช้ปลั๊กอินหรือลูกเล่น

ใน Firefox วิธีที่ง่ายที่สุดคือใช้คำสั่งเมนู View> Page Style> No Style แต่สิ่งนี้ยังปิดผลกระทบของมาร์กอัป HTML ในการนำเสนอ ดังนั้นการใช้ปลั๊กอินตามที่ @JoelKuiper แนะนำมักจะดีกว่า พวกเขาให้ความยืดหยุ่นมากขึ้น (เช่นการปิดสไตล์ชีตเพียงบางส่วน)

จริงๆแล้วง่ายกว่าที่คิด ในเบราว์เซอร์ใด ๆ ให้กด F12 เพื่อเปิดคอนโซลการแก้ปัญหา ใช้ได้กับ IE, Firefox และ Chrome ไม่แน่ใจเกี่ยวกับ Opera จากนั้นแสดงความคิดเห็นเกี่ยวกับ CSS ในหน้าต่างองค์ประกอบ แค่นั้นแหละ.

ในขณะที่ตรวจสอบ HTML ด้วยเครื่องมือการพัฒนาเบราว์เซอร์ที่คุณต้องการ (เช่น Chrome Devtools) ให้ค้นหา<head>องค์ประกอบและลบออกเลย

แจ้งให้ทราบว่าเรื่องนี้ยังจะลบ jsแต่สำหรับฉันมันเป็นวิธีที่เร็วที่สุดที่จะได้รับหน้าเปลือยกาย

คำตอบที่แนะนำทั้งหมดเป็นเพียงการกำจัด css สำหรับการโหลดหน้านั้น ขึ้นอยู่กับการใช้งานของคุณคุณอาจไม่ต้องการโหลด css เลย:

เครื่องมือ Chrome Dev> แท็บเครือข่าย> คลิกขวาที่สไตล์ชีตที่เป็นปัญหา> URL คำขอบล็อก

สำหรับผู้ที่ไม่ต้องการ Plugin หรือสิ่งอื่น ๆ เราสามารถใช้ document.styleSheets เพื่อปิด / เปิดใช้งาน css

// รหัสเพื่อปิดการใช้งาน css ทั้งหมด

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

หากคุณใช้ chrome คุณสามารถสร้างฟังก์ชันและเพิ่มลงในข้อมูลโค้ดของคุณได้ เพื่อให้คุณสามารถใช้คอนโซลเพื่อเปิด / ปิด css สำหรับไซต์ใด ๆ

// Snippets -> DisableCSS

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

// ในคอนโซล

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