เคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บ: แผนที่แหล่งที่มาคืออะไร

Sofia Emelianova

แผนที่แหล่งที่มาช่วยให้โค้ดอ่านได้และแก้ไขข้อบกพร่องได้แม้ว่าจะรวมและลดขนาดแล้วก็ตาม โดยไม่ส่งผลต่อประสิทธิภาพ

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

เครื่องมือจํานวนมากสามารถสร้างซอร์สแมปเพื่อใช้ร่วมกับโค้ดของคุณได้

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

หากต้องการทําความเข้าใจวิธีทํางานของการแมปแหล่งที่มาให้ดียิ่งขึ้น ให้ดูเครื่องมือแสดงภาพการแมปแหล่งที่มา

นอกจากนี้ ไฟล์ซอร์สแมปยังมีส่วนขยายได้ หากคุณสร้างเครื่องมือและเฟรมเวิร์ก ให้ลองรองรับเครื่องมือและเฟรมเวิร์กเหล่านั้น ดูกรณีศึกษา: การแก้ไขข้อบกพร่อง Angular ที่ดีขึ้นด้วยเครื่องมือสำหรับนักพัฒนาเว็บ ซึ่งทีมเครื่องมือสำหรับนักพัฒนาเว็บและ Angular ได้ปรับปรุงประสบการณ์การแก้ไขข้อบกพร่องในเครื่องมือสำหรับนักพัฒนาเว็บด้วยการรองรับส่วนขยาย x_google_ignoreList

ดูข้อมูลเพิ่มเติมได้ที่

• ข้อมูลเบื้องต้นเกี่ยวกับการแมปแหล่งที่มาของ JavaScript
• การแมปแหล่งที่มาคืออะไร
• แก้ไขข้อบกพร่องของโค้ดต้นฉบับแทนที่จะทําให้ใช้งานได้ด้วยแผนที่แหล่งที่มา