ข้อผิดพลาดสามารถ (จะ) เกิดขึ้นได้ทุกครั้งที่คุณเขียนโค้ดคอมพิวเตอร์ใหม่
รหัสโปรแกรมอาจมีข้อผิดพลาดทางไวยากรณ์หรือข้อผิดพลาดทางตรรกะ
ข้อผิดพลาดหลายประการเหล่านี้วินิจฉัยได้ยาก
บ่อยครั้งเมื่อโค้ดโปรแกรมมีข้อผิดพลาด จะไม่มีอะไรเกิดขึ้น มี ไม่มีข้อความแสดงข้อผิดพลาด และคุณจะไม่ได้รับข้อบ่งชี้ว่าจะค้นหาข้อผิดพลาดได้จากที่ไหน
การค้นหา (และแก้ไข) ข้อผิดพลาดในโค้ดโปรแกรมเรียกว่าการดีบักโค้ด
การดีบักไม่ใช่เรื่องง่าย แต่โชคดีที่เบราว์เซอร์สมัยใหม่ทั้งหมดมีในตัว ดีบักเกอร์ JavaScript
สามารถเปิดและปิดดีบักเกอร์ในตัวได้ โดยบังคับให้ต้องรายงานข้อผิดพลาด ผู้ใช้งาน.
ด้วยดีบักเกอร์ คุณยังสามารถตั้งค่าเบรกพอยต์ (ตำแหน่งที่มีการเรียกใช้โค้ด) สามารถหยุดได้) และตรวจสอบตัวแปรในขณะที่โค้ดกำลังดำเนินการ
โดยปกติ (ไม่เช่นนั้นให้ทำตามขั้นตอนที่ด้านล่างของหน้านี้) คุณจะเปิดใช้งานการดีบักในเบราว์เซอร์ของคุณด้วย ปุ่ม F12 และเลือก "คอนโซล" ในเมนูดีบักเกอร์
หากเบราว์เซอร์ของคุณรองรับการดีบัก คุณสามารถใช้ 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>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
เคล็ดลับ: อ่านเพิ่มเติมเกี่ยวกับวิธี console.log() ในการอ้างอิงคอนโซล JavaScript ของเรา
ในหน้าต่างดีบักเกอร์ คุณสามารถตั้งค่าเบรกพอยต์ในโค้ด JavaScript ได้
ที่เบรกพอยต์แต่ละจุด JavaScript จะหยุดดำเนินการและให้คุณตรวจสอบ ค่าจาวาสคริปต์
หลังจากตรวจสอบค่าแล้ว คุณสามารถดำเนินการโค้ดต่อได้ (โดยทั่วไปคือด้วย ปุ่มเล่น)
คำหลัก debugger หยุดการทำงานของ JavaScript และเรียกใช้ฟังก์ชันการดีบัก (ถ้ามี)
ซึ่งมีฟังก์ชันเดียวกับการตั้งค่าเบรกพอยต์ในตัวดีบักเกอร์
ถ้าไม่มีการดีบัก คำสั่งดีบักเกอร์จะไม่มีผลใดๆ
เมื่อเปิดใช้งานดีบักเกอร์ โค้ดนี้จะหยุดดำเนินการก่อนหน้านั้น ดำเนินการบรรทัดที่สาม
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Debugger</h2>
<p id="demo"></p>
<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>
<script>
let x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
โดยปกติ คุณจะเปิดใช้งานการดีบักในเบราว์เซอร์ของคุณด้วย F12 และเลือก "คอนโซล" ในเมนูดีบักเกอร์
มิฉะนั้น ให้ทำตามขั้นตอนเหล่านี้:
เปิดเบราว์เซอร์
จากเมนู ให้เลือก "เครื่องมือเพิ่มเติม"
จากเครื่องมือ ให้เลือก "เครื่องมือสำหรับนักพัฒนา"
สุดท้าย เลือกคอนโซล
เปิดเบราว์เซอร์
จากเมนู ให้เลือก "นักพัฒนาเว็บ"
สุดท้าย เลือก "เว็บคอนโซล"
เปิดเบราว์เซอร์
จากเมนู ให้เลือก "เครื่องมือสำหรับนักพัฒนา"
สุดท้ายเลือก "คอนโซล"
เปิดเบราว์เซอร์
จากเมนู ให้เลือก "นักพัฒนา"
จาก "นักพัฒนา" เลือก "เครื่องมือสำหรับนักพัฒนา"
สุดท้ายเลือก "คอนโซล"
ไปที่ Safari, การตั้งค่า, ขั้นสูง ในเมนูหลัก
ทำเครื่องหมาย "เปิดใช้งานแสดงเมนูพัฒนาในแถบเมนู"
เมื่อตัวเลือกใหม่ "พัฒนา" ปรากฏในเมนู:
เลือก "แสดงข้อผิดพลาด คอนโซล".
การดีบักคือกระบวนการทดสอบ ค้นหา และลดจุดบกพร่อง (ข้อผิดพลาด) ในโปรแกรมคอมพิวเตอร์
จุดบกพร่องคอมพิวเตอร์ครั้งแรกที่ทราบคือจุดบกพร่องจริง (แมลง) ที่ติดอยู่ในอุปกรณ์อิเล็กทรอนิกส์