เป็นไปได้ไหมที่จะดีบัก JavaScript ที่โหลดแบบไดนามิกโดยดีบักเกอร์เช่น WebKit, FireBug หรือ IE8 Developer Tool

Question 1

จากคำถามล่าสุดของฉันฉันได้สร้างฟังก์ชัน JavaScript สำหรับการโหลดแบบไดนามิกบางส่วนแล้ว ดังนั้นฉันจึงไม่สามารถดีบัก JavaScript ที่โหลดแบบไดนามิกได้ เนื่องจาก JavaScript ที่โหลดทั้งหมดจะถูกประเมินโดยฟังก์ชัน "eval"

อย่างไรก็ตามฉันพบวิธีบางอย่างในการสร้าง JavaScript ใหม่โดยใช้สคริปต์ต่อไปนี้เพื่อสร้างสคริปต์ในส่วนหัวของเอกสารปัจจุบันแบบไดนามิก สคริปต์ที่โหลดทั้งหมดจะแสดงใน HTML DOM (ซึ่งคุณสามารถใช้ดีบักเกอร์ใดก็ได้เพื่อค้นหา)

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.text = "alert('Test!');";

document.getElementsByTagName('head')[0].appendChild(script);

อย่างไรก็ตามดีบักเกอร์ส่วนใหญ่ (แถบเครื่องมือสำหรับนักพัฒนา IE8, Firebug และ Google Chrome) ไม่สามารถตั้งค่าเบรกพอยต์ในสคริปต์ไดนามิกใด ๆ เนื่องจากต้องโหลดสคริปต์ debuggable ในครั้งแรกหลังจากโหลดเพจแล้ว

คุณมีแนวคิดในการแก้ไขข้อบกพร่องในเนื้อหาสคริปต์แบบไดนามิกหรือไฟล์หรือไม่?

อัปเดต 1 - เพิ่มซอร์สโค้ดสำหรับการทดสอบ

คุณสามารถใช้ไฟล์ xhtml ต่อไปนี้เพื่อพยายามดีบักค่า someVariable

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title>Dynamic Loading Script Testing</title>
    <script type="text/javascript">
    function page_load()
    {       
        var script = document.createElement('script')
        script.setAttribute("id", "dynamicLoadingScript");
        script.setAttribute("type","text/javascript");
        script.text =   "var someVariable = 0;\n" +
                        "someVariable = window.outerWidth;\n" +
                        "alert(someVariable);";

        document.getElementsByTagName('head')[0].appendChild(script);
    }
    </script>
</head>
<body onload="page_load();">
</body>
</html>

จากคำตอบฉันเพิ่งทดสอบใน FireBug ผลลัพธ์ควรแสดงเหมือนภาพด้านล่าง

ข้อความแสดงแทน http://d7cgnq.bay.livefilestore.com/y1pJGV27qEARXzZhsMMhPD5z0OxAtnkQK8eKeEXMAxuHjsuWeAq1aGl7sTISRNqVv3lw8ghyxE_GorlwSJDvTql0mugPug

โปรดดูสคริปต์ "dynamicLoadingScript" ที่เพิ่มเข้ามาหลังจากการโหลดหน้าเว็บ

ข้อความแสดงแทน http://d7cgnq.bay.livefilestore.com/y1pz_RwqjgeVqe2mAlUZha0PalpPdP0X5AiwJcQhYahERlnbPDdZpb-_d1e96Q-14raSDMJOBsdcV9jsi4B5yNGCUDqm41kfire

แต่ไม่พบในแท็บสคริปต์ของ FireBug

อัปเดต 2 - สร้าง Debug Breakpoint ในสคริปต์การโหลดแบบไดนามิก

ข้อความแสดงแทน http://d7cgnq.bay.livefilestore.com/y1peKdIMOztXss-pc8PlJEmaGov_0ShYnLsuDdK5OLETbCG0UpkX6Te29w0YW2pNKaD_0ANAiizh2GdGPAAp_1q0JWAETo4Q10.

ข้อความแสดงแทน http://d7cgnq.bay.livefilestore.com/y1pUeHaHoTXj0WBl74fnTrXwdr_y7s7h8jNKfslSONgshzZBpUddGHNBWA9cXRabo3HAl3QazeozrCABo7pNVQc1Acl-UXGo7pNVQc1Acl

ทั้งสองภาพด้านบนแสดงการแทรก "debugger;" คำสั่งในบางบรรทัดของสคริปต์สามารถยิงเบรกพอยต์ในสคริปต์การโหลดแบบไดนามิก อย่างไรก็ตามดีบักเกอร์ทั้งสองไม่แสดงรหัสใด ๆ ที่เบรกพอยต์ ดังนั้นจึงไม่มีประโยชน์สำหรับการทำเช่นนี้

ขอบคุณ

Question 2

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

แอตทริบิวต์ที่ต้องตั้งค่าคือ

//# sourceURL=dynamicScript.js

โดยที่ dynamicScript.js เป็นชื่อของไฟล์ที่ควรปรากฏในเบราว์เซอร์ไฟล์สคริปต์

ข้อมูลเพิ่มเติมที่นี่

Paul Irish ยังพูดถึงเรื่องนี้สั้น ๆ ในการพูดคุยที่ยอดเยี่ยมของเขาเกี่ยวกับTooling & The Webapp Development Stack

Question 3

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

Question 4

ใช่ตอนนี้เป็นไปได้ที่จะแก้ไขข้อบกพร่อง JavaScript ที่โหลดแบบไดนามิกโดยใช้ Google Chrome!

ไม่จำเป็นต้องเพิ่มคุณสมบัติพิเศษdebugger;หรือแอตทริบิวต์อื่น ๆ สำหรับไฟล์ JS ที่โหลดแบบไดนามิก เพียงทำตามขั้นตอนด้านล่างเพื่อแก้ไขข้อบกพร่อง:

วิธีที่ 1:

หัวหน้าฝ่ายเทคโนโลยีของฉันเพิ่งแสดงวิธีที่ง่ายสุด ๆ ในการดีบักเมธอด Javascript ที่โหลดแบบไดนามิก

เปิดคอนโซลของ chrome และเขียนชื่อของวิธีการและกด Enter
ในกรณีของฉันมันคือGetAdvancedSearchConditonRowNew
ถ้าโหลดเมธอด JS มันจะแสดงนิยามของเมธอด

คลิกที่คำจำกัดความของวิธีการและไฟล์ JS ทั้งหมดจะถูกเปิดขึ้นเพื่อแก้ไขข้อบกพร่อง :)

วิธีที่ 2:

ตัวอย่างเช่นฉันกำลังโหลดไฟล์ JS เมื่อคลิกปุ่มโดยใช้การ ajaxโทร

เปิดnetworkแท็บในเครื่องมือ dev ของ Google Chrome
คลิกที่ปุ่มควบคุม (เช่นปุ่ม) ซึ่งโหลดไฟล์จาวาสคริปต์และเรียกใช้ฟังก์ชันจาวาสคริปต์
สังเกตแท็บเครือข่ายและมองหาฟังก์ชัน JS นั้น (ในกรณีของฉันคือRetrieveAllTags?_=1451974716935)
วางเมาส์เหนือไฟล์initiaterแล้วคุณจะพบไฟล์ JS ที่โหลดแบบไดนามิก (พร้อมคำนำหน้าVM*)

คลิกที่VM*ไฟล์นั้นเพื่อเปิด
ใส่ดีบักเกอร์ทุกที่ที่คุณต้องการในไฟล์นั้น: D

Question 5

ฉันใช้ Google Chrome เพื่อจุดประสงค์นั้น

ใน chrome ที่แท็บสคริปต์คุณสามารถเปิดใช้งาน "หยุดชั่วคราวในข้อยกเว้นทั้งหมด"

ป้อนคำอธิบายภาพที่นี่

try{throw ''} catch(e){}แล้วใส่ที่ใดที่หนึ่งในสายรหัสของคุณ Chrome จะหยุดการทำงานเมื่อมาถึงบรรทัดนี้

แก้ไข: แก้ไขรูปภาพเพื่อให้ชัดเจนยิ่งขึ้นว่าฉันกำลังพูดถึงอะไร

Question 6

ฉันคิดว่าคุณอาจต้องตั้งรหัส "ชื่อ" ให้กับรหัสแบบนี้:

http://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

ถ้าเป็นเช่นนั้นฉันคิดว่าน่าจะเป็นdebuggerแนวทางจาก "อัปเดต 2" แล้ว

Question 7

อัปเดต : ไวยากรณ์ของ sourceUrl ได้รับการเปลี่ยนแปลง (@ ถูกแทนที่ด้วย #) เพื่อหลีกเลี่ยงข้อผิดพลาดในเบราว์เซอร์ที่ไม่รองรับ (อ่าน: IE) รายละเอียด

Question 8

การใช้ Chrome (12.0.742.112) กับรหัสที่คุณให้มาบวกกับคำสั่งดีบักเกอร์เช่นนี้

    script.text =   "debugger;var someVariable = 0;\n" +
    "someVariable = window.outerWidth;\n" +
    "alert(someVariable);";

chrome_debugger

เหมาะกับฉัน

ฉันต้องการแก้ไข JavaScript บางส่วน (จำกัด ขอบเขตของตัวเลือก jQuery ทั้งหมดเป็นบางส่วน> ดู div ในปัจจุบัน) ก่อนที่จะดำเนินการ

อาจจับต้องได้มากขึ้นถ้าคุณผูกตัวเลือกการเปลี่ยนแปลงกับเหตุการณ์ในมุมมองบางส่วนของคุณแทนที่จะสร้างองค์ประกอบสคริปต์ในเนื้อหา html (ไม่รู้สึกถูกต้อง)

คุณสามารถทำสิ่งนี้ได้

   (function(j)(
      var limiting_selector = '';
      j(".partial_views").bind('focusin over',function(e){
         limiting_selector = j(this).attr('someattr') // or j(this).data('limiting-selector')
      }).bind('focusout out',function(e){
         limiting_selector = '';
      });
      // And then go on with
      // j(limiting_selector+' .someclass')
   ))(jQuery)

รหัสนี้จะเพิ่มตัวเลือกที่ จำกัด ให้กับการดำเนินการเลือก jQuery ทั้งหมดที่ทำในขณะที่เมาส์อยู่ในองค์ประกอบบางอย่างเนื่องจาก HTML จะไม่ทำให้สับสน

(ยังดูเหมือนแฮ็กเกอร์อาจมีคนมีวิธีแก้ปัญหาที่ดีกว่า)

ไชโย

Question 9

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

Question 10

Javascript ที่โหลดแบบไดนามิกยังคงต้องถูกแยกวิเคราะห์โดยเบราว์เซอร์ซึ่งเป็นที่ที่ WebKit หรือ FireBug debugger นั่งอยู่ดังนั้นจึงขึ้นอยู่กับดีบักเกอร์ไม่ว่าจะเกิดอะไรขึ้นฉันคิดว่านี่เหมือนกันสำหรับเครื่องมือสำหรับนักพัฒนาใน IE8

ดังนั้นรหัสของคุณจึงอยู่ภายใต้การดีบักเกอร์ดังนั้นการที่คุณพบปัญหาจะไม่อยู่ในไฟล์หรือข้อความนั้นหากไม่มีข้อผิดพลาด

สิ่งอื่นscript.text = "alert('Test!');";ไม่ถูกต้องดังนั้นจึงไม่สามารถใช้ได้กับทุกเบราว์เซอร์สิ่งที่คุณต้องการคือscript.innerHTML = "alert('Test!');";

แม้ว่า innerHTML จะหมายถึงโค้ดภายในแท็ก HTML ไม่ใช่ HTML ที่อยู่ในกลุ่มคนที่ใช้มากที่สุดเท่านั้นจึงอธิบายผิด

แก้ไขเพื่ออัปเดต 2

และในการอัปเดตครั้งที่สองโดยใช้ Chrome ฉันทำสิ่งนี้

ไปที่ about: blank เปิดคอนโซลขึ้นและผ่านมา

var script = document.createElement('script')
script.setAttribute("type","text/javascript")
script.innerHTML = "alert('Test!');debugger;";

document.getElementsByTagName('head')[0].appendChild(script);

จากนั้นมันจะแตกและเปิดแท็บสคริปต์โดยแสดง about: blank (ไม่มีอะไรให้ดู)

จากนั้นทางด้านขวามือจะแสดงรายการโทรสแตกจากนั้นคลิกที่สอง (ฟังก์ชันไม่ระบุชื่อ) และจะแสดงให้คุณเห็น

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

Question 11

ด้วยGoogle Chrome (หรือSafari ) Developers Tool คุณสามารถเรียกใช้ JavaScript ทีละบรรทัด สคริปต์

เครื่องมือสำหรับนักพัฒนาเลือกสคริปต์ที่คุณต้องการดีบักเครื่องหมายหยุดชั่วคราวทางด้านขวาหรือตั้งค่าจุดพักโดยคลิกที่หมายเลขบรรทัด>>>

Question 12

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

Question 13

สำหรับเบราว์เซอร์ Google Chrome ในปัจจุบันหรือเบราว์เซอร์สมัยใหม่อื่น ๆ คุณสามารถค้นหาโค้ดที่ประเมินได้อย่างง่ายดายด้วยเครื่องมือสำหรับนักพัฒนาเช่นรูปภาพต่อไปนี้

จำลองไฟล์โหลดแบบไดนามิก

กดCtrl + Shift + Fในแท็บแหล่งที่มาและค้นหาฟังก์ชันด้านบน

สร้างเบรกพอยต์และรันฟังก์ชันเพื่อทดสอบ