JS กวดวิชา

เจเอสโฮม JS Introduction JS Where To JS เอาท์พุต งบ JS JS ไวยากรณ์ JS ความคิดเห็น ตัวแปร JS เจเอส เลท JS Const JS Operators JS เลขคณิต JS Assignment ประเภทข้อมูล JS ฟังก์ชัน JS วัตถุ JS JS Events JS Strings JS String Methods JS String Search เทมเพลตสตริง JS JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates รูปแบบวันที่ JS JS วันที่รับเมธอด JS Date Set Methods JS Math JS สุ่ม JS Booleans JS เปรียบเทียบ JS Conditions JS Switch JS ลูปสำหรับ JS Loop สำหรับ In JS วนสำหรับ Of JS วนรอบในขณะที่ JS Break JS Iterables JS ชุด JS Maps JS Typeof JS ประเภทการแปลง JS Bitwise JS RegExp JS Errors JS ขอบเขต JS Hoisting JS โหมดเข้มงวด JS คำสำคัญนี้ JS Arrow Function JS Classes JS JSON JS Debugging คู่มือสไตล์ JS JS แนวทางปฏิบัติที่ดีที่สุด JS ความผิดพลาด JS Performance JS สงวนคำ

เวอร์ชัน JS

เวอร์ชัน JS JS 2009 (ES5) เจเอส 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / ขอบ JS History

วัตถุ JS

คำจำกัดความของวัตถุ คุณสมบัติของวัตถุ วิธีการวัตถุ การแสดงวัตถุ อุปกรณ์เสริมวัตถุ ตัวสร้างวัตถุ ต้นแบบวัตถุ วัตถุ Iterables ชุดวัตถุ แผนที่วัตถุ การอ้างอิงวัตถุ

ฟังก์ชัน JS

คำจำกัดความของฟังก์ชัน พารามิเตอร์ฟังก์ชัน เรียกใช้ฟังก์ชัน เรียกฟังก์ชัน ฟังก์ชัน สมัคร การปิดฟังก์ชัน

JS Classes

แนะนำคลาส การสืบทอดคลาส คลาสคงที่

JS Async

JS Callbacks JS แบบอะซิงโครนัส JS Promises JS Async/รอ

JS HTML DOM

บทนำ DOM วิธี DOM เอกสาร DOM องค์ประกอบ DOM DOM HTML แบบฟอร์ม DOM DOM CSS ภาพเคลื่อนไหว DOM กิจกรรม DOM DOM Event Listener การนำทาง DOM โหนด DOM DOM Collections รายการโหนด DOM

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Web APIs

แนะนำ Web API เว็บฟอร์ม API API ประวัติเว็บ API ที่เก็บข้อมูลเว็บ Web Worker API API ดึงเว็บ เว็บ Geolocation API

JS AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

JS JSON

บทนำ JSON ไวยากรณ์ JSON JSON กับ XML ประเภทข้อมูล JSON JSON Parse JSON สตริงริฟาย วัตถุ JSON อาร์เรย์ JSON เซิร์ฟเวอร์ JSON JSON PHP JSON HTML JSON JSONP

JS กับ jQuery

ตัวเลือก jQuery jQuery HTML jQuery CSS jQuery DOM

JS กราฟิก

JS กราฟิก JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

ตัวอย่าง JS

ตัวอย่าง JS JS HTML DOM JS HTML อินพุต JS HTML Objects JS HTML Events JS Browser JS Editor JS แบบฝึกหัด JS Quiz ใบรับรอง JS

JS References

วัตถุ JavaScript วัตถุ HTML DOM


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 ในเมนูหลัก
  • ทำเครื่องหมายที่ "เปิดใช้งานแสดงเมนูพัฒนาในแถบเมนู"
  • เมื่อตัวเลือกใหม่ "พัฒนา" ปรากฏขึ้นในเมนู:
    เลือก "แสดงคอนโซลข้อผิดพลาด"

เธอรู้รึเปล่า?

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