CSS ตัวตรวจสอบตัวแปรที่ไม่ได้กำหนดใน Chrome ด้วย OffiDocs

DESCRIPTION

คุณเขียน CSS โดยใช้คุณสมบัติ/ตัวแปรที่กำหนดเองหรือไม่? คุณเคยสะกดคำผิดแล้วมาสังเกตทีหลังว่าผลที่ตามมาคือสีที่ออกมาไม่ถูกต้องหรือไม่? คุณเคยโหยหาเครื่องมือที่จะช่วยคุณติดตามการใช้ตัวแปร CSS ที่ไม่ได้กำหนดไว้หรือไม่? ถ้าอย่างนั้นคุณก็โชคดี เพราะนี่เป็นเพียงเครื่องมือดังกล่าว! ส่วนขยายนี้เพิ่มแท็บให้กับเครื่องมือสำหรับนักพัฒนา Chrome ซึ่งสามารถตรวจสอบหน้าปัจจุบันสำหรับตัวแปร CSS ที่ไม่ได้กำหนดใดๆ ที่ใช้ในนิพจน์ "var()"

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

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

คุณจะเห็นแท็บใหม่ที่ด้านบนของเครื่องมือสำหรับนักพัฒนาชื่อ "CSS Undefined Variable Checker"

แท็บนั้นจะนำคุณไปยัง UI ของส่วนขยายนี้

เริ่มแรก คุณจะเห็นเพียงปุ่มชื่อ "Check for Undefined Variables" และตารางว่าง

การคลิกปุ่มจะเริ่มการวิเคราะห์ในหน้าที่เชื่อมต่อกับ devtools และจะรายงานผลลัพธ์ใดๆ ภายในตาราง

หากไม่พบตัวแปร CSS ที่ไม่ได้กำหนด ตารางจะถูกเติมด้วยข้อความที่ระบุถึงตัวแปรดังกล่าวแทน

ผลลัพธ์ภายในตารางมีสามคอลัมน์

คอลัมน์แรกระบุชื่อของตัวแปรที่ไม่ได้กำหนด

คอลัมน์ถัดไประบุสไตล์ชีตที่พบ และคอลัมน์ที่สามระบุองค์ประกอบบนหน้าที่พบตัวแปรที่ไม่ได้กำหนด

คอลัมน์ที่สามนี้อ้างอิงองค์ประกอบโดยตัวเลือก CSS

หากพบตัวแปรที่ไม่ได้กำหนดภายในสไตล์ชีต คอลัมน์ Selector จะถูกเติมด้วยตัวเลือกสำหรับการประกาศสไตล์ CSS ที่พบตัวแปรนั้น

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

โปรดทราบว่าตัวเลือกที่สร้างขึ้นนี้ไม่รับประกันว่าจะระบุองค์ประกอบที่เป็นปัญหาได้โดยไม่ซ้ำกัน

แต่ละเซลล์ในคอลัมน์ Selector ของตารางผลลัพธ์คือไฮเปอร์ลิงก์

การคลิกแต่ละลิงก์จะเปิดแท็บองค์ประกอบของ devtools และไฮไลต์องค์ประกอบที่มีปัญหาภายในนั้น ช่วยให้คุณติดตามตัวแปรที่ไม่ได้กำหนดได้

หมายเหตุ: ส่วนขยายนี้อาศัย API สำหรับการเข้าถึงข้อมูลสไตล์ชีตซึ่งถูกจำกัดโดยการแบ่งปันทรัพยากรข้ามแหล่งกำเนิด

สไตล์ชีตใดๆ ที่ถูกโหลดในเพจ แต่มาจากต้นทางที่แตกต่างจากตัวเพจเอง และไม่ได้ให้บริการกับส่วนหัวของ Access-Control-Allow-Origin ซึ่งจะอนุญาตให้เข้าถึงได้จากหน้านี้จะไม่ถูกวิเคราะห์โดยส่วนขยายนี้ และจะทำให้แสดงผลผิดพลาด

ข้อผิดพลาดเหล่านี้ไม่ได้หยุดส่วนขยายจากการวิเคราะห์สไตล์อื่นๆ ที่ API เข้าถึงได้

ตรรกะการวิเคราะห์ที่อยู่เบื้องหลังส่วนขยายนี้ยังมีอยู่ในแพ็คเกจ npm ภายใต้ชื่อ @sonatype/undefined-css-variable-checker

ดูhttps://www.

npmjs

com/package/@sonatype/undefined-css-variable-checker

ข้อมูลเพิ่มเติม:

- นำเสนอโดยชุมชนกลุ่ม Chrome Store
- คะแนนเฉลี่ย : 3 ดาว (พอใช้ได้)
- นักพัฒนา อีเมลนี้จะถูกป้องกันจากสแปมบอท แต่คุณต้องเปิดการใช้งานจาวาสคริ

เว็บ CSS Undefined Variable Checker extension รวมเข้ากับ OffiDocs Chromium ออนไลน์