แผนที่แหล่งที่มาช่วยให้คุณทำให้โค้ดอ่านและแก้ไขข้อบกพร่องได้แม้ว่าคุณจะรวมและลดขนาดโค้ดแล้ว โดยไม่ส่งผลกระทบต่อประสิทธิภาพ
เมื่อใช้ตัวเปลี่ยนรูปแบบ ตัวลดขนาด และ Bundler ต่างๆ โค้ดที่คุณทำให้ใช้งานได้จะต่างจากโค้ดที่คุณเขียน เพื่อเพิ่มประสิทธิภาพเครือข่าย เครื่องมือเหล่านี้จะบีบอัดโค้ดให้อยู่ในบรรทัดเดียว นำอักขระที่ไม่จำเป็นออก และลดตัวแปรให้สั้นลง
เครื่องมือจำนวนมากสามารถสร้างแผนที่ต้นฉบับเพื่อใช้ร่วมกับโค้ดของคุณได้
Chrome DevTools จะอ่านทั้งโค้ดที่ทำให้ใช้งานได้และการแมปแหล่งที่มา และให้คุณแก้ไขข้อบกพร่องของโค้ดได้ตามปกติ แม้จะมีเบรกพอยท์ก็ตาม
หากต้องการทำความเข้าใจวิธีการทำงานของแผนที่แหล่งที่มาให้ดียิ่งขึ้น โปรดดูเครื่องมือสร้างภาพแผนที่แหล่งที่มา
นอกจากนี้ แผนที่แหล่งที่มายังมีส่วนขยายได้อีกด้วย หากคุณสร้างเครื่องมือและกรอบงาน ให้พิจารณาสนับสนุนเครื่องมือและเฟรมเวิร์กเหล่านั้น โปรดดูกรณีศึกษา: Better Angular Debugging with DevTools ซึ่งทีม DevTools และ Angular ได้ปรับปรุงประสบการณ์การแก้ไขข้อบกพร่องใน DevTools โดยรองรับส่วนขยาย x_google_ignoreList
ดูข้อมูลเพิ่มเติมได้ที่