ดีบัก JavaScript

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

บทแนะนำนี้จะแนะนำเวิร์กโฟลว์พื้นฐานสำหรับการแก้ไขข้อบกพร่องของ JavaScript ในเครื่องมือสำหรับนักพัฒนาเว็บ อ่านแล้ว เปิด หรือดูวิดีโอบทแนะนำนี้ในเวอร์ชันวิดีโอ

จำลองข้อบกพร่อง

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

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

ผลลัพธ์ของ 5 + 1 คือ 51 ค่านี้ควรเป็น 6

ในตัวอย่างนี้ ผลลัพธ์ของ 5 + 1 คือ 51 ค่านี้ควรเป็น 6

ทำความคุ้นเคยกับ UI ของแผงแหล่งที่มา

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

  1. เปิดเครื่องมือสำหรับนักพัฒนาเว็บและไปที่แผงแหล่งที่มา

    แผงแหล่งที่มา

แผงแหล่งที่มามี 3 ส่วนดังนี้

ส่วนที่ 3 ของแผงแหล่งที่มา

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

  3. ส่วนโปรแกรมแก้ไขข้อบกพร่อง เครื่องมือต่างๆ สำหรับตรวจสอบ JavaScript ของหน้าเว็บ

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

โปรแกรมแก้ไขข้อบกพร่องทางด้านขวาของหน้าต่างแบบกว้าง

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

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

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

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

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

กล่าวโดยสรุป เบรกพอยท์จะช่วยให้คุณค้นหาและแก้ไขข้อบกพร่องได้เร็วกว่าเมธอด console.log()

ถ้าคุณย้อนกลับไป 1 ก้าวและนึกถึงวิธีการทำงานของแอป คุณก็น่าจะเดาอย่างมีเหตุผลว่า ผลรวมที่ไม่ถูกต้อง (5 + 1 = 51) ได้รับการคำนวณใน Listener เหตุการณ์ click ที่เชื่อมโยงกับ ปุ่มเพิ่มหมายเลข 1 และหมายเลข 2 ดังนั้น คุณอาจต้องหยุดโค้ดชั่วคราว ที่ Listener click ดำเนินการ เบรกพอยท์ของ Listener เหตุการณ์ช่วยให้คุณทำสิ่งเหล่านี้ได้

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

  3. เลือกช่องทำเครื่องหมายคลิก ขณะนี้เครื่องมือสำหรับนักพัฒนาเว็บได้รับการตั้งค่าให้หยุดชั่วคราวโดยอัตโนมัติเมื่อclickใดก็ตาม Listener เหตุการณ์ดำเนินการ

    "คลิก" อยู่

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

    function onClick() {

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

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

เลื่อนดูโค้ด

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

  1. ในแผงแหล่งที่มาของเครื่องมือสำหรับนักพัฒนาเว็บ ให้คลิกstep_into เข้าสู่การเรียกใช้ฟังก์ชันถัดไปเพื่อเข้าสู่การเรียกใช้ฟังก์ชัน onClick() ทีละบรรทัด เครื่องมือสำหรับนักพัฒนาเว็บจะไฮไลต์โค้ดบรรทัดต่อไปนี้

    if (inputsAreEmpty()) {

  2. คลิก step_over ข้ามการเรียกใช้ฟังก์ชันถัดไป

    เครื่องมือสำหรับนักพัฒนาเว็บจะเรียกใช้ inputsAreEmpty() โดยไม่ต้องดำเนินการใดๆ สังเกตวิธีที่เครื่องมือสำหรับนักพัฒนาเว็บข้าม โค้ด เนื่องจากประเมิน inputsAreEmpty() เป็น "เท็จ" ดังนั้นบล็อกของคำสั่ง if ของ โค้ดไม่ทำงาน

นั่นเป็นแนวคิดเบื้องต้นในการเขียนโค้ด หากดูโค้ดใน get-started.js คุณจะสามารถ เห็นว่าข้อบกพร่องน่าจะอยู่ตรงไหนในฟังก์ชัน updateLabel() แทนที่จะก้าวผ่านเข้ามา โค้ดทุกบรรทัด คุณสามารถใช้เบรกพอยท์ประเภทอื่นเพื่อหยุดโค้ดชั่วคราวเมื่อใกล้กับโค้ดที่น่าจะเป็น ตำแหน่งของข้อบกพร่อง

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

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

  1. ดูโค้ดบรรทัดสุดท้ายใน updateLabel():

    label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

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

  3. คลิก ดำเนินการต่อ ใช้งานสคริปต์ต่อ สคริปต์จะทำงานต่อไปจนถึงบรรทัดที่ 32 ในบรรทัดที่ 29, 30 และ 31 เครื่องมือสำหรับนักพัฒนาเว็บแสดงค่าของ addend1, addend2 และ sum ในบรรทัดถัดจากการประกาศ

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

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

ตรวจสอบค่าตัวแปร

ค่าของ addend1, addend2 และ sum ดูน่าสงสัย แล้วตามด้วยเครื่องหมายคำพูด ซึ่งหมายถึงสตริง นี่คือสมมติฐานที่ดีในการอธิบายสาเหตุของข้อบกพร่อง เริ่มเลย ก็ถึงเวลาที่จะรวบรวมข้อมูลเพิ่มเติม เครื่องมือสำหรับนักพัฒนาเว็บมีเครื่องมือจำนวนมากสำหรับการตรวจสอบตัวแปร

วิธีที่ 1: ตรวจสอบขอบเขต

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

ดับเบิลคลิกค่าตัวแปรเพื่อแก้ไข

แผงขอบเขต

วิธีที่ 2: นิพจน์การดู

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

ลองเลย

  1. คลิกแท็บดู
  2. คลิกเพิ่ม เพิ่มนิพจน์การดู
  3. พิมพ์ typeof sum
  4. กด Enter เครื่องมือสำหรับนักพัฒนาเว็บแสดง typeof sum: "string" ค่าทางด้านขวาของเครื่องหมายโคลอนคือค่า ผลลัพธ์นิพจน์

แผงนิพจน์การดู

ภาพหน้าจอนี้แสดงแท็บดู (ขวาล่าง) หลังจากสร้างนาฬิกา typeof sum เท่านั้น

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

วิธีที่ 3: คอนโซล

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

  1. หากไม่มีลิ้นชักคอนโซลเปิดอยู่ ให้กด Escape เพื่อเปิด ซึ่งจะเปิดขึ้นที่ด้านล่างของ หน้าต่างเครื่องมือสำหรับนักพัฒนาเว็บ
  2. พิมพ์ parseInt(addend1) + parseInt(addend2) ในคอนโซล ข้อความนี้ได้ผลเนื่องจากคุณ หยุดชั่วคราวในโค้ดบรรทัดหนึ่งที่ addend1 และ addend2 อยู่ในขอบเขต
  3. กด Enter DevTools จะประเมินคำสั่งและพิมพ์ 6 ซึ่งเป็นผลลัพธ์ที่คุณคาดไว้ เพื่อสาธิตให้คุณดู

ลิ้นชักคอนโซล หลังจากประเมินตัวแปรที่อยู่ในขอบเขต

ภาพหน้าจอนี้แสดงลิ้นชักคอนโซลหลังจากประเมินผล parseInt(addend1) + parseInt(addend2)

ใช้การแก้ไข

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

  1. คลิก ดำเนินการต่อ ใช้งานสคริปต์ต่อ
  2. ในตัวแก้ไขโค้ด ให้แทนที่บรรทัดที่ 31, var sum = addend1 + addend2 ด้วย var sum = parseInt(addend1) + parseInt(addend2)
  3. กด Command + S (Mac) หรือ Control + S (Windows, Linux) เพื่อบันทึกการเปลี่ยนแปลง
  4. คลิก label_off ปิดใช้งานเบรกพอยท์ สีจะเปลี่ยนเป็นสีน้ำเงินเพื่อระบุว่าทำงานอยู่ เมื่อตั้งค่านี้ไว้ เครื่องมือสำหรับนักพัฒนาเว็บจะละเว้น ที่คุณตั้งค่าไว้
  5. ลองใช้เดโมที่มีค่าต่างกัน เดโมจะคำนวณได้อย่างถูกต้องแล้ว

ขั้นตอนถัดไป

บทแนะนำนี้แสดงเพียง 2 วิธีในการตั้งค่าเบรกพอยท์ เครื่องมือสำหรับนักพัฒนาเว็บมีวิธีอื่นๆ อีกมากมาย ซึ่งรวมถึง

  • เบรกพอยท์แบบมีเงื่อนไขที่จะถูกเรียกใช้เมื่อเงื่อนไขที่คุณระบุเป็นจริงเท่านั้น
  • เบรกพอยท์ของข้อยกเว้นที่ตรวจพบหรือไม่พบ
  • เบรกพอยท์ XHR ที่ทริกเกอร์เมื่อ URL ที่ขอตรงกับสตริงย่อยที่คุณระบุ

ดูหยุดโค้ดชั่วคราวด้วยเบรกพอยท์เพื่อเรียนรู้เวลาและวิธีใช้แต่ละประเภท

มีการควบคุมขั้นตอนการใช้โค้ด 2 รายการที่ไม่ได้อธิบายในบทแนะนำนี้ ดูข้าม เพื่อดูข้อมูลเพิ่มเติม