JavaScript: วิธีตั้งค่า Conditional Break Point ในเครื่องมือดีบักเกอร์ Chrome


100

ฉันมีไฟล์ js ที่เรียบง่ายซึ่งพิมพ์วันที่อย่างต่อเนื่อง

ฉันใช้เครื่องมือ Google Chrome Debugger (F12)

คำถามของฉันคือเป็นไปได้ไหมที่จะตั้งจุดพักตามเงื่อนไขใน Google Chrome?

ในรหัสของฉันฉันต้องการกำหนดจุดพักถ้าค่าวินาทีเท่ากับ 50 ??

s = date.getSeconds();

นี่คือ jsfiddle ที่มาของฉัน

(ไม่แน่ใจว่าทำไมมันไม่ทำงานใน jsfiddle)

อย่างไรก็ตามคำถามของฉันคือเป็นไปได้หรือไม่ที่จะตั้งค่าจุดแตกหักในเครื่องมือ Chrome Debugger?


1
+1 เพราะฉันไม่รู้ว่ามันเป็นไปได้จนกระทั่งไปตรวจสอบเอกสารเพื่อตอบคำถามนี้ ขอบคุณ!
Theraot

คำตอบ:


141

ใช่มันเป็นไปได้

คลิกขวาที่เครื่องหมายของเบรกพอยต์และเลือก "แก้ไขเบรกพอยต์ ... " ที่นั่นคุณสามารถตั้งเงื่อนไขได้

จากเครื่องมือสำหรับนักพัฒนา Chrome บนเบรกพอยต์ที่ developers.google.com (เน้นของฉัน):

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


ขอบคุณฉันทำตามที่คุณพูดถึงแก้ไขจุดพักและตั้งค่า if (s == 50) แต่ทำไมมันไม่หยุดที่เงื่อนไขนั้น ??
Pawan

2
@PreethiJain เขียนแค่เงื่อนไข "s == 50" (ไม่มีเครื่องหมายคำพูด) ยังไงซะฉันก็จัดการ jsfiddle ได้ที่: jsfiddle.net/nVpXN/6
Theraot

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

2
ผู้ชายปี 2017 และฉันกำลังเรียนรู้สิ่งพื้นฐานใหม่ ๆ เกี่ยวกับ Chrome #Awesomeness
The Qodesmith

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

27

ดูdebuggerคำชี้แจง โดยทั่วไปจะเรียกใช้เครื่องมือดีบักเกอร์ที่มีอยู่และใน Chrome จะทำหน้าที่ราวกับว่าล่ามพบกับเบรกพอยต์

รหัสของคุณจะเป็น:

s = date.getSeconds();
if (s == 50) {
   debugger;
}

จากการอ้างอิง :

[debugger] เรียกใช้ฟังก์ชันการดีบักที่มีอยู่ หากไม่มีฟังก์ชันการดีบักคำสั่งนี้จะไม่มีผล


แม้ว่าในความเป็นจริงแล้วสิ่งนี้จะอยู่ในจิตวิญญาณของวิธีการถามคำถามดั้งเดิมมากกว่า แต่ก็เป็นข้อมูลที่ดี ฉันคิดว่าคำถามจริงเกี่ยวกับ Chrome Tools ไม่ใช่ ECMAscript ที่ถูกกล่าวว่า; มีข้อแม้ที่ควรเพิ่ม: ลบการdebuggerโทรทั้งหมดในรหัสการผลิต (ฉันค่อนข้างแน่ใจว่าการขุยจะทำให้เกิดข้อผิดพลาดหากดีบักเกอร์อยู่รอบ ๆ แต่ก็คุ้มค่าที่จะโทรออกเมื่อใดก็ตามที่มีการยกหัวข้อขึ้น)
Crispen Smith

1
คุณไม่จำเป็นต้องมีคำสั่งดีบักเกอร์คุณยังสามารถมีคำสั่งว่างใน if และเพิ่มเบรกพอยต์ที่นั่น
ejectamenta

8

คุณสามารถกำหนดจุดพักตามเงื่อนไขใน Google Chrome ได้โดยทำตามขั้นตอนเหล่านี้:

1. คลิกขวาที่เบรกพอยต์ที่คุณต้องการหยุดโปรดคลิกบน ป้อนคำอธิบายภาพที่นี่

2. คลิก "เพิ่มเบรกพอยต์แบบมีเงื่อนไข" ข้อความหนึ่งจะปรากฏขึ้นคุณสามารถเพิ่มเงื่อนไขได้ (ผลลัพธ์จะเป็น 'จริง' หากเงื่อนไขเป็นที่พอใจมิฉะนั้น 'เท็จ') สีเบรกพอยต์จะกลายเป็นสีส้มหลังจากที่เพิ่มเงื่อนไขแล้ว chk บน ป้อนคำอธิบายภาพที่นี่

3. โหลดหน้าเดิมซ้ำคุณสามารถดูว่าเบรกพอยต์จะทำงานหากเงื่อนไขเป็นที่พอใจเช่น ป้อนคำอธิบายภาพที่นี่

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.