มีน้องมันถามมาว่า x-debug มันไว้ใช้ทำอะไรอะพี่ เอาละครับผมจะอธิบายให้ฟังอีกครั้ง ปกติแล้วเวลาที่เราจะดีบักโค้ด PHP ของเราคนทั่วไปจะใช้คำสั่ง echo, vardump, die เพื่อแสดงค่าตัวแปรต่างๆออกมาทางหน้าจอ เพื่อทำการตรวจสอบ วิธีนี้มันก็เป็นวิธีที่ดีนะ แต่มันมีวิธีที่ดีกว่านั้น วิธีเก่าๆสาเหตุที่ควรเลิกใช้เพราะว่า

1. มันเสียเวลา

ข้อเสียข้อเดียวก็ใหญ่พอแล้ว แถมอีกข้อละกันคือ มันรก ต้องคอยพิมพ์คอยลบ ทำๆไม

x-debug คือตัวที่จะทำให้เราสามารถทำ break point ในโค้ดตำแหน่งบรรทัดไหนก็ได้ที่อยากให้ PHP มันรันมาถึงตรงนั้นแล้วหยุดรอให้เราตรวจสอบค่าต่างๆในตัวแปร แบบ Realtime แบบ Realtime นะท่าน เห็นค่าตัวแปรทุกตัว มันทำให้การดีบักโค้ดของเราง่ายขึ้น อีกทั้งยังสามารถบังคับให้ PHP มันรันโค้ดไปทีละบรรทัดได้เลย มันไปตายตรงบรรทัดไหน เราก็โฟกัสตรงบรรทัดนั้น ตรวจดูว่าทำไมมันตาย เท่านั้นยังไม่พอ เราสามารถสั่งให้ PHP พาเราเข้าไปยังฟังก์ชั่นย่อยๆ ที่เขียนเอาไว้

ถ้าลองฝึกใช้ให้เป็น ชีวิตท่านจะมีความสุขกับการจัดการเออเร่อมากเลย ไม่เป็นตาบอดคลำช้างอีกต่อไป

อันที่จริงผมเขียนเรื่อง x-debug มาหลายบทความแล้วล่ะ อ่านได้ที่นี่ http://select2web.com/?s=xdebug สำหรับวันนี้มาเพิ่มเรื่องการใช้ x-debug ร่วมกับ Sublime 3 (เวอร์ชั่น 2 ก็ทำเหมือนกัน)

ขั้นแรกที่จะต้องทำคือ เปิด x-debug ก่อน อ่านเอาจากลิ้งก์ที่ให้ไว้ด้านบน

ผมจะนำเสนอขั้นตอน จาก 0 เลยละกัน ขั้นตอนไหนที่ท่านทำไปแล้วก็ข้ามๆผ่านๆไป

ติดตั้ง Xdebug ใน Sublime 3

1. เปิด Sublime ขึ้นมา
2. คลิก View > Show Console
   
3. เข้าไปยังเว็บ https://sublime.wbond.net/installation ก้อปปี้โค้ดให้ตรงกับเวอร์ชั่นของ Sublime ที่ใช้อยู่ ในที่นี้คือ SUBLIME TEXT 3
   
4. วางโค้ดที่ก้อปปี้มาลงในช่อง Command แล้วกด Enter
   
5. รอสักครู่การติดตั้งตัวจัดการ Package ก็เสร็จสิ้น
   
6. จากนั้นคลิกเมนู Tools < Command Palete…
   
7. พิมพ์คำว่า Install Package แล้วกด Enter
   
8. จากนั้นพิมพ์คำว่า xdebug client แล้วกด Enter
   
9. รอแป้บนึง จากนั้นคลิกเมนู Tools จะมีเมนู Xdebug เพิ่มขึ้นมา
   

กระบวนการติดตั้ง Xdebug ลงใน Sublime 3 เสร็จสิ้น

ผมจะจินตนาการเอาว่า คุณใช้ Sublime เป็น Text Editor ประจำกายอยู่แล้ว มีโปรเจ็กที่สร้างไว้อยู่แล้ว อาจแต่เพียงว่าก่อนหน้านี้ไม่ได้สร้างเป็น Project ใน Sublime

ปรับแต่งโปรเจ็ก

1. คลิกเมนู Project > Add Folder to Project…
   
2. เมื่อเลือกโฟลเดอร์งานของท่านเข้ามาแล้ว มันก็จะแสดงรายการไฟล์ทั้งหมดที่อยู่ภายใน ซึ่งปกติถึงไม่เพิ่มเข้ามาเป็นโปรเจ็กมันก็แสดงอย่างนี้อยู่แล้ว
   
3. คลิกเมนู Project > Save Project As…
   
4. คลิกเมนู Project > Save Project As… Sublime จะให้ท่านบันทึกไฟล์ๆหนึ่ง ซึ่งไฟล์นั้นจะเป็นตัวเก็บการตั้งค่าภายในโปรเจ็ก ท่านจะบันทึกไว้ที่ไหนก็ได้ แต่แนะนำว่าเพื่อความสะดวกต่อการใช้งาน ให้บันทึกไว้ในโฟลเดอร์งานนั่นแหละ ตั้งชื่อเป็นอะไรก็ได้ อย่างของผมๆตั้งชื่อว่า sublime
   
5. เปิดไฟล์ที่เพิ่งบันทึกไปเมื่อกี้ขึ้นมา เพิ่มคำสั่งด้านล่างเข้าไป ตรงค่า url จะต้องเป็น url สำหรับรันโค้ดของท่าน เช่น http://localhost/myproject เป็นต้น เสร็จแล้วบันทึกซะ

   "settings": { "xdebug": { "url": "https://local.dev.trueid.net" } }

   "settings": { "xdebug": { "url": "https://local.dev.trueid.net" } }

   

ทดลองดีบัก

• เปิดไฟล์ php ที่ท่านต้องการดีบักโค้ด ขึ้นมา จากนั้นไปยังบรรทัดที่อยากจะให้ PHP มันรันไปแล้วหยุดอยู่ตรงนั้น คลิกขวาเลือก Add/Remove Breakpoint
  
• คลิกเมนู Tools > Xdebug > Start Debuging (Launch Browser)
  
• หน้าเว็บจะถูกเปิดขึ้นมา และสคริปต์จะถูกรันไปจอดตรงที่เรา Breakpoint ไว้
  
• หน้าเว็บจะถูกเปิดขึ้นมา และสคริปต์จะถูกรันไปจอดตรงที่เรา Breakpoint ไว้ เราจะเห็นค่าตัวแปรต่างๆทั้งหมดแบบ Realtime หรือใครจะเรียกว่า Runtime ก็แล้วแต่ มันจะทำให้การหาว่าบักที่มันเกิดๆเพราะอะไรได้ง่ายกว่าการใช้คำสั่ง echo มากนัก อีกทั้งประหยัดเวลามหาศาล แต่ก็อยู่บนเงื่อนไขที่ว่า ท่านใช้มันคล่องแล้ว
  

Ctl + Shift + F5 รันโค้ดต่อ
Ctl + Shift + F6 รันโค้ดบรรทัดถัดไป
Ctl + Shift + F7 สั่งรันเข้าไปยังฟังก์ชั่นย่อย
Ctl + Shift + F8 สั่งออกมาจากฟังก์ชั่นย่อย

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

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