จะตั้งค่าเบรกพอยต์ JavaScript จากรหัสใน Chrome ได้อย่างไร

ฉันต้องการที่จะบังคับให้ดีบัก Chrome เพื่อทำลายบนเส้นรหัสผ่านหรืออื่น ๆ console.break()ที่ใช้การจัดเรียงของแท็กความคิดเห็นบางอย่างเช่นสิ่งที่ต้องการ

คุณสามารถใช้debugger;ภายในรหัสของคุณ หากคอนโซลนักพัฒนาซอฟต์แวร์เปิดขึ้นการทำงานจะหยุดลง มันทำงานใน firebug เช่นกัน

ตั้งค่าฟังคลิกปุ่มแล้วโทร debugger;

ตัวอย่าง

$("#myBtn").click(function() {
 debugger;   
});

การสาธิต

http://jsfiddle.net/hBCH5/

ทรัพยากรเกี่ยวกับการดีบักใน JavaScript

• http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/
• http://berzniz.com/post/78260747646/5-javascript-debugging-tips-youll-start-using-today

นอกจากนี้คุณยังสามารถใช้debug(function)เพื่อทำลายเมื่อfunctionมีการเรียก

การอ้างอิง Command Line API: debug

อย่างที่คนอื่นพูดไปแล้วdebugger;นั่นเป็นวิธีที่จะไป ฉันเขียนสคริปต์ขนาดเล็กที่คุณสามารถใช้จากบรรทัดคำสั่งในเบราว์เซอร์เพื่อตั้งค่าและลบเบรกพอยต์ก่อนการเรียกใช้ฟังก์ชัน: http://andrijac.github.io/blog/2014/01/31/javascript-breakpoint/

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

ภาพหน้าจอ:

จากนั้นคุณจะสามารถติดตามจุดพักของคุณภายในแท็บด้านขวา (ดังที่แสดงในภาพหน้าจอ)

debugger เป็นคำหลักที่สงวนไว้โดย EcmaScript และให้ความหมายเสริมตั้งแต่ ES5

เป็นผลให้มันสามารถนำมาใช้ไม่เพียง แต่ใน Chrome แต่ยัง Firefox และ Node.js ผ่านnode debug myscript.js

มาตรฐานกล่าวว่า :

วากยสัมพันธ์

DebuggerStatement :
    debugger ;

อรรถศาสตร์

การประเมินการผลิต DebuggerStatement อาจอนุญาตให้มีการนำไปใช้เพื่อทำให้เบรกพอยต์เมื่อทำงานภายใต้ดีบักเกอร์ หากโปรแกรมดีบั๊กไม่อยู่หรือใช้งานคำสั่งนี้จะไม่มีผลที่สังเกตได้

การผลิต DebuggerStatement: ดีบักเกอร์ มีการประเมินดังนี้:

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

ไม่มีการเปลี่ยนแปลงใน ES6

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

ดูส่วนที่ 2 จาก

http://www.laurencegellert.com/2012/05/the-three-ways-of-setting-breakpoints-in-javascript/

หรือเพียงแค่เพิ่มบรรทัดที่มีคำว่าดีบั๊กในรหัสของคุณที่จุดทดสอบที่ต้องการ

เบรกพอยต์: -

เบรกพอยต์จะหยุดดำเนินการและให้คุณตรวจสอบค่า JavaScript

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

ดีบักเกอร์: -

ตัวดีบั๊ก หยุดการทำงานของ JavaScript และเรียกใช้ฟังก์ชันการดีบัก

คำสั่งดีบักเกอร์หยุดการทำงานชั่วคราว แต่ไม่ได้ปิดไฟล์ใด ๆ หรือล้างตัวแปรใด ๆ

Example:-
function checkBuggyStuff() {
  debugger; // do buggy stuff to examine.
};

คุณสามารถตั้งค่าdebug(functionName)ฟังก์ชั่นการดีบักได้เช่นกัน

https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#function

การดีบักโค้ด JavaScript มีหลายวิธี สองวิธีต่อไปนี้ใช้กันอย่างแพร่หลายในการดีบัก JavaScript ผ่านรหัส

1. การใช้console.log()เพื่อพิมพ์ค่าในคอนโซลของเบราว์เซอร์ (สิ่งนี้จะช่วยให้คุณเข้าใจค่าในบางจุดของรหัสของคุณ)

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

สำหรับเครื่องมือเพิ่มเติมและวิธีที่คุณแก้ปัญหารหัส JavaScript, จะได้รับในการเชื่อมโยงนี้โดย W3School

ฉันจะไม่แนะนำdebugger;ถ้าคุณต้องการที่จะฆ่าและหยุดรหัสจาวาสคริปต์เนื่องจากdebugger;จะเป็นการชั่วคราวหยุดรหัสจาวาสคริปต์ของคุณและไม่หยุดมันอย่างถาวร

หากคุณต้องการฆ่าและหยุดรหัส javascript ตามคำสั่งของคุณอย่างถูกต้องให้ใช้สิ่งต่อไปนี้:

throw new Error("This error message appears because I placed it");