แก้ไขข้อบกพร่องของโค้ดต้นฉบับแทนที่จะใช้กับการแมปแหล่งที่มา

Meggin Kearney

พอล บากาอุส

Twitter หน้าแรก

Sofia Emelianova

GitHub

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

เริ่มต้นใช้งาน Preprocessor

การแมปแหล่งที่มาจากตัวประมวลผลล่วงหน้าจะทำให้เครื่องมือสำหรับนักพัฒนาเว็บโหลดไฟล์ต้นฉบับนอกเหนือจากไฟล์ที่ลดขนาด

Chrome จะเรียกใช้โค้ดที่มีการลดขนาด แต่แผงแหล่งที่มาจะแสดงโค้ดที่คุณเขียน คุณสามารถตั้งค่าเบรกพอยท์และผ่านโค้ดในไฟล์ต้นฉบับ จากนั้นข้อผิดพลาด บันทึก และเบรกพอยท์ทั้งหมดจะแมปโดยอัตโนมัติ

ซึ่งจะแสดงลักษณะการแก้ไขข้อบกพร่องของโค้ดตามที่คุณเขียน ซึ่งตรงข้ามกับโค้ดที่เซิร์ฟเวอร์การพัฒนาของคุณใช้งานและเรียกใช้โดยเบราว์เซอร์

วิธีใช้การแมปแหล่งที่มาในแผงแหล่งที่มา

• ใช้เฉพาะ Preprocessor ที่สร้างการแมปแหล่งที่มาได้
• ตรวจสอบว่าเว็บเซิร์ฟเวอร์ของคุณแสดงแผนที่แหล่งที่มาได้

ใช้ Preprocessor ที่รองรับ

ตัวประมวลผลล่วงหน้าทั่วไปที่ใช้ร่วมกับการแมปแหล่งที่มาจะรวมถึงแต่ไม่จํากัดเพียงรายการต่อไปนี้

• ทรานสปอนเลอร์: Babel
• ผู้รวบรวม: TypeScript และ Dart
• ตัวขยาย: terer
• Bundler และเซิร์ฟเวอร์การพัฒนา: Webpack, Vite, esbuild และ Parcel

สำหรับรายการเพิ่มเติม โปรดดูที่แผนที่แหล่งที่มา: ภาษา เครื่องมือ และข้อมูลอื่นๆ

เปิดใช้การแมปแหล่งที่มาในการตั้งค่า

ใน การตั้งค่า > ค่ากำหนด > แหล่งที่มา อย่าลืมเลือก เปิดใช้การแมปแหล่งที่มา JavaScript

หมายเหตุ: คุณอาจต้องการเลือก เปิดใช้การแมปแหล่งที่มา CSS ด้วย

ตรวจสอบว่าโหลดการแมปแหล่งที่มาสำเร็จแล้วหรือไม่

โปรดดูแหล่งข้อมูลสำหรับนักพัฒนาซอฟต์แวร์: ดูและโหลดการแมปแหล่งที่มาด้วยตนเอง

การแก้ไขข้อบกพร่องด้วยการแมปแหล่งที่มา

หมายเหตุ: บทแนะนำนี้ใช้การสาธิตนี้เป็นตัวอย่าง

เมื่อแผนที่แหล่งที่มาพร้อมใช้งานและเปิดใช้แล้ว คุณสามารถทำสิ่งต่อไปนี้

1. เปิดแหล่งที่มาของเว็บไซต์ในแผงแหล่งที่มา

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

   

3. ตั้งค่าเบรกพอยท์ตามปกติ เช่น จุดตรวจสอบ จากนั้นเรียกใช้โค้ด

   

4. สังเกตว่าตัวแก้ไขจะใส่ลิงก์ไปยังไฟล์ที่ทำให้ใช้งานได้แล้วในแถบสถานะด้านล่าง ในทำนองเดียวกัน ก็จะทำเช่นนี้กับไฟล์ CSS ที่ทำให้ใช้งานได้ด้วย

   

5. เปิดลิ้นชักคอนโซล ในตัวอย่างนี้ถัดจากข้อความของจุดตรวจสอบ คอนโซลจะแสดงลิงก์ไปยังไฟล์ต้นฉบับ ไม่ใช่ลิงก์ที่ทำให้ใช้งานได้แล้ว

   

6. เปลี่ยนประเภทเบรกพอยท์เป็นประเภทปกติ แล้วเรียกใช้โค้ดอีกครั้ง การดำเนินการจะหยุดชั่วคราวในครั้งนี้

   

   โปรดทราบว่าแผงกลุ่มการเรียกใช้จะแสดงชื่อไฟล์ต้นฉบับ ไม่ใช่ไฟล์ที่ทำให้ใช้งานได้แล้ว

7. ในแถบสถานะที่ด้านล่างของตัวแก้ไข ให้คลิกลิงก์ไปยังไฟล์ที่ทำให้ใช้งานได้แล้ว แผงแหล่งที่มาจะนำคุณไปยังไฟล์ที่เกี่ยวข้อง

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

โปรดทราบว่า Editor จะพิมพ์ไฟล์ที่ทำให้ใช้งานได้แล้วโดยอัตโนมัติ แต่ในความเป็นจริง จะมีโค้ดทั้งหมดอยู่ในบรรทัดเดียว ยกเว้นความคิดเห็น //# sourceMappingURL

ตั้งชื่อสาย eval() ด้วย #sourceURL

#sourceURL ช่วยให้คุณแก้ไขข้อบกพร่องได้ง่ายขึ้นเมื่อต้องจัดการกับการเรียกใช้ eval() ตัวช่วยนี้ดูคล้ายกับพร็อพเพอร์ตี้ //# sourceMappingURL มาก สำหรับข้อมูลเพิ่มเติม โปรดดูข้อมูลจำเพาะของแผนที่แหล่งที่มา V3

ความคิดเห็น //# sourceURL=/path/to/source.file จะบอกให้เบราว์เซอร์ค้นหาไฟล์ต้นฉบับเมื่อคุณใช้ eval() ซึ่งจะช่วยให้คุณตั้งชื่อการประเมิน รวมทั้งสคริปต์และรูปแบบในหน้าได้

ทดสอบได้ในหน้าสาธิตนี้

1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บและไปที่แผงแหล่งที่มา
2. ในหน้าเว็บ ให้ป้อนชื่อไฟล์ที่กำหนดเองลงในช่องตั้งชื่อโค้ด:
3. คลิกปุ่มคอมไพล์ การแจ้งเตือนจะปรากฏขึ้นพร้อมยอดรวมที่ประเมินจากแหล่งที่มาของ CoffeeScript
4. ในโครงสร้างไฟล์ในแผงหน้า ให้เปิดไฟล์ใหม่ที่มีชื่อไฟล์ที่กำหนดเองที่คุณป้อน มีโค้ด JavaScript ที่คอมไพล์ซึ่งมีความคิดเห็น // #sourceURL ที่มีชื่อเดิมของไฟล์ต้นฉบับ
5. หากต้องการเปิดไฟล์ต้นฉบับ ให้คลิกลิงก์ในแถบสถานะของเอดิเตอร์