ช่วยให้โค้ดฝั่งไคลเอ็นต์อ่านได้และแก้ไขข้อบกพร่องได้แม้ว่าคุณจะรวม บีบอัด หรือคอมไพล์โค้ดแล้วก็ตาม ใช้แผนที่แหล่งที่มาเพื่อจับคู่ซอร์สโค้ดกับโค้ดที่คอมไพล์แล้วในแผงแหล่งที่มา
เริ่มต้นใช้งานโปรแกรมประมวลผลข้อมูลล่วงหน้า
แผนที่แหล่งที่มาจากโปรแกรมประมวลผลข้อมูลล่วงหน้าจะทำให้เครื่องมือสำหรับนักพัฒนาเว็บโหลดไฟล์ต้นฉบับเพิ่มเติมจากไฟล์ที่ผ่านการย่อขนาด
Chrome จะเรียกใช้โค้ดที่ผ่านการย่อขนาดจริง แต่แผงแหล่งที่มาจะแสดงโค้ดที่คุณเขียน คุณสามารถตั้งจุดหยุดพักและดูโค้ดในไฟล์ต้นฉบับทีละขั้นตอนได้ โดยข้อผิดพลาด บันทึก และจุดหยุดพักทั้งหมดจะได้รับการแมปโดยอัตโนมัติ
ซึ่งจะทำให้คุณเห็นภาพการแก้ไขข้อบกพร่องของโค้ดขณะเขียน ต่างจากโค้ดที่เซิร์ฟเวอร์สำหรับนักพัฒนาซอฟต์แวร์แสดงและเบราว์เซอร์เรียกใช้
วิธีใช้แผนที่แหล่งที่มาในแผงแหล่งที่มา
- ใช้เฉพาะโปรแกรมประมวลผลข้อมูลล่วงหน้าที่สามารถสร้างแผนที่ซอร์สโค้ดได้
- ยืนยันว่าเว็บเซิร์ฟเวอร์แสดงแผนที่ซอร์สโค้ดได้
ใช้โปรแกรมประมวลผลข้อมูลล่วงหน้าที่รองรับ
โปรแกรมประมวลผลข้อมูลก่อนการคอมไพล์ทั่วไปที่ใช้ร่วมกับแผนที่ซอร์สโค้ดมีดังนี้
- เครื่องมือแปลงภาษา: Babel
- คอมไพเลอร์: TypeScript และ Dart
- ตัวย่อ: terser
- เครื่องมือรวมและเซิร์ฟเวอร์สำหรับนักพัฒนาซอฟต์แวร์: Webpack, Vite, esbuild และ Parcel
ดูรายการเพิ่มเติมได้ที่แผนที่แหล่งที่มา: ภาษา เครื่องมือ และข้อมูลอื่นๆ
เปิดใช้การแมปแหล่งที่มาในการตั้งค่า
ใน 
การตั้งค่า > ค่ากําหนด > แหล่งที่มา ให้เลือก 
แผนภาพแหล่งที่มาของ JavaScript
ตรวจสอบว่าการโหลดแผนที่แหล่งที่มาสําเร็จหรือไม่
ดูแหล่งข้อมูลสําหรับนักพัฒนาซอฟต์แวร์: ดูและโหลดแผนที่แหล่งที่มาด้วยตนเอง
การแก้ไขข้อบกพร่องด้วยซอร์สแมป
เมื่อ Source Map พร้อมใช้งานและเปิดใช้แล้ว คุณจะทำสิ่งต่อไปนี้ได้
- เปิดแหล่งที่มาของเว็บไซต์ในแผงแหล่งที่มา
หากต้องการมุ่งเน้นเฉพาะโค้ดที่คุณเขียน ให้จัดกลุ่มไฟล์ที่เขียนและที่ติดตั้งใช้งานไว้ในโครงสร้างไฟล์ จากนั้นขยายส่วน
Authored และเปิดไฟล์ต้นฉบับในเครื่องมือแก้ไข