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

Sofia Emelianova
Sofia Emelianova

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

ภาพรวมของกรณีที่ควรใช้จุดหยุดพักแต่ละประเภท

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

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

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

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

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

  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 จุดจะปรากฏที่ด้านบนของคอลัมน์หมายเลขบรรทัด

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

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

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

ใช้ส่วนจุดหยุดเพื่อปิดใช้ แก้ไข หรือนําจุดหยุดบรรทัดโค้ดออก

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

วิธีปิดเสียงสถานที่พัก

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

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

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

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

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

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

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

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

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

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

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

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

รายการเบรกพอยต์ DOM ในแผงองค์ประกอบและแหล่งที่มา

ซึ่งคุณจะดำเนินการต่อไปนี้ได้

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

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

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

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

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

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

หากต้องการตั้งค่าเบรกพอยท์ 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

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

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

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

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

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

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

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

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

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

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

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

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

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

ข้อยกเว้นในการเรียกแบบไม่พร้อมกัน

ในขณะที่เปิดช่องทำเครื่องหมายรับหรือตรวจไม่พบไว้อย่างใดอย่างหนึ่งหรือทั้ง 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() จาก DevToolsconsole กลยุทธ์หนึ่งมีดังนี้

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

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

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

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

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

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

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

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

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ API