ทำให้โค้ดฝั่งไคลเอ็นต์อ่านได้ง่ายและแก้ไขข้อบกพร่องได้แม้จะได้รวม ลดขนาด หรือคอมไพล์แล้ว ได้ ใช้การแมปแหล่งที่มาเพื่อแมปซอร์สโค้ดกับโค้ดที่คอมไพล์แล้วในแผงแหล่งที่มา
เริ่มต้นใช้งาน Preprocessor
การแมปแหล่งที่มาจากตัวประมวลผลล่วงหน้าทำให้เครื่องมือสำหรับนักพัฒนาเว็บโหลดไฟล์ต้นฉบับนอกเหนือจากไฟล์ที่ลดขนาดลง
Chrome จะเรียกใช้โค้ดที่ลดขนาดลง แต่แผงแหล่งที่มาจะแสดงโค้ดที่คุณเขียนขึ้นมา คุณสามารถตั้งค่าเบรกพอยท์และขั้นตอนผ่านโค้ดในไฟล์ต้นฉบับ แล้วข้อผิดพลาด บันทึก และเบรกพอยท์ทั้งหมดจะแมปโดยอัตโนมัติ
ซึ่งจะทำให้คุณเห็นการดีบักโค้ดตามที่คุณเขียนไว้ แทนที่จะเป็นโค้ดที่เซิร์ฟเวอร์การพัฒนาของคุณแสดงและดำเนินการโดยเบราว์เซอร์
วิธีใช้การแมปแหล่งที่มาในแผงแหล่งที่มา
- ใช้เฉพาะตัวประมวลผลล่วงหน้าที่สร้างการแมปแหล่งที่มาได้
- ตรวจสอบว่าเว็บเซิร์ฟเวอร์สามารถแสดงการแมปแหล่งที่มาได้
ใช้โปรเซสเซอร์ล่วงหน้าที่รองรับ
ตัวประมวลผลล่วงหน้าทั่วไปที่ใช้ร่วมกับการแมปแหล่งที่มารวมถึงแต่ไม่จำกัดเพียงรายการต่อไปนี้
- หม้อแปลง: Babel
- คอมไพเลอร์: TypeScript และ Dart
- ตัวขยาย: terser
- Bundler และเซิร์ฟเวอร์การพัฒนา: Webpack, Vite, esbuild และ Parcel
โปรดดูรายการเพิ่มเติมที่หัวข้อแผนที่แหล่งที่มา: ภาษา เครื่องมือ และข้อมูลอื่นๆ
เปิดใช้การแมปแหล่งที่มาในการตั้งค่า
ใน 
การตั้งค่า > ค่ากำหนด > แหล่งที่มา โปรดตรวจสอบ
การแมปแหล่งที่มา JavaScript
ตรวจสอบว่าโหลดการแมปแหล่งที่มาสำเร็จหรือไม่
โปรดดูที่แหล่งข้อมูลสำหรับนักพัฒนาซอฟต์แวร์: ดูและโหลดการแมปแหล่งที่มาด้วยตนเอง
การแก้ไขข้อบกพร่องด้วยการแมปแหล่งที่มา
หากการแมปแหล่งที่มาพร้อมและเปิดใช้แล้ว คุณจะทําสิ่งต่อไปนี้ได้
- เปิดแหล่งที่มาของเว็บไซต์ในแผงแหล่งที่มา
หากต้องการโฟกัสเฉพาะโค้ดที่คุณเขียน ให้จัดกลุ่มไฟล์ที่เขียนและทำให้ใช้งานได้แล้วในแผนผังไฟล์ จากนั้นขยายส่วน
เขียนแล้ว และเปิดไฟล์ต้นฉบับในเครื่องมือแก้ไข
ตั้งค่าเบรกพอยท์ตามปกติ เช่น logpoint จากนั้นเรียกใช้โค้ด
สังเกตว่าเครื่องมือแก้ไขจะเพิ่มลิงก์ไปยังไฟล์ที่ทำให้ใช้งานได้แล้วในแถบสถานะที่ด้านล่าง และเช่นเดียวกันกับไฟล์ CSS ที่ทำให้ใช้งานได้
เปิดลิ้นชักคอนโซล ในตัวอย่างนี้ Console จะแสดงลิงก์ไปยังไฟล์ต้นฉบับถัดจากข้อความของจุดตรวจสอบ ไม่ใช่ไฟล์ที่ทำให้ใช้งานได้
เปลี่ยนประเภทเบรกพอยท์เป็นประเภทเบรกพอยท์ทั่วไปแล้วเรียกใช้โค้ดอีกครั้ง การดำเนินการจะหยุดชั่วคราว
โปรดทราบว่าแผงสแต็กการเรียกใช้จะแสดงชื่อไฟล์ต้นฉบับ ไม่ใช่ไฟล์ที่มีการทำให้ใช้งานได้
ในแถบสถานะที่ด้านล่างของตัวแก้ไข ให้คลิกลิงก์ไปยังไฟล์ที่ทำให้ใช้งานได้แล้ว แผงแหล่งที่มาจะนำคุณไปยังไฟล์ที่เกี่ยวข้อง
เมื่อคุณเปิดไฟล์ที่ทำให้ใช้งานได้แล้ว เครื่องมือสำหรับนักพัฒนาเว็บจะแจ้งให้ทราบหากพบความคิดเห็น //# sourceMappingURL และไฟล์ต้นฉบับที่เกี่ยวข้อง
จะเห็นว่าเครื่องมือแก้ไขจะพิมพ์ไฟล์ที่ใช้งานโดยอัตโนมัติ ในความเป็นจริงจะมีโค้ดทั้งหมดในบรรทัดเดียว ยกเว้นความคิดเห็นที่ //# sourceMappingURL
ตั้งชื่อสาย eval() ด้วย #sourceURL
#sourceURL ช่วยให้คุณแก้ไขข้อบกพร่องได้ง่ายขึ้น
เมื่อต้องรับมือกับ eval() สาย ผู้ช่วยนี้ดูคล้ายกับพร็อพเพอร์ตี้ //# sourceMappingURL มาก สำหรับข้อมูลเพิ่มเติม โปรดดูข้อกำหนดของการแมปแหล่งที่มา V3
ความคิดเห็นที่ //# sourceURL=/path/to/source.file จะบอกให้เบราว์เซอร์มองหาไฟล์ต้นฉบับเมื่อคุณใช้ eval() ซึ่งจะช่วยให้คุณตั้งชื่อการประเมิน รวมถึงสคริปต์และรูปแบบในหน้าได้
ทดสอบได้ในหน้าสาธิตนี้
- เปิดเครื่องมือสำหรับนักพัฒนาเว็บแล้วไปที่แผงแหล่งที่มา
- ในหน้านั้น ให้ป้อนชื่อไฟล์ตามต้องการลงในช่องป้อนข้อมูลตั้งชื่อโค้ด:
- คลิกปุ่มคอมไพล์ การแจ้งเตือนจะปรากฏขึ้นพร้อมผลรวมที่ประเมินจากแหล่งที่มาของ CoffeeScript
- ในแผนผังไฟล์ในแผงหน้า ให้เปิดไฟล์ใหม่ด้วยชื่อไฟล์ที่กำหนดเองที่คุณป้อน ซึ่งประกอบด้วยโค้ด JavaScript ที่คอมไพล์ความคิดเห็น
// #sourceURLพร้อมชื่อเดิมของไฟล์ต้นฉบับ - หากต้องการเปิดไฟล์ต้นฉบับ ให้คลิกลิงก์ในแถบสถานะของตัวแก้ไข
