ใช้เบรกพอยท์เพื่อหยุดโค้ด JavaScript ชั่วคราว คู่มือนี้จะอธิบายเบรกพอยท์แต่ละประเภทที่มีในเครื่องมือสำหรับนักพัฒนาเว็บ รวมถึงเวลาที่ควรใช้และวิธีตั้งค่าเบรกพอยท์แต่ละประเภท สำหรับบทแนะนำแบบอินเทอร์แอกทีฟเกี่ยวกับกระบวนการแก้ไขข้อบกพร่อง โปรดดูเริ่มต้นใช้งาน JavaScript ในการดีบักใน Chrome DevTools
ภาพรวมของเวลาที่จะใช้เบรกพอยท์แต่ละประเภท
ประเภทเบรกพอยท์ที่เป็นที่รู้จักมากที่สุดคือบรรทัดของโค้ด แต่เบรกพอยท์บรรทัดโค้ดอาจไม่มีประสิทธิภาพในการตั้งค่า โดยเฉพาะอย่างยิ่งหากคุณไม่ทราบว่าต้องดูตรงไหนหรือกำลังทำงานกับฐานของโค้ดขนาดใหญ่ คุณประหยัดเวลาได้เมื่อแก้ไขข้อบกพร่องด้วยการรู้วิธีและเวลาที่ควรใช้เบรกพอยท์ประเภทอื่นๆ
ประเภทเบรกพอยท์ | ใช้ตัวเลือกนี้เมื่อคุณต้องการ ... |
---|---|
บรรทัดของโค้ด | หยุดชั่วคราวเฉพาะในภูมิภาคของโค้ด |
บรรทัดของโค้ดแบบมีเงื่อนไข | หยุดชั่วคราวในภูมิภาคของโค้ดที่แน่นอน แต่เฉพาะเมื่อเงื่อนไขอื่นๆ เป็นจริงเท่านั้น |
จุดตรวจสอบ | บันทึกข้อความไปยังคอนโซลโดยไม่หยุดการดำเนินการชั่วคราว |
DOM | หยุดชั่วคราวสำหรับโค้ดที่เปลี่ยนแปลงหรือนำโหนด DOM ที่เฉพาะเจาะจง หรือโหนดย่อยของโหนดออก |
XHR | หยุดชั่วคราวเมื่อ URL XHR มีรูปแบบสตริง |
Listener เหตุการณ์ | หยุดชั่วคราวในโค้ดที่ทำงานหลังเหตุการณ์ เช่น click ที่เริ่มทำงาน |
ข้อยกเว้น | หยุดชั่วคราวในบรรทัดโค้ดที่ทำให้เกิดข้อยกเว้นที่เจอหรือตรวจไม่พบ |
การทำงาน | หยุดชั่วคราวเมื่อใดก็ตามที่มีการเรียกฟังก์ชันที่ระบุ |
ประเภทที่เชื่อถือได้ | หยุดชั่วคราวเนื่องจากการละเมิดประเภทที่เชื่อถือได้ |
เบรกพอยท์บรรทัดของโค้ด
ใช้เบรกพอยท์บรรทัดของโค้ดเมื่อทราบภูมิภาคที่แน่นอนของโค้ดที่ต้องตรวจสอบ เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดชั่วคราวก่อนเรียกใช้โค้ดบรรทัดนี้ทุกครั้ง
วิธีตั้งค่าเบรกพอยท์บรรทัดของโค้ดในเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บแหล่งที่มา
- เปิดไฟล์ที่มีบรรทัดโค้ดที่คุณต้องการให้แยกไว้
- ไปที่บรรทัดของโค้ด
- ทางด้านซ้ายของบรรทัดโค้ดคือคอลัมน์หมายเลขบรรทัด คลิกที่ส่วนนี้ ไอคอนสีน้ำเงินจะปรากฏ ที่ด้านบนของคอลัมน์หมายเลขบรรทัด
ตัวอย่างนี้แสดงเบรกพอยท์บรรทัดของโค้ดที่บรรทัด 29
เบรกพอยท์บรรทัดของโค้ดในโค้ดของคุณ
โทรหา debugger
จากรหัสเพื่อหยุดชั่วคราวในบรรทัดนั้น ซึ่งเทียบเท่ากับเบรกพอยท์บรรทัดของโค้ด ยกเว้นว่าเบรกพอยท์จะมีการตั้งค่าในโค้ดของคุณ ไม่ใช่ใน UI ของ DevTools
console.log('a');
console.log('b');
debugger;
console.log('c');
เบรกพอยท์บรรทัดของโค้ดแบบมีเงื่อนไข
ใช้เบรกพอยท์บรรทัดของโค้ดแบบมีเงื่อนไขเมื่อต้องการหยุดการดำเนินการ แต่เฉพาะเมื่อเงื่อนไขบางอย่างเป็นจริงเท่านั้น
เบรกพอยท์ดังกล่าวมีประโยชน์เมื่อคุณต้องการข้ามช่วงพักที่ไม่เกี่ยวข้องกับกรณีของคุณ โดยเฉพาะเมื่อวนซ้ำ
วิธีตั้งค่าเบรกพอยท์บรรทัดของโค้ดแบบมีเงื่อนไข
- เปิดแท็บแหล่งที่มา
- เปิดไฟล์ที่มีบรรทัดโค้ดที่คุณต้องการให้แยกไว้
- ไปที่บรรทัดของโค้ด
- ทางด้านซ้ายของบรรทัดโค้ดคือคอลัมน์หมายเลขบรรทัด คลิกขวาที่รายการดังกล่าว
- เลือกเพิ่มเบรกพอยท์แบบมีเงื่อนไข กล่องโต้ตอบจะปรากฏขึ้นใต้บรรทัดโค้ด
- ป้อนเงื่อนไขในกล่องโต้ตอบ
- กด Enter เพื่อเปิดใช้งานเบรกพอยท์ ไอคอนสีส้มที่มีเครื่องหมายคำถามจะปรากฏที่ด้านบนของคอลัมน์หมายเลขบรรทัด
ตัวอย่างนี้แสดงเบรกพอยท์บรรทัดของโค้ดแบบมีเงื่อนไขที่เริ่มทำงานเฉพาะเมื่อ x
เกิน 10
ในการวนซ้ำ i=6
บันทึกเบรกพอยท์บรรทัดของโค้ด
ใช้เบรกพอยท์บรรทัดของโค้ด (จุดตรวจสอบ) เพื่อบันทึกข้อความไปยัง Console โดยไม่ต้องหยุดการดำเนินการชั่วคราวและไม่ทำให้โค้ดยุ่งเหยิงด้วยการเรียกใช้ console.log()
วิธีตั้งค่าจุดตรวจสอบ
- เปิดแท็บแหล่งที่มา
- เปิดไฟล์ที่มีบรรทัดโค้ดที่คุณต้องการให้แยกไว้
- ไปที่บรรทัดของโค้ด
- ทางด้านซ้ายของบรรทัดโค้ดคือคอลัมน์หมายเลขบรรทัด คลิกขวาที่รายการดังกล่าว
- เลือกเพิ่มจุดตรวจสอบ กล่องโต้ตอบจะปรากฏขึ้นใต้บรรทัดโค้ด
ป้อนข้อความบันทึกในกล่องโต้ตอบ คุณสามารถใช้ไวยากรณ์เดียวกันกับการเรียก
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'}
กด Enter เพื่อเปิดใช้งานเบรกพอยท์ ไอคอนสีชมพูที่มีจุด 2 จุดจะปรากฏที่ด้านบนของคอลัมน์หมายเลขเส้น
ตัวอย่างนี้แสดงจุดตรวจสอบที่บรรทัดที่ 30 ซึ่งบันทึกสตริงและค่าตัวแปรไปยังคอนโซล
แก้ไขเบรกพอยท์บรรทัดของโค้ด
ใช้แผงเบรกพอยท์เพื่อปิดใช้ แก้ไข หรือนำเบรกพอยท์บรรทัดโค้ดออก
แก้ไขกลุ่มเบรกพอยท์
แผงเบรกพอยท์จะจัดกลุ่มเบรกพอยท์ตามไฟล์และเรียงลำดับตามหมายเลขบรรทัดและคอลัมน์ โดยคุณจะใช้ Groups เพื่อดำเนินการต่อไปนี้ได้
- หากต้องการยุบหรือขยายกลุ่ม ให้คลิกที่ชื่อกลุ่ม
- หากต้องการเปิดหรือปิดใช้กลุ่มหรือเบรกพอยท์ทีละรายการ ให้คลิก ด้านข้างกลุ่มหรือเบรกพอยท์
- หากต้องการนำกลุ่มออก ให้วางเมาส์เหนือกลุ่มนั้นแล้วคลิก
วิดีโอนี้แสดงวิธียุบกลุ่มและปิดใช้หรือปิดใช้เบรกพอยท์ทีละรายการหรือทีละกลุ่ม เมื่อคุณปิดใช้เบรกพอยท์ แผงแหล่งที่มาจะทำเครื่องหมายเบรกพอยท์ข้างหมายเลขบรรทัดแบบโปร่งใส
กลุ่มจะมีเมนูตามบริบท ในแผงเบรกพอยท์ ให้คลิกขวาที่กลุ่มแล้วเลือกตัวเลือกต่อไปนี้
- นำเบรกพอยท์ทั้งหมดในไฟล์ (กลุ่ม) ออก
- ปิดใช้เบรกพอยท์ทั้งหมดในไฟล์
- เปิดใช้เบรกพอยท์ทั้งหมดในไฟล์
- นำเบรกพอยท์ทั้งหมดออก (ในทุกไฟล์)
- นำเบรกพอยท์อื่นๆ ออก (ในกลุ่มอื่นๆ)
แก้ไขเบรกพอยท์
วิธีแก้ไขเบรกพอยท์
- คลิก ข้างเบรกพอยท์เพื่อเปิดหรือปิดใช้ เมื่อคุณปิดใช้เบรกพอยท์ แผงแหล่งที่มาจะทำเครื่องหมายเบรกพอยท์ข้างหมายเลขบรรทัดแบบโปร่งใส
- วางเมาส์เหนือเบรกพอยท์แล้วคลิก เพื่อแก้ไข และ เพื่อนำออก
เมื่อแก้ไขเบรกพอยท์ ให้เปลี่ยนประเภทของเบรกพอยท์จากรายการแบบเลื่อนลงในตัวแก้ไขในบรรทัด
คลิกขวาที่เบรกพอยท์เพื่อดูเมนูตามบริบทของเบรกพอยท์ แล้วเลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
- แสดงตำแหน่ง
- แก้ไขเงื่อนไขหรือจุดตรวจสอบ
- เปิดใช้เบรกพอยท์ทั้งหมด
- ปิดใช้เบรกพอยท์ทั้งหมด
- นำเบรกพอยท์ออก
- นำเบรกพอยท์อื่นๆ ออก (ในทุกไฟล์)
- นำเบรกพอยท์ทั้งหมดออก (ในทุกไฟล์)
รับชมวิดีโอเพื่อดูการทำงานของการแก้ไขเบรกพอยท์ต่างๆ ไม่ว่าจะเป็นการปิดใช้ นำออก แก้ไขเงื่อนไข แสดงตำแหน่งจากเมนู และประเภทการเปลี่ยนแปลง
เบรกพอยท์การเปลี่ยนแปลง DOM
ใช้เบรกพอยท์การเปลี่ยนแปลง DOM เมื่อคุณต้องการหยุดชั่วคราวในโค้ดที่เปลี่ยนแปลงโหนด DOM หรือโหนดย่อย
วิธีตั้งค่าเบรกพอยท์การเปลี่ยนแปลง DOM
- คลิกแท็บองค์ประกอบ
- ไปที่องค์ประกอบที่ต้องการตั้งค่าเบรกพอยท์
- คลิกขวาที่องค์ประกอบ
- วางเมาส์เหนือหยุด แล้วเลือกการแก้ไขแผนผังย่อย การแก้ไขแอตทริบิวต์ หรือการนำโหนดออก
ตัวอย่างนี้แสดงเมนูตามบริบทสำหรับการสร้างเบรกพอยท์การเปลี่ยนแปลง DOM
คุณดูรายการเบรกพอยท์การเปลี่ยนแปลง DOM ได้ในที่ต่อไปนี้
- องค์ประกอบ > แผงเบรกพอยท์ DOM
- แหล่งที่มา > แผงด้านข้างเบรกพอยท์ DOM
จากที่นี่ คุณสามารถทำสิ่งต่อไปนี้
- เปิดหรือปิดใช้ด้วย
- คลิกขวา > นำออกหรือแสดงใน DOM
ประเภทของเบรกพอยท์การเปลี่ยนแปลง DOM
- การแก้ไขแผนผังย่อย ทริกเกอร์เมื่อโหนดย่อยของโหนดที่เลือกอยู่ถูกนำออกหรือเพิ่ม หรือเนื้อหาของโหนดย่อยมีการเปลี่ยนแปลง ไม่ทริกเกอร์เมื่อมีการเปลี่ยนแปลงแอตทริบิวต์โหนดย่อย หรือในการเปลี่ยนแปลงใดๆ กับโหนดที่เลือกอยู่ในขณะนี้
- การแก้ไขแอตทริบิวต์: ทริกเกอร์เมื่อมีการเพิ่มหรือนำแอตทริบิวต์ออกในโหนดที่เลือกอยู่ในปัจจุบัน หรือเมื่อค่าแอตทริบิวต์มีการเปลี่ยนแปลง
- การนำโหนดออก: ทริกเกอร์เมื่อโหนดที่เลือกอยู่ในปัจจุบันถูกนำออก
เบรกพอยท์ XHR/การดึงข้อมูล
ใช้เบรกพอยท์ XHR/การดึงข้อมูลเมื่อคุณต้องการพักเมื่อ URL คำขอของ XHR มีสตริงที่ระบุ เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดชั่วคราวในบรรทัดโค้ดที่ XHR เรียกใช้ send()
ตัวอย่างหนึ่งของกรณีที่วิธีนี้จะเป็นประโยชน์คือ การเห็นว่าหน้าเว็บขอ URL ที่ไม่ถูกต้อง และคุณต้องการค้นหาซอร์สโค้ด AJAX หรือการดึงข้อมูลที่ทําให้เกิดคําขอที่ไม่ถูกต้องอย่างรวดเร็ว
วิธีตั้งค่าเบรกพอยท์ XHR/การดึงข้อมูล
- คลิกแท็บแหล่งที่มา
- ขยายแผงเบรกพอยท์ XHR
- คลิก เพิ่มเบรกพอยท์
- ป้อนสตริงที่ต้องการให้ตัดข้อความ เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดชั่วคราวเมื่อมีสตริงนี้ อยู่ที่ใดก็ได้ใน URL คำขอของ XHR
- กด Enter เพื่อยืนยัน
ตัวอย่างนี้แสดงวิธีสร้างเบรกพอยท์ XHR/การดึงข้อมูลในเบรกพอยท์ XHR/การดึงข้อมูล สำหรับคำขอที่มี org
ใน URL
เบรกพอยท์ของ Listener เหตุการณ์
ใช้เบรกพอยท์ Listener เหตุการณ์เมื่อต้องการหยุดชั่วคราวในโค้ด Listener เหตุการณ์ที่เรียกใช้หลังจากเหตุการณ์เริ่มทำงาน คุณสามารถเลือกเหตุการณ์ที่เฉพาะเจาะจง เช่น click
หรือหมวดหมู่เหตุการณ์ เช่น เหตุการณ์เมาส์ทั้งหมด
- คลิกแท็บแหล่งที่มา
- ขยายแผงเบรกพอยท์ Listener เหตุการณ์ เครื่องมือสำหรับนักพัฒนาเว็บแสดงรายการหมวดหมู่เหตุการณ์ เช่น ภาพเคลื่อนไหว
- เลือกหนึ่งในหมวดหมู่เหล่านี้เพื่อหยุดชั่วคราวเมื่อใดก็ตามที่เหตุการณ์จากหมวดหมู่ดังกล่าวเริ่มทำงาน หรือขยายหมวดหมู่และตรวจสอบเหตุการณ์ที่เฉพาะเจาะจง
ตัวอย่างนี้แสดงวิธีสร้างเบรกพอยท์ 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()
จากคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ นี่คือกลยุทธ์หนึ่ง
- กำหนดเบรกพอยท์บรรทัดโค้ดในที่ที่ฟังก์ชันอยู่ในขอบเขต
- ทริกเกอร์เบรกพอยท์
- เรียกใช้
debug()
ในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บขณะที่โค้ดยังคงหยุดชั่วคราวในเบรกพอยท์บรรทัดของโค้ด
เบรกพอยท์ประเภท Trusted
Trusted Type API ช่วยป้องกันการแสวงหาประโยชน์ด้านความปลอดภัยที่เรียกว่าการโจมตี cross-site Scripting (XSS)
ในแผงเบรกพอยท์ของแท็บแหล่งที่มา ให้ไปที่ส่วนเบรกพอยท์การละเมิด CSP และเปิดใช้ตัวเลือกใดตัวเลือกหนึ่งหรือทั้ง 2 ตัวเลือก จากนั้นเรียกใช้โค้ด
ตรวจสอบ การละเมิดซิงก์
ในตัวอย่างนี้ การดำเนินการหยุดชั่วคราวในการละเมิดซิงก์
ตรวจสอบการละเมิดนโยบายของ
ในตัวอย่างนี้ การดำเนินการหยุดชั่วคราวเนื่องจากละเมิดนโยบาย นโยบายประเภท Trusted ตั้งค่าโดยใช้
trustedTypes.createPolicy
คุณดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ API ได้ดังนี้
- หากต้องการเป้าหมายด้านความปลอดภัยเพิ่มเติม โปรดไปที่ป้องกันช่องโหว่ในการเขียนสคริปต์ข้ามเว็บไซต์ของ DOM ด้วยประเภทที่เชื่อถือได้
- หากต้องการแก้ไขข้อบกพร่อง โปรดไปที่การใช้งานการแก้ไขข้อบกพร่อง CSP และ Trusted Types ใน Chrome DevTools