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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ตัวอย่างเช่น คุณจะบันทึกสิ่งต่อไปนี้ได้

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

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

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

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

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

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

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

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

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

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

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

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

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

เมนูตามบริบทของกลุ่ม

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

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

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

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

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

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

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

    เมนูตามบริบทของเบรกพอยท์

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

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

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

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

วิธีปิดเสียงตำแหน่งช่วงพัก

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

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

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

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

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

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

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

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

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

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

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

  • Elements > แผงเบรกพอยท์ 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/การดึงข้อมูลในเบรกพอยท์ XHR/การดึงข้อมูลสำหรับคำขอใดๆ ที่มี org ใน URL

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

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

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

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

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

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

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

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

นอกจากนี้ คุณยังดูรายการ Listener เหตุการณ์ได้ในElements > แผง 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 อย่าง จากนั้นเรียกใช้โค้ด

  • ตรวจสอบการละเมิดซิงก์ ช่องทำเครื่องหมาย

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

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

  • ตรวจสอบ ช่องทำเครื่องหมาย การละเมิดนโยบาย

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

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

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