จะดีบัก JavaScript ที่โหลดแบบไดนามิก (ด้วย jQuery) ในตัวดีบักเกอร์ของเบราว์เซอร์ได้อย่างไร?

สคริปต์ที่เพิ่มแบบไดนามิกจะไม่ปรากฏในส่วนสคริปต์ของดีบักเกอร์ของเบราว์เซอร์

คำอธิบาย:

ฉันจำเป็นต้องใช้และได้ใช้

if( someCondition == true ){
   $.getScript("myScirpt.js", function() {
       alert('Load Complete');
       myFunction();
   });
}

เพื่อให้ myScript.js สามารถโหลดได้แบบไดนามิกเมื่อตรงตามเงื่อนไขบางอย่าง ... และ myFunction สามารถเรียกได้หลังจากโหลดสคริปต์ทั้งหมดแล้วเท่านั้น ...

แต่เบราว์เซอร์ไม่แสดง myScript.js ที่โหลดแบบไดนามิกในส่วนสคริปต์ของดีบักเกอร์

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

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

//# sourceURL=filename.js

ไฟล์นี้จะแสดงใน "แหล่งที่มาของ" filename.jsแท็บ จากประสบการณ์ของฉันคุณสามารถใช้ในชื่อได้ แต่ฉันมีพฤติกรรมแปลก ๆ หากใช้ / 's

สำหรับข้อมูลเพิ่มเติมโปรดดู: เบรกพอยต์ในการ เลิกใช้JavaScript แบบไดนามิกของ // @ sourceurl

คุณสามารถใช้//# sourceURL=และ//# sourceMappingURL=อยู่ท้ายไฟล์สคริปต์หรือแท็กสคริปต์ของคุณ

หมายเหตุ: //@ sourceURLและ//@ sourceMappingURLเลิกใช้แล้ว

ฉันลองใช้ "// # sourceURL = filename.js" ที่ OP แนะนำเป็นวิธีแก้ปัญหาชั่วคราว แต่ยังไม่ปรากฏให้ฉันเห็นในแผงแหล่งที่มาเว้นแต่จะมีอยู่ในแท็บของฉันจากครั้งก่อนเมื่อ มันทำให้เกิดข้อยกเว้น

การเข้ารหัส "debugger;" เส้นบังคับให้แตกที่ตำแหน่งนั้น จากนั้นเมื่ออยู่ในแท็บของฉันในแผงแหล่งที่มาฉันสามารถตั้งค่าเบรกพอยต์ได้ตามปกติและลบ "ดีบักเกอร์;" ไลน์.

สังเกตว่าไฟล์ต้นฉบับที่ปรากฏในแท็บแหล่งที่มาด้วยวิธีนี้จะปรากฏในกลุ่ม(ไม่มีโดเมน)และในกรณีที่คุณต้องการแก้ไขข้อบกพร่องคุณจะต้องเพิ่มdebugger;บรรทัดในโค้ดของคุณทำให้บรรทัดนั้นถูกเรียกใช้งาน (โดยปกติจะอยู่ที่ จุดเริ่มต้นของการเรียกใช้ไฟล์ต้นฉบับของคุณ) จากนั้นเพิ่มเบรกพอยต์ของคุณได้ทุกที่

ในกรณีที่คุณกำลังดีบักขั้นตอนการผลิตซึ่งคุณอาจไม่มีdebugger;บรรทัดในโค้ดของคุณคุณสามารถทำให้สิ่งนี้เกิดขึ้นได้โดยการทำแผนที่ในเครื่องกับ CharlesProxy ไปที่ "สำเนาใหม่ของไฟล์ต้นฉบับที่มีการแทรกบรรทัดดีบักเกอร์"

เมื่อพยายามติดตามสิ่งนี้ใน IE ฉันเปิดเครื่องมือ dev (F12) จากนั้นค้นหาตำแหน่งที่จะวางเบรกพอยต์โดยใช้บรรทัดต่อไปนี้ในคอนโซล:

debugger;myFunction();

ซึ่งจะเปลี่ยนไปใช้แท็บดีบักเกอร์ซึ่งคุณสามารถเข้าไปmyFunction()และตั้งค่าเบรกพอยต์