CSS Undefined Variable Checker ใน Chrome ด้วย OffiDocs
CSS ส่วนขยายตัวตรวจสอบตัวแปรที่ไม่ได้กำหนดของ Chrome เว็บสโตร์
รายละเอียด:
เรียกใช้ส่วนขยาย Chrome เว็บสโตร์ออนไลน์ CSS Undefined Variable Checker โดยใช้ OffiDocs Chromium ออนไลน์
คุณเขียน 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 รวมเข้ากับ OffiDocs Chromium ออนไลน์