JavaScript Debugging
ข้อผิดพลาดอาจเกิดขึ้นได้ทุกครั้งที่คุณเขียนรหัสคอมพิวเตอร์ใหม่
การแก้จุดบกพร่องรหัส
รหัสการเขียนโปรแกรมอาจมีข้อผิดพลาดทางไวยากรณ์หรือข้อผิดพลาดทางตรรกะ
ข้อผิดพลาดหลายอย่างเหล่านี้วินิจฉัยได้ยาก
บ่อยครั้งเมื่อโค้ดโปรแกรมมีข้อผิดพลาด จะไม่มีอะไรเกิดขึ้น ไม่มีข้อความแสดงข้อผิดพลาด และคุณจะไม่ได้รับข้อมูลบ่งชี้ว่าจะค้นหาข้อผิดพลาดได้จากที่ใด
การค้นหา (และแก้ไข) ข้อผิดพลาดในโค้ดโปรแกรมเรียกว่า การดีบักโค้ด
ดีบักเกอร์ JavaScript
การดีบักไม่ใช่เรื่องง่าย แต่โชคดีที่เบราว์เซอร์สมัยใหม่ทั้งหมดมีตัวดีบัก JavaScript ในตัว
ดีบักเกอร์ในตัวสามารถเปิดและปิดได้ บังคับให้รายงานข้อผิดพลาดไปยังผู้ใช้
ด้วยดีบักเกอร์ คุณยังสามารถตั้งค่าเบรกพอยต์ (ตำแหน่งที่สามารถหยุดการรันโค้ดได้) และตรวจสอบตัวแปรในขณะที่รันโค้ด
โดยปกติ มิฉะนั้น ให้ทำตามขั้นตอนที่ด้านล่างของหน้านี้ คุณจะเปิดใช้งานการดีบักในเบราว์เซอร์ของคุณด้วยปุ่ม F12 และเลือก "คอนโซล" ในเมนูดีบักเกอร์
console.log() เมธอด
หากเบราว์เซอร์ของคุณรองรับการดีบัก คุณสามารถใช้console.log()
เพื่อแสดงค่า JavaScript ในหน้าต่างดีบักเกอร์ได้:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
เคล็ดลับ:อ่านเพิ่มเติมเกี่ยวกับconsole.log()
วิธีการในการอ้างอิงคอนโซล JavaScriptของ เรา
การตั้งค่าเบรกพอยต์
ในหน้าต่างดีบักเกอร์ คุณสามารถตั้งค่าเบรกพอยต์ในโค้ด JavaScript
ที่จุดพักแต่ละจุด JavaScript จะหยุดดำเนินการ และให้คุณตรวจสอบค่า JavaScript
หลังจากตรวจสอบค่าแล้ว คุณสามารถดำเนินการโค้ดต่อได้ (โดยทั่วไปจะมีปุ่มเล่น)
คำหลักดีบักเกอร์
คีย์เวิร์ดหยุด การdebugger
ทำงานของ JavaScript และเรียกใช้ฟังก์ชันการดีบัก (ถ้ามี)
มีฟังก์ชันเดียวกับการตั้งค่าเบรกพอยต์ในดีบักเกอร์
ถ้าไม่มีการดีบัก คำสั่งดีบักเกอร์จะไม่มีผล
เมื่อเปิดโปรแกรมดีบั๊ก โค้ดนี้จะหยุดทำงานก่อนที่จะรันบรรทัดที่สาม
ตัวอย่าง
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
เครื่องมือดีบั๊กของเบราว์เซอร์หลัก
โดยปกติ คุณเปิดใช้งานการดีบักในเบราว์เซอร์ของคุณด้วย F12 และเลือก "คอนโซล" ในเมนูดีบักเกอร์
มิฉะนั้น ให้ทำตามขั้นตอนเหล่านี้:
โครเมียม
- เปิดเบราว์เซอร์
- จากเมนู เลือก "เครื่องมือเพิ่มเติม"
- จากเครื่องมือ ให้เลือก "เครื่องมือสำหรับนักพัฒนา"
- สุดท้าย เลือกคอนโซล
Firefox
- เปิดเบราว์เซอร์
- จากเมนู เลือก "นักพัฒนาเว็บ"
- สุดท้าย เลือก "เว็บคอนโซล"
ขอบ
- เปิดเบราว์เซอร์
- จากเมนู เลือก "เครื่องมือสำหรับนักพัฒนา"
- สุดท้าย เลือก "คอนโซล"
โอเปร่า
- เปิดเบราว์เซอร์
- จากเมนู เลือก "นักพัฒนา"
- จาก "นักพัฒนา" เลือก "เครื่องมือสำหรับนักพัฒนา"
- สุดท้าย เลือก "คอนโซล"
ซาฟารี
- ไปที่ Safari, Preferences, Advanced ในเมนูหลัก
- ทำเครื่องหมายที่ "เปิดใช้งานแสดงเมนูพัฒนาในแถบเมนู"
- เมื่อตัวเลือกใหม่ "พัฒนา" ปรากฏขึ้นในเมนู:
เลือก "แสดงคอนโซลข้อผิดพลาด"
เธอรู้รึเปล่า?
การดีบักเป็นกระบวนการของการทดสอบ ค้นหา และลดจุดบกพร่อง (ข้อผิดพลาด) ในโปรแกรมคอมพิวเตอร์
บั๊กคอมพิวเตอร์ตัวแรกที่รู้จักคือบั๊กจริง (แมลง) ติดอยู่ในอุปกรณ์อิเล็กทรอนิกส์