นักพัฒนาแก้จุดบกพร่ององค์ประกอบ DOM บนหน้าของคุณด้วยหนึ่งบรรทัดของรหัส

คุณต้องดิ้นรนกี่ครั้ง ค้นหาหนึ่งปัญหาที่เฉพาะเจาะจง ล้อเล่นเค้าโครง CSS ของคุณ? จากแท็กปิดที่ขาดหายไปไปจนถึงพี่น้องที่ซ้อนกันไม่ถูกต้องปัญหา CSS นั้นมีค่าเล็กน้อยต่อโหล และด้วย ดีบักเกอร์โครงร่าง CSS นี้, กระบวนการเพียง ได้ง่ายขึ้นมาก.

รหัสหนึ่งบรรทัดนี้จะ สำรวจ DOM และ ร่างแต่ละองค์ประกอบ ด้วยสีที่แตกต่าง วิธีนี้คุณสามารถ มองเห็นได้ดีขึ้น CSS ของคุณทำงานอย่างไร (หรือไม่ทำงาน) และ ตรวจหาพื้นที่ที่มีปัญหาได้อย่างรวดเร็ว.

GitHub ช่วยให้นักพัฒนา บันทึกรหัสเล็กน้อย เรียกว่าจิสต์ ทั้งหมดนี้เป็นโอเพนซอร์ซและฟรีสำหรับ ประหยัดสำหรับการใช้งานของคุณเอง. นั่นเป็นเหตุผลที่ดีบักเกอร์ CSS นี้มีประโยชน์มาก มันรวม ฤทธิ์ที่ทันสมัยของ Chrome DevTools กับ ความเรียบง่ายของ bookmarklets เบราว์เซอร์.

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

ตอนนี้มันเป็นไปได้ที่จะ บันทึกรหัสนี้เป็น bookmarklet ในแถบเครื่องมือเบราว์เซอร์ของคุณ แต่ถ้าคุณเป็นผู้ใช้ Chrome คุณก็สามารถทำได้ บันทึกรหัส JS นี้เป็นข้อมูลโค้ด ซึ่งเรียกใช้ง่ายกว่ามาก.

ข้อมูลโค้ดนี้สามารถ เล่าซ้ำแล้วซ้ำอีก ที่คลิกปุ่ม คุณสามารถ แยกวิเคราะห์ทุกหน้า, เต็มไปด้วยโครงร่าง CSS ที่มีสีสันเหล่านี้สำหรับองค์ประกอบ DOM ของผู้ปกครองและเด็ก ๆ.

อย่างไรก็ตามคุณไม่ควร จำกัด เฉพาะ Chrome เท่านั้น ตัวอย่างนี้ ใช้ได้กับเบราว์เซอร์หลัก ๆ ทั้งหมด, รวมถึง Firefox, Safari, Opera และ Internet Explorer.

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

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