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

Meggin Kearney
Meggin Kearney
Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

ใช้โปรเซสเซอร์ล่วงหน้าที่รองรับ

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

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

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

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

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

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

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

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

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

    ไฟล์ต้นฉบับเปิดในส่วน "เขียนแล้ว"

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

    จุดตรวจสอบที่ตั้งค่าในไฟล์ที่เขียน

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

    ลิงก์ไปยังไฟล์ CSS ที่ทำให้ใช้งานได้แล้วในแถบสถานะ

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

    ข้อความ Console ที่มีลิงก์ไปยังไฟล์ต้นฉบับ

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

    หยุดการดำเนินการชั่วคราวในเบรกพอยท์ปกติ

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

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

ไฟล์ที่ทำให้ใช้งานได้แล้วซึ่งมีความคิดเห็น sourceMappingURL

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

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

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

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

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

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

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

ความคิดเห็น sourceURL และลิงก์ไปยังไฟล์ต้นฉบับในแถบสถานะ