หยุดโค้ดชั่วคราวด้วยเบรกพอยท์

ใช้เบรกพอยท์เพื่อหยุดโค้ด JavaScript ชั่วคราว คู่มือนี้จะอธิบายเบรกพอยท์แต่ละประเภทที่มีในเครื่องมือสำหรับนักพัฒนาเว็บ รวมถึงเวลาที่ควรใช้และวิธีตั้งค่าเบรกพอยท์แต่ละประเภท สำหรับบทแนะนำแบบอินเทอร์แอกทีฟเกี่ยวกับกระบวนการแก้ไขข้อบกพร่อง โปรดดูเริ่มต้นใช้งาน JavaScript ในการดีบักใน Chrome DevTools

ภาพรวมของเวลาที่จะใช้เบรกพอยท์แต่ละประเภท

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

ประเภทเบรกพอยท์	ใช้ตัวเลือกนี้เมื่อคุณต้องการ ...
บรรทัดของโค้ด	หยุดชั่วคราวเฉพาะในภูมิภาคของโค้ด
บรรทัดของโค้ดแบบมีเงื่อนไข	หยุดชั่วคราวในภูมิภาคของโค้ดที่แน่นอน แต่เฉพาะเมื่อเงื่อนไขอื่นๆ เป็นจริงเท่านั้น
จุดตรวจสอบ	บันทึกข้อความไปยังคอนโซลโดยไม่หยุดการดำเนินการชั่วคราว
DOM	หยุดชั่วคราวสำหรับโค้ดที่เปลี่ยนแปลงหรือนำโหนด DOM ที่เฉพาะเจาะจง หรือโหนดย่อยของโหนดออก
XHR	หยุดชั่วคราวเมื่อ URL XHR มีรูปแบบสตริง
Listener เหตุการณ์	หยุดชั่วคราวในโค้ดที่ทำงานหลังเหตุการณ์ เช่น click ที่เริ่มทำงาน
ข้อยกเว้น	หยุดชั่วคราวในบรรทัดโค้ดที่ทำให้เกิดข้อยกเว้นที่เจอหรือตรวจไม่พบ
การทำงาน	หยุดชั่วคราวเมื่อใดก็ตามที่มีการเรียกฟังก์ชันที่ระบุ
ประเภทที่เชื่อถือได้	หยุดชั่วคราวเนื่องจากการละเมิดประเภทที่เชื่อถือได้

เบรกพอยท์บรรทัดของโค้ด

ใช้เบรกพอยท์บรรทัดของโค้ดเมื่อทราบภูมิภาคที่แน่นอนของโค้ดที่ต้องตรวจสอบ เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดชั่วคราวก่อนเรียกใช้โค้ดบรรทัดนี้ทุกครั้ง

วิธีตั้งค่าเบรกพอยท์บรรทัดของโค้ดในเครื่องมือสำหรับนักพัฒนาเว็บ

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

ตัวอย่างนี้แสดงเบรกพอยท์บรรทัดของโค้ดที่บรรทัด 29

เบรกพอยท์บรรทัดของโค้ดในโค้ดของคุณ

โทรหา debugger จากรหัสเพื่อหยุดชั่วคราวในบรรทัดนั้น ซึ่งเทียบเท่ากับเบรกพอยท์บรรทัดของโค้ด ยกเว้นว่าเบรกพอยท์จะมีการตั้งค่าในโค้ดของคุณ ไม่ใช่ใน UI ของ DevTools

console.log('a');
console.log('b');
debugger;
console.log('c');

เบรกพอยท์บรรทัดของโค้ดแบบมีเงื่อนไข

ใช้เบรกพอยท์บรรทัดของโค้ดแบบมีเงื่อนไขเมื่อต้องการหยุดการดำเนินการ แต่เฉพาะเมื่อเงื่อนไขบางอย่างเป็นจริงเท่านั้น

เบรกพอยท์ดังกล่าวมีประโยชน์เมื่อคุณต้องการข้ามช่วงพักที่ไม่เกี่ยวข้องกับกรณีของคุณ โดยเฉพาะเมื่อวนซ้ำ

วิธีตั้งค่าเบรกพอยท์บรรทัดของโค้ดแบบมีเงื่อนไข

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

ตัวอย่างนี้แสดงเบรกพอยท์บรรทัดของโค้ดแบบมีเงื่อนไขที่เริ่มทำงานเฉพาะเมื่อ x เกิน 10 ในการวนซ้ำ i=6

บันทึกเบรกพอยท์บรรทัดของโค้ด

ใช้เบรกพอยท์บรรทัดของโค้ด (จุดตรวจสอบ) เพื่อบันทึกข้อความไปยัง Console โดยไม่ต้องหยุดการดำเนินการชั่วคราวและไม่ทำให้โค้ดยุ่งเหยิงด้วยการเรียกใช้ console.log()

วิธีตั้งค่าจุดตรวจสอบ

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

6. ป้อนข้อความบันทึกในกล่องโต้ตอบ คุณสามารถใช้ไวยากรณ์เดียวกันกับการเรียก console.log(message) ได้

   ตัวอย่างเช่น คุณสามารถบันทึก:

   "A string " + num, str.length > 1, str.toUpperCase(), obj
   

   ในกรณีนี้ ข้อความที่บันทึกจะเป็นดังนี้

   // str = "test"
   // num = 3
   // obj = {attr: "x"}
   A string 42 true TEST {attr: 'x'}
   

7. กด Enter เพื่อเปิดใช้งานเบรกพอยท์ ไอคอนสีชมพูที่มีจุด 2 จุดจะปรากฏที่ด้านบนของคอลัมน์หมายเลขเส้น

ตัวอย่างนี้แสดงจุดตรวจสอบที่บรรทัดที่ 30 ซึ่งบันทึกสตริงและค่าตัวแปรไปยังคอนโซล

แก้ไขเบรกพอยท์บรรทัดของโค้ด

ใช้แผงเบรกพอยท์เพื่อปิดใช้ แก้ไข หรือนำเบรกพอยท์บรรทัดโค้ดออก

แก้ไขกลุ่มเบรกพอยท์

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

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

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

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

• นำเบรกพอยท์ทั้งหมดในไฟล์ (กลุ่ม) ออก
• ปิดใช้เบรกพอยท์ทั้งหมดในไฟล์
• เปิดใช้เบรกพอยท์ทั้งหมดในไฟล์
• นำเบรกพอยท์ทั้งหมดออก (ในทุกไฟล์)
• นำเบรกพอยท์อื่นๆ ออก (ในกลุ่มอื่นๆ)

แก้ไขเบรกพอยท์

วิธีแก้ไขเบรกพอยท์

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

• เมื่อแก้ไขเบรกพอยท์ ให้เปลี่ยนประเภทของเบรกพอยท์จากรายการแบบเลื่อนลงในตัวแก้ไขในบรรทัด

  

• คลิกขวาที่เบรกพอยท์เพื่อดูเมนูตามบริบทของเบรกพอยท์ แล้วเลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

  

  • แสดงตำแหน่ง
  • แก้ไขเงื่อนไขหรือจุดตรวจสอบ
  • เปิดใช้เบรกพอยท์ทั้งหมด
  • ปิดใช้เบรกพอยท์ทั้งหมด
  • นำเบรกพอยท์ออก
  • นำเบรกพอยท์อื่นๆ ออก (ในทุกไฟล์)
  • นำเบรกพอยท์ทั้งหมดออก (ในทุกไฟล์)

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

เบรกพอยท์การเปลี่ยนแปลง DOM

ใช้เบรกพอยท์การเปลี่ยนแปลง DOM เมื่อคุณต้องการหยุดชั่วคราวในโค้ดที่เปลี่ยนแปลงโหนด DOM หรือโหนดย่อย

วิธีตั้งค่าเบรกพอยท์การเปลี่ยนแปลง DOM

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

ตัวอย่างนี้แสดงเมนูตามบริบทสำหรับการสร้างเบรกพอยท์การเปลี่ยนแปลง DOM

คุณดูรายการเบรกพอยท์การเปลี่ยนแปลง DOM ได้ในที่ต่อไปนี้

• องค์ประกอบ > แผงเบรกพอยท์ DOM
• แหล่งที่มา > แผงด้านข้างเบรกพอยท์ DOM

จากที่นี่ คุณสามารถทำสิ่งต่อไปนี้

• เปิดหรือปิดใช้ด้วย
• คลิกขวา > นำออกหรือแสดงใน DOM

ประเภทของเบรกพอยท์การเปลี่ยนแปลง DOM

• การแก้ไขแผนผังย่อย ทริกเกอร์เมื่อโหนดย่อยของโหนดที่เลือกอยู่ถูกนำออกหรือเพิ่ม หรือเนื้อหาของโหนดย่อยมีการเปลี่ยนแปลง ไม่ทริกเกอร์เมื่อมีการเปลี่ยนแปลงแอตทริบิวต์โหนดย่อย หรือในการเปลี่ยนแปลงใดๆ กับโหนดที่เลือกอยู่ในขณะนี้
• การแก้ไขแอตทริบิวต์: ทริกเกอร์เมื่อมีการเพิ่มหรือนำแอตทริบิวต์ออกในโหนดที่เลือกอยู่ในปัจจุบัน หรือเมื่อค่าแอตทริบิวต์มีการเปลี่ยนแปลง
• การนำโหนดออก: ทริกเกอร์เมื่อโหนดที่เลือกอยู่ในปัจจุบันถูกนำออก

เบรกพอยท์ XHR/การดึงข้อมูล

ใช้เบรกพอยท์ XHR/การดึงข้อมูลเมื่อคุณต้องการพักเมื่อ URL คำขอของ XHR มีสตริงที่ระบุ เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดชั่วคราวในบรรทัดโค้ดที่ XHR เรียกใช้ send()

ตัวอย่างหนึ่งของกรณีที่วิธีนี้จะเป็นประโยชน์คือ การเห็นว่าหน้าเว็บขอ URL ที่ไม่ถูกต้อง และคุณต้องการค้นหาซอร์สโค้ด AJAX หรือการดึงข้อมูลที่ทําให้เกิดคําขอที่ไม่ถูกต้องอย่างรวดเร็ว

วิธีตั้งค่าเบรกพอยท์ XHR/การดึงข้อมูล

1. คลิกแท็บแหล่งที่มา
2. ขยายแผงเบรกพอยท์ XHR
3. คลิก เพิ่มเบรกพอยท์
4. ป้อนสตริงที่ต้องการให้ตัดข้อความ เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดชั่วคราวเมื่อมีสตริงนี้ อยู่ที่ใดก็ได้ใน URL คำขอของ XHR
5. กด Enter เพื่อยืนยัน

ตัวอย่างนี้แสดงวิธีสร้างเบรกพอยท์ XHR/การดึงข้อมูลในเบรกพอยท์ XHR/การดึงข้อมูล สำหรับคำขอที่มี org ใน URL

เบรกพอยท์ของ Listener เหตุการณ์

ใช้เบรกพอยท์ Listener เหตุการณ์เมื่อต้องการหยุดชั่วคราวในโค้ด Listener เหตุการณ์ที่เรียกใช้หลังจากเหตุการณ์เริ่มทำงาน คุณสามารถเลือกเหตุการณ์ที่เฉพาะเจาะจง เช่น click หรือหมวดหมู่เหตุการณ์ เช่น เหตุการณ์เมาส์ทั้งหมด

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

ตัวอย่างนี้แสดงวิธีสร้างเบรกพอยท์ Listener เหตุการณ์สำหรับ deviceorientation

นอกจากนี้ โปรแกรมแก้ไขข้อบกพร่อง จะหยุดเหตุการณ์ที่เกิดขึ้นในเว็บผู้ปฏิบัติงานหรือเวิร์กเล็ตทุกประเภท รวมถึงWorklet พื้นที่เก็บข้อมูลที่ใช้ร่วมกัน

ตัวอย่างนี้แสดงโปรแกรมแก้ไขข้อบกพร่องที่หยุดไว้ชั่วคราวในเหตุการณ์ setTimer ที่เกิดขึ้นใน Service Worker

คุณยังดูรายการ Listener เหตุการณ์ได้ในองค์ประกอบ > แผง Listener เหตุการณ์

เบรกพอยท์ข้อยกเว้น

ใช้เบรกพอยท์ข้อยกเว้นเมื่อต้องการหยุดชั่วคราวในบรรทัดของโค้ดที่ทำให้เกิดข้อยกเว้นที่เจอหรือตรวจไม่พบ คุณหยุดชั่วคราวสำหรับข้อยกเว้นทั้งสองนี้แยกกันได้ในเซสชันแก้ไขข้อบกพร่องที่ไม่ใช่ Node.js

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

• เลือก หยุดชั่วคราวเมื่อไม่พบข้อยกเว้น

  

  ในตัวอย่างนี้ การดำเนินการหยุดชั่วคราวจากข้อยกเว้นที่ตรวจไม่พบ

• ทำเครื่องหมายที่ หยุดชั่วคราวเมื่อพบข้อยกเว้น

  

  ในตัวอย่างนี้ การดำเนินการหยุดชั่วคราวจากข้อยกเว้นที่จับได้

ข้อยกเว้นในการเรียกแบบอะซิงโครนัส

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

พบข้อผิดพลาดและโค้ดที่ละเว้น

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

ตัวอย่างถัดไปจะแสดงโปรแกรมแก้ไขข้อบกพร่องที่หยุดชั่วคราวในข้อยกเว้นที่ตรวจจับได้ซึ่ง library.js ที่ละเว้นซึ่งส่งผ่าน mycode.js ที่ไม่ละเว้น

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับลักษณะการทำงานของโปรแกรมแก้ไขข้อบกพร่องในกรณี Edge Case ให้ทดสอบชุดสถานการณ์ในหน้าสาธิตนี้

เบรกพอยท์ของฟังก์ชัน

เรียกใช้ debug(functionName) โดยที่ functionName คือฟังก์ชันที่คุณต้องการแก้ไขข้อบกพร่องเมื่อต้องการหยุดชั่วคราวทุกครั้งที่มีการเรียกใช้ฟังก์ชันที่เฉพาะเจาะจง คุณสามารถแทรก debug() ลงในโค้ด (เช่น คำสั่ง console.log()) หรือเรียกใช้จากคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ debug() เทียบเท่ากับการตั้งค่าเบรกพอยท์บรรทัดของโค้ดในบรรทัดแรกของฟังก์ชัน

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

ตรวจสอบว่าฟังก์ชันเป้าหมายอยู่ในขอบเขต

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

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

การตรวจสอบว่าฟังก์ชันเป้าหมายอยู่ในขอบเขตอาจเป็นเรื่องยุ่งยากหากคุณเรียกใช้ debug() จากคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ นี่คือกลยุทธ์หนึ่ง

1. กำหนดเบรกพอยท์บรรทัดโค้ดในที่ที่ฟังก์ชันอยู่ในขอบเขต
2. ทริกเกอร์เบรกพอยท์
3. เรียกใช้ debug() ในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บขณะที่โค้ดยังคงหยุดชั่วคราวในเบรกพอยท์บรรทัดของโค้ด

เบรกพอยท์ประเภท Trusted

Trusted Type API ช่วยป้องกันการแสวงหาประโยชน์ด้านความปลอดภัยที่เรียกว่าการโจมตี cross-site Scripting (XSS)

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

• ตรวจสอบ การละเมิดซิงก์

  

  ในตัวอย่างนี้ การดำเนินการหยุดชั่วคราวในการละเมิดซิงก์

• ตรวจสอบการละเมิดนโยบายของ

  

  ในตัวอย่างนี้ การดำเนินการหยุดชั่วคราวเนื่องจากละเมิดนโยบาย นโยบายประเภท Trusted ตั้งค่าโดยใช้ trustedTypes.createPolicy

คุณดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ API ได้ดังนี้

• หากต้องการเป้าหมายด้านความปลอดภัยเพิ่มเติม โปรดไปที่ป้องกันช่องโหว่ในการเขียนสคริปต์ข้ามเว็บไซต์ของ DOM ด้วยประเภทที่เชื่อถือได้
• หากต้องการแก้ไขข้อบกพร่อง โปรดไปที่การใช้งานการแก้ไขข้อบกพร่อง CSP และ Trusted Types ใน Chrome DevTools