อ๊ะ ฉันทำอีกแล้ว: การดีบักข้อผิดพลาดทั่วไปใน JavaScript

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

เราเตือนคุณ: สำหรับผู้อ่าน "Habr" ทุกคน - ส่วนลด 10 rubles เมื่อลงทะเบียนในหลักสูตร Skillbox ใด ๆ โดยใช้รหัสส่งเสริมการขาย "Habr"

Skillbox แนะนำ: หลักสูตรภาคปฏิบัติ "นักพัฒนามือถือ PRO".

TypeError: ไม่ได้กำหนดคุณสมบัติ

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

โค้ดตัวอย่างด้านบนแสดงข้อผิดพลาด Uncaught TypeError: ไม่สามารถอ่านคุณสมบัติ 'โชคดี' ของไม่ได้กำหนด ปัญหาคือวัตถุ girl ไม่มีคุณสมบัติที่มีชื่อ แม้ว่าจะมีคุณสมบัติชื่อก็ตาม และเนื่องจากคุณสมบัติ girl.named ไม่ได้ถูกกำหนดไว้ คุณจึงไม่สามารถเข้าถึงได้ เนื่องจากไม่มีอยู่อย่างเป็นทางการ แต่ถ้าคุณแทนที่ girl.named.lucky ด้วย girl.name ทุกอย่างจะได้ผลและโปรแกรมจะส่งคืน Lucky

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติได้ อ่านที่นี่.

วิธีแก้ไข TypeErrors

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

ดังนั้น หากคุณพยายามเรียก girl() คุณจะได้รับข้อผิดพลาด Uncaught TypeError: yourVariable.bold ไม่ใช่ฟังก์ชัน และ girl ไม่ใช่ฟังก์ชัน เนื่องจากจริงๆ แล้วมันเป็นวัตถุที่ถูกเรียกใช้ ไม่ใช่ฟังก์ชัน

เพื่อกำจัดข้อผิดพลาด คุณต้องศึกษาตัวแปร แล้วสาวคืออะไร? girl.name คืออะไร? คุณสามารถค้นหาได้โดยการวิเคราะห์โค้ด การแสดงตัวแปรโดยใช้ console.log คำสั่งดีบักเกอร์ หรือการเรียกชื่อตัวแปรในคอนโซล คุณต้องตรวจสอบให้แน่ใจว่าสามารถดำเนินการกับประเภทข้อมูลที่อยู่ในตัวแปรได้ หากไม่พอดี ให้เปลี่ยน เช่น เพิ่มเงื่อนไขหรือลอง..catch block และเข้าควบคุมการดำเนินการของการดำเนินการ

กองล้น

หากคุณเชื่อว่าผู้แต่งเนื้อเพลงของเพลง Baby One More Time (นี่คือ Britney Spears ใช่แล้ว) คำที่โดนในบริบทนี้หมายถึงความปรารถนาของนักร้องที่จะถูกเรียกอีกครั้ง (นี่คือคำอธิบายของบริบทของ เพลง - บันทึกของผู้แปล) อาจเป็นไปได้ว่าความปรารถนานี้จะนำไปสู่การเพิ่มจำนวนการโทรในชีวิตจริง แต่ในการเขียนโปรแกรม นี่เป็นการเรียกซ้ำที่สามารถทำให้เกิดข้อผิดพลาดได้หาก call stack ล้น

ข้อผิดพลาดมีลักษณะดังนี้:

ข้อผิดพลาด: พื้นที่สแต็กไม่เพียงพอ (Edge)
ข้อผิดพลาดภายใน: การเรียกซ้ำมากเกินไป (Firefox)
RangeError: เกินขนาดสแต็กการโทรสูงสุด (Chrome)

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

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

ในกรณีนี้ stillBelieve ไม่สามารถเป็นเท็จได้ ดังนั้น oneMoreTime จะถูกเรียกในแต่ละครั้ง แต่ฟังก์ชันจะไม่มีวันเสร็จสมบูรณ์

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

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

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

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

คุณสามารถแก้ไขปัญหาได้ดังนี้:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

การดีบักลูปและการเรียกซ้ำไม่สิ้นสุด

หากคุณมีปัญหาเกี่ยวกับ Infinite Loop คุณจะต้องปิดแท็บใน Chrome หรือ Edge และปิดหน้าต่างเบราว์เซอร์ใน Firefox หลังจากนี้ คุณจะต้องวิเคราะห์โค้ดอย่างรอบคอบ หากคุณไม่พบปัญหาก็คุ้มค่าที่จะเพิ่มคำสั่งดีบักเกอร์ให้กับลูปหรือฟังก์ชันของคุณและตรวจสอบค่าของตัวแปร หากผลลัพธ์ไม่ตรงกับที่คาดไว้เราก็เปลี่ยนใหม่ก็ทำได้ง่ายๆ

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

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

ข้อผิดพลาดทางไวยากรณ์

หนึ่งในข้อผิดพลาดที่พบบ่อยที่สุดใน JavaScript คือ SyntaxError ส่วนขยายตัวแก้ไขข้อความจะช่วยคุณหลีกเลี่ยงได้ ตัวอย่างเช่น Bracket Pair Colorizer จะทำเครื่องหมายวงเล็บในโค้ดด้วยสีที่ต่างกัน และ Prettier หรือเครื่องมือวิเคราะห์ที่คล้ายกันทำให้สามารถค้นหาข้อผิดพลาดได้อย่างรวดเร็ว ตัวเลือกที่ดีที่สุดในการลดโอกาสที่จะเกิด SyntaxError คือการซ้อนให้น้อยที่สุด

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

Skillbox แนะนำ:

• หลักสูตรภาคปฏิบัติสองปี "ฉันเป็นนักพัฒนาเว็บ PRO".
• คอร์สออนไลน์ "นักพัฒนา C # จาก 0".
• หลักสูตรปีปฏิบัติ "นักพัฒนา PHP จาก 0 ถึง PRO".

ที่มา: will.com