เทคนิคการ DEBUG เป็นอะไรที่จำเป็นต้องรู้ มากๆเลย ในการเขียนโปรแกรม ถ้าเรา DEBUG ไม่เป็นเราก็จะไม่สามารถหาข้อผิดพลาดของสคริปต์ได้เลย

บางภาษาก็สามารถ DEBUG ได้ง่ายๆ ด้วยการ echo เอา ตัวแปรที่สงสัยออกมา ไม่จำเป็นต้องใช้เครื่องมือใดๆในการตรวจสอบ บางภาษาก็จำเป็นต้องพึ่งความสามารถของ IDE ในการ DEBUG ในบทความนี้ผมจะพูดถึงเฉพาะ การ DEBUG บน PHP และ Javascript เท่านั้น

เครื่องมือที่ใช้ในการ debug

• PHP มีคำสั่งสำหรับแสดงผลข้อมูลออกทางหน้าจอหลายคำสั่ง เช่น echo print_r() var_export() ใช้สำหรับดูค่าของตัวแปรได้ มันเป็นวิธีการพื้นฐานที่สุดในการ DEBUG เลยครับ ไม่ต้องมีเครื่องมือใดๆ ใช้งานได้ทุกที่ ทุกเวลา เท่าที่ต้องการ แม้บนเว็บที่ออนไลน์อยู่

  ส่วนตัว ผมแนะนำ var_export() เพราะในกรณีที่ไม่รู้ชนิดของตัวแปรมันสามารถแสดงผลตัวแปรพร้อมกับประเภทของตัวแปรได้ด้วย แต่อาจดูรกนิดๆ

• Javascript มี alert() และ console.log() สามารถใช้ debug Javascipt ได้ ส่วนใหญ่ผมจะใช้ console.log() เพราะมันสะดวกดี ไม่แสดงผลออกทางหน้าจอ

PHP มี tools ที่ช่วยในการ DEBUG ร่วมกับ IDE ที่สำคัญอยู่ 1 ตัว คือ XDEBUG (มีอีกหรือเปล่าไม่รู้ แต่เคยใช้แค่ตัวเดียว) XDEBUG สามารถใช้ร่วมกับ IDE ได้ ในการ DEBUG การทำงานของโค้ด ซึ่งก็สะดวกดี สามารถกำหนดจุดหยุด หรือ ดูค่าตัวแปรต่างๆในระบบได้ในขณะรัน การใช้งานต้องติดตั้งเพิ่มเติม และกำหนดค่า IDE ให้ถูกต้อง (การใช้งาน XDEBUG เพื่อ Debug การทำงานของ PHP บน VSCode)

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

Javascript สามารถใช้ Develop Tools ของ Browser ช่วยในการตรวจสอบด้วยได้เช่นกัน และเช่นกัน เท่าที่ใช้มา console.log() ทำงานได้เร็วและสะดวกกว่า

แต่ทั้ง XDEBUG และ Develop Tools ต่างก็มีประโยชน์จริงๆในการทำงาน เช่น การตรวจสอบเส้นทางการทำงานของโค้ด เพราะถ้ามัวใช้วิธี echo เพื่อติดตามการทำงาน จะเสียทั้งเวลา และ สร้างความยุ่งยากมากกว่าการใช้เครืองมือ

เทคนิคการ debug

• การติดตามตัวแปร ด้วยการ echo print_r() var_export() หลายๆคน เห็น error หรือแม้แต่ไม่เห็น error แต่ไม่รู้ว่าจะแก้ไขยังไง ตรงไหน จริงๆแล้ว ปัญหานี้เป็นเพราะเราไม่รู้ว่าสคริปต์ทำงานอย่างไร (เอาจริงๆ คือ เราไม่จำเป้นต้องรู้ทั้งหมดหรอก แค่รู้ว่ามันทำงานที่ไฟล์ไหนบ้างก็พอ ซึ่งถ้าเป็นเว็บสมัยใหม่ เรียกใช้งานแต่ละทีโหลดมาเป็นสิบไฟล์อันนี้ก็ปวดตับหน่อย) ในข้อนี้ ถ้าเราอยากรู้จริงๆ XDEBUG จะตอบโจทย์ที่สุด เพราะเราจะรู้ได้เลยว่าสคริปต์ทำงานอะไรบ้าง ที่ไฟล์ไหนบ้าง จนกว่าจะจบการทำงาน
  ในกรณีของคนที่มีประสบการณ์ อาจจะพอเดาได้ หรือไม่ Error มันบอกเราชัดเจนว่าผิดพลาดที่บรรทัดไหน เราก็แค่ echo เอาตัวแปรที่สงสัยออกมาดูเท่านั้น เคสนี้ ที่เจอบ่อยๆ เช่น คำสั่ง SQL ผิด ต้องสั่งให้ไป echo เอาคำสั่ง SQL มาดู แล้วนำไปทดสอบบน phpMyAdmin อีกที
• ใช้ติดตามว่า โค้ด รันไปได้ถึงตรงไหน เพื่อให้การหาจุดที่ผิดพลาด แคบลง
  
  function someFunction(){
  
     // โค้ดครึ่งแรก
  
    echo __FILE__;
    exit();
  
      // โค้ดครึ่งหลัง
  }
  
  โค้ด ด้านบน ถ้าเราเห็นชื่อไฟล์ทางหน้าจอ แสดงว่า โค้ดทำมาถึงบรรทัดนั้นแล้วแน่ๆ ที่ผิดก็จะอยู่ในครึ่งหลัง (สามารถสั่งให้แสดงตัวแปรที่สงสัยแทนก็ได้)
  ถามว่าเทคนิคนี้ ใช้ XDEBUG ร่วมกับ IDE แทนจะสะดวกกว่ามั้ย ตอบง่ายๆเลยคือ สะดวกกว่าแน่ๆครับถ้าทดสอบในเครื่องของเราเอง แต่ถ้าออนไลน์มันทำไม่ได้

แถม เทคนิคการ DEBUG แบบไม่รบกวนการทำงาน
เนื่องจาก การ echo ผลลัพท์ออกทางหน้าจอ จะทำให้คนอื่นๆเห็นข้อความแปลกๆ นั้นไปด้วย เราสามารถใช้คำสั่งง่ายๆ เพื่อเปลี่ยนการแสดงผลจาหนห้าจอของบราวเซอร์ไปยัง Console ของ Browser แทน

echo '<script>console.log("'.htmlspecialchars(stripslashes(str_replace(array("\r", "\n"), '', var_export($expression, true)))).'")</script>';

ใช้วิธีแสดงตัวแปร php บน console ของบราวเซอร์มันซะเลย โดยที่ตัวแปรที่จะ DEBUG อยู่ที่ $expression ถ้าจะให้สะดวกก็สร้างเป็นฟังก์ชั่นไว้ก็ได้ (Kotchasan ชื่อฟังก์ชั่นนี้คือ debug())

สำหรับในกรณีของ Javascript ผมแนะนำให้ใช้ console.log() แทน alert() ในการ DEBUG ครับ ยกเว้นกรณีที่ต้องการหยุดการทำงานเมื่อถึงจุดที่ต้องการ DEBUG