มีวิธีตรวจสอบรูปแบบ CSS ที่ใช้หรือไม่ได้ใช้บนหน้าเว็บหรือไม่?

121

อยากทราบว่า CSS สไตล์ไหนที่กำลังใช้งานบนหน้าเว็บ

css

2

ใช้เบราว์เซอร์ที่มีตัวตรวจสอบ CSS Safari และ Chrome (aka Webkit) ให้สิ่งนี้เป็นส่วนหนึ่งของเครื่องมือสำหรับนักพัฒนา ใน Firefox มีให้โดยปลั๊กอิน Firebug Internet Explorer ไม่มีอะไรคล้ายกันที่ฉันทราบ ผู้ตรวจสอบจะอนุญาตให้คุณเลือกองค์ประกอบคลิกขวาและเลือก "ตรวจสอบองค์ประกอบ" จากนั้นจะแสดงให้คุณเห็นว่าตัวเลือกใดและกฎใดที่ใช้กับองค์ประกอบที่คุณเลือก

— ลี

แถบเครื่องมือของผู้พัฒนา @Lee ie8 ทำงานในลักษณะเดียวกับ firebug ในตัวเลือก css คุณสามารถเลือกและดูรูปแบบที่ใช้บนแฮนด์ด้านขวาได้

— kobe

อาจซ้ำกันของการแยกเฉพาะ css ที่ใช้ในหน้าเฉพาะ

— cweiske

58

ติดตั้งส่วนเสริมการใช้งาน CSSสำหรับ Firebug และเรียกใช้บนหน้านั้น มันจะบอกคุณว่าหน้านั้นใช้สไตล์ไหนและไม่ได้ใช้

— โกเบ
แหล่งที่มา

@ แฮรี่เมื่อคุณติดตั้งปลั๊กอินนี้แล้วมันจะอยู่ในแท็บเป็นส่วนหนึ่งของ firebug ที่คุณมีเน็ตและทั้งหมด //// แจ้งให้เราทราบหากคุณต้องการสิ่งอื่นใด

— kobe

33

Chrome มีสิ่งนี้หรือไม่

— Pedro Luz

3

ดูเหมือนว่าจะใช้งานไม่ได้อีกต่อไปและไม่ได้รับการสนับสนุนอีกต่อไป แต่น่าเสียดาย

— nostromo

1

ระวัง Firebug ไม่ได้รับการดูแลอีกต่อไป ฉันคิดว่าส่วนเสริมนี้ใช้ไม่ได้กับ DevTools ในตัวของ Firefox

— Andrew

คุณสามารถใช้ตัวเลือกการตรวจสอบใน Chrome ในขณะที่กำลังตรวจสอบสิ่งนี้แสดงเฉพาะ css ที่ไม่ได้ใช้ในหน้านั้น ๆ

— Sarath Hari

81

Google Chrome มีสองวิธีในการตรวจสอบ CSS

1. แท็บการตรวจสอบ: > คลิกขวา + ตรวจสอบองค์ประกอบในหน้าค้นหาแท็บ "การตรวจสอบ" และเรียกใช้การตรวจสอบโดยตรวจสอบว่าได้เลือก "ประสิทธิภาพของหน้าเว็บ" แล้ว

แสดงรายการแท็ก CSS ที่ไม่ได้ใช้ทั้งหมด - ดูภาพด้านล่าง

อัปเดต: - - - - - - - - - - - - - หรือ - - - - - - - - - - - -

2. แท็บความครอบคลุม: > คลิกขวา + ตรวจสอบองค์ประกอบบนหน้าค้นหาจุดสามจุดทางด้านขวาสุด (วงกลมในภาพ) และเปิด Console Drawer (หรือกด Esc) จากนั้นคลิกที่จุดสามจุดทางด้านซ้ายในลิ้นชัก (วงกลม ในภาพ) เพื่อเปิดเครื่องมือครอบคลุม

Chrome เปิดตัวเครื่องมือเพื่อดู CSS และ JS ที่ไม่ได้ใช้ - การ อัปเดต Chrome 59 ช่วยให้คุณสามารถเริ่มและหยุดการบันทึก (สี่เหลี่ยมสีแดงในภาพ) เพื่อให้ครอบคลุมประสบการณ์ของผู้ใช้บนหน้าได้ดีขึ้น

แสดง CSS / JS ที่ใช้และไม่ได้ใช้ทั้งหมดในไฟล์ - ดูภาพด้านล่าง

— Cordell
แหล่งที่มา

3

จะดูดีมากว่าตัวไหนใช้เหมือนกัน .... แต่ก็เยี่ยมมากขอบคุณ

— Serj Sagan

เท่าที่ฉันสามารถบอกได้หากคุณต้องการทราบว่าสิ่งใดที่ใช้ทางออกที่ดีที่สุดของคุณคือการติดตั้งปลั๊กอินสำหรับ Chrome - ขออภัย

— Cordell

การอัปเดต Chrome 59 ใหม่ช่วยให้คุณเห็น CSS และ JS ที่ใช้ / ไม่ได้ใช้

— Cordell

Chrome ใช้ไลบรารีใดในการทำสิ่งนี้

— Alexey Shevelyov

1

@UMAR multi-page website coverage == (single-page coverage) * n ที่ n = หน้าในแต่ละเว็บไซต์ การจัดหมวดหมู่เครื่องมือ / คำตอบนี้ว่า "ไร้ประโยชน์" ไม่เป็นประโยชน์ต่อใคร

— Shai Cohen

40

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

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

— Jan Petzold
แหล่งที่มา

3

ฉันไม่แน่ใจว่าเป็น "เครื่องมือตรวจสอบ CSS" ที่คำตอบนี้อ้างอิงนั้นเหมือนกับแท็บการตรวจสอบในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome แต่จะบอกคุณว่ากฎ CSS ใดที่ไม่ได้ใช้ (เช่น "Some.css: 42% ไม่ได้ใช้โดยหน้าปัจจุบัน ")

— Kenny Evitt

11

ลองดูที่UnCSS ช่วยในการสร้างไฟล์ CSS ของ CSS ที่ใช้

— Robert Brisita
แหล่งที่มา

1

นั่นคือโปรแกรมที่ยอดเยี่ยม ขอบคุณ! Rob

— r0berts

1

เครื่องมือเว็บที่ดีสำหรับการลดครั้งเดียว ty

— billynoah

1

นี่มันสุดยอด - UnCSS cannot be run on non-HTML pages, such as templates or PHP files- ไม่เป็นไร .......

— Brian Powell

@ brian-powell ใช่เอาต์พุตเทมเพลตจะต้องถูกสร้างขึ้นก่อน UnCSS จะรู้ได้อย่างไรว่าอะไรจำเป็น?

— Robert Brisita

8

ฉันใช้CSS ขุด มันสร้างมาเพื่อโครเมี่ยม แต่ฉันคิดว่ามันเป็นเครื่องมือที่ยอดเยี่ยม!

— cs.matyi
แหล่งที่มา

ฉันเพิ่งลองสิ่งนี้ - ทำทุกอย่างโดยโทรไปที่ cssdig.com ที่บ้านดังนั้นจึงไม่สามารถดูหรือวิเคราะห์สิ่งที่โฮสต์ในเครื่องได้

— Brilliand

0

ลองใช้เครื่องมือนี้ซึ่งเป็นเพียงสคริปต์ js ง่ายๆhttps://github.com/shashwatsahai/CSSExtractor/เครื่องมือนี้ช่วยในการรับ CSS จากหน้าที่ระบุแหล่งที่มาทั้งหมดสำหรับรูปแบบที่ใช้งานและบันทึกลงใน JSON พร้อมแหล่งที่มาเป็น คีย์และกฎเป็นค่า มันโหลด CSS ทั้งหมดจากลิงค์ href และบอกสไตล์ทั้งหมดที่ใช้จากพวกเขาคุณสามารถแก้ไขโค้ดเพื่อบันทึก css ทั้งหมดลงในไฟล์. css ดังนั้นจึงรวม css ทั้งหมดของคุณ

— ชัชวาลย์สห
แหล่งที่มา

0

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

— มาห์ดีซาฟารี
แหล่งที่มา