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

Sofia Emelianova
Sofia Emelianova

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

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

โค้ดที่ผ่านการย่อขนาดและโค้ดต้นฉบับ

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

การแมปแหล่งที่มา

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

การใช้จุดหยุดพักใน DevTools ในไฟล์ต้นฉบับที่เขียน

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

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

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