Php debug with netbeans

ก่อนที่เราจะทำการ Debug ได้นั้นต้องเริ่มจากการ config ก่อนครับโดยที่

1. เริ่มจากเปิด php.ini ก่อนเลยครับด้วย Text editor ตัวไหนก็ได้แล้วแต่ความถนัด
   Path file ของ Xampp จะเป็นดังนี้ครับ
   C:\xampp\php\php.ini
   
   
   เมื่อเปิดขึ้นมาแล้วให้เลื่อนลงมาด้านล่างครับจะเห็น [Zend] กับ [Xdebug] ให้เราคอมเม้นในส่วนของ [Zend] เอาไว้ให้หมดเลยครับโดยใช้เครื่องหมาย Semicolon( ; ) ครับแล้วให้เปิดคอมเม้นของ [Xdebug] แทน ตามภาพเลยนะครับ
   ในที่นี้จะเห็นว่า ผมได้เปลี่ยน xdebug.remote_port เป็น 10000 แทนที่จะเป็น 9000 ส่วนหนึ่งเพราะมีการใช้งาน port 9000 ไปแล้วกับ Eclipse (ถ้ามี debug ตัวเดียวก็ใช้ Port 9000 ต่อได้เลยครับ)
   
   
   
2.  จากนั้นให้เราทำการ Restart Xampp ครับ
   
   
   
   ใน Window สามารถใช้งาน xampp_restart.exe ได้เลยครับ
   หลังจากที่ Restart xampp ไปแล้วสามารถเช็คว่า เราเปิด Xdebug แล้วรึยังได้ดังนี้ครับ
   
   
   คือเข้าไปที่ http://localhsot/xamp จากนั้นคลิกที่ phpinfo() ครับแล้วเราก็ดู Xdebug เราครับว่า enabled แล้วรึยังถ้า enabled ได้จะเป็นตามภาพเลยครับ (ตัว Version อาจจะเปลี่ยนไปตามรุ่นของ Xampp ต่างๆ)
3. จากนั้นมาดูที่ตัวของ Netbeans กันบ้างครับโดยเข้าไปที่ Tools > Options
   
   
   จากนั้นให้คลิกที่ Tab ของ PHP ครับแล้วก็เลือกไฟล์ php.ini ที่เราพึ่งแก้ไปเมื่อตะกี้ แล้วก็เลือก Debugger Port ตามใน xdebug.remote_port ที่เราเคยแก้ในข้อแรกครับเสร็จแล้วคลิก OK เป็นอันเสร็จเรียบร้อยครับสำหรับการตั้งค่า

 ใน Entry นี้เราจะมาเกริ่นคร่าวๆกันก่อนนะครับว่า แต่ละปุ่มเวลา Debug มันมีอะไรกันบ้าง

ภาพข้างบนนี้เป็นภาพที่เราได้สร้าง โปรเจคไว้ก่อนแล้ว เอาเป็นว่าปุ่มที่เราใช้เวลา Debug นั้นหน้าตามันเป็นตามภาพตัวอย่างนี้เลยนะครับ ส่วนจุดสีแดงๆที่เห็นในโค้ดจุดนั้นก็เป็นจุดที่เรา Breakpoint เอาไว้ เวลาที่เราทำการ Debug มันก็จะไปหยุดที่จุดสีแดงๆนั้นหละครับ
คีย์ลัดในการใช้งาน
Ctrl + F5 : Debug project
ส่วนการ สร้าง Breakpoint ใน Netbeans นั้นสามารถที่จะคลิกที่ตัวเลขของบรรทัดนั้นๆได้เลยครับ

หลังจากที่เรากดปุ่ม Debug ไปแล้วจะมีปุ่มเพิ่มขึ้นมาทางขวามือครับ

มีรายละเอียดดังต่อไปนี้ครับ

1. ปุ่มสีแดงๆเอาไว้หยุด Debug ครับ
2. ปุ่มสีเขียวคลิกแล้วมันจะวิ่งไปยังจุดที่เราได้ Breakpoint เอาไว้จุดแรกครับ
3. ปุ่มที่มีลูกศรเวียนซ้ายคือปุ่ม Step Over ครับพอเราคลิกแล้วมันจะวิ่งข้าม function หรือ class นั้นๆไปเลย
4. ปุ่มที่มีลูกศรลงคือ Step Into ครับคลิกแล้วมันจะวิ่งเข้าไปใน function หรือ class นั้นๆ
5. ปุ่มลูกศรขึ้นคือ Step Out ใช้ต่อจาก Step Into ครับนั่นคือพอเราเข้ามาใน function หรือ class แล้วเราอยากออกไปข้างนอกก็คลิกที่ปุ่มนี้หละครับ
6. ปุ่มสุดท้ายคือ Run to Cursor คลิกแล้วมันจะวิ่งไปยัง Cursor ที่เราคลิกที่บรรทัดนั้นๆครับ

คีย์ลัดในการใช้งาน
Shift + F5 : Finish dbugger session
F5 : Continue
F8 : Step Over
F7 : Step Info
Ctrl + F7 : Step Out
F4 : Run to cursor

ทีนี้ผมจะลองทดสอบกับ Joomla ดูนะครับ โดยในตัวอย่างนี้ผมได้ install component ง่ายๆเข้าไปหนึ่งตัว(com_hello)แล้วไปก๊อบเอาตัวอย่างจากในเว็บของ Netbeans มาใช้งาน ^^

 จากภาพด้านบนผมได้ Breakpoint เอาไว้หนึ่งจุดในหน้าทีใช้แสดงผลของ com_hello นะครับจากนั้นก็คลิกที่ปุ่ม Debug project(Ctrl+F5)

 

ในตอนแรกมันจะมีลูกศรสีเขียวๆเกิดขึ้นใน file index.php ครับถ้าเรากลับไปดูที่หน้า Browser ของเราจะเห็นว่ามันกำลัง Loading... อยู่อย่างนี้คือ Debug ติดครับ

กลับไปที่ Netbeans ก่อนนะครับ จากนั้นให้เราลอง Step Over ไปเรื่อยๆจะเห็นว่ามันไม่วิ่งไปยังจุดที่เราได้ Breakpoint เอาไว้นั่นก็เพราะว่ามันยังอยู่ในหน้าของ com_content ครับ ไม่ใช่ com_hello
หลังจากที่ตัว Loading... หายไปแล้ว( F8 ไปเรื่อยๆ) ให้เราปรับ url เป็น
http://localhost/hellophp/index.php?option=com_hello
หลังจากที่ Enter ไปแล้วคราวนี้หละครับมันจะไปหยุดตรงจุดที่เราได้ Breakpoint เอาไว้
กลับไปที่ Netbeans เราจะเห็นว่ามันอยู่ที่หน้า index.php เหมือนเดิมแต่ในคราวหน้าให้เรากด Continue(F5) ครับ

จะเห็นว่าคราวหน้ามันมาหยุดตรงจุดที่เรา Breakpoint เอาไว้พอดิบพอดี ^^ ทีนี้ลอง Step Info ไปสามครั้งครับ

จะเห็นแถบ Debug ของเราวิ่งเข้า function calculate_sum_of_factorials ซึ่งข้างใน function นี้ก็จะมี function อีกสองตัวคือ calculate_factorial กับ calculate_sum ทีนี้ให้เราลอง Step Over(F8) ดูครับ

จะเห็นว่ามันไม่วิ่งเข้า function calculate_factorial นี่หละครับคือ Step over จากนั้นลอง Step Info ดูอีกทีครับ

 คราวนี้มันวิ่งเข้าไปใน function calculate_factorial ... แล้วทีนี้เราจะออกมายังไงเพราะถ้า Step Info นี่คงต้องวนอยู่ใน for อีกหลายรอบเป็นแน่แท้... เราก็ Step Out ดูครับ

มันจะเด้งออกมาอยู่ที่ function calculate_sum แล้วเห็นป่ะ ^_____^ แต่ยังเหลืออีกหนึ่งตัวที่เรายังไม่ลองครับนั่นคือ... Run to cursor(F4) นั่นเอง... ว่าแล้วก็เอาเม้าส์ไปคลิกที่หน้า echo "The sum... เลยครับ

แล้วก็ลอง F4 เลยครับ

 มันก็จะข้าม function calculate_sum ไปเลยแล้วก็มาแสดงที่ตรง echo ทันที ^^
 เอาเป็นว่าพอจะเข้าใจหลักการคร่าวๆของการ Debug ไปแล้วนะครับ

ทีนี้มีอีกหนึ่งอย่างที่พลาดไม่ได้ในระหว่างที่เรานั้นทำ Debug คือการ Watch เพื่อดูค่าตัวแปรครับ

จากภาพด้านบนนี้มาจากช่วงตอนที่เราทำการ Debug นั่นหละครับถ้ามองลงมาด้านล่างๆของหน้าจอเราจะเห็น Tab ที่มีชื่อว่า Variables ครับใน Tab ตัวนี้จะอธิบายถึงตัวแปรต่างๆที่ใช้งานอยู่ว่ามี Type และ Value เป็นอะไรบ้าง

ซึ่งก่อนจะ Watch ได้นั้นก็ต้องการทำ Set ค่ากันก่อนโดยไปที่ Tools > Options > PHP > ติ๊กที่ Watches and Balloon Evaluation ครับ
ทีนี้เรามาลอง Watch กันดูครับว่าจะเป็นอย่างไรบ้าง โดยในระหว่างที่เรา Debug อยู่นั้นให้เรา New Watch(Ctrl+Shift+F7) หรือ ที่เมนูไปที่ Debug > New Watch... แล้วใส่ค่าตัวนี้เข้าไป

$factorial1+$factorial2

แล้วก็ OK

จากนั้นลอง Debug มาเรื่อยๆจนถึงบรรทัด return $result; ครับ
จะเห็นว่าตัว $factorial1-$factorial2 ที่เราใส่ไว้ครั้งแรกแสดงผลตรงกันข้ามกับที่ return ออกมาจาก function นั่นแสดงให้เห็นว่าในช่วงที่เราทำการ Debug อยู่นั้นเราสามารถที่จะเปลี่ยนค่าตัวแปรได้เพื่อที่จะทำการตรวจสอบในกรณีที่โปรแกรมของเรามีความผิดเพี้ยนนั่นเอง

ในเอ็นทรี่นี้คงจะไม่ยากเกินไปนะครับ ^^
ปล. ตัวอย่างของโค้ดชุดนี้ที่เป็นตัวอย่างการคำนวณไปดาวโหลดใน Link ข้างล่างได้เลยครับ

อ้างอิง

• การตั้งค่าเน็ตบีน (Netbeans overview) - ตาม doc.joomla
• รายละเอียดการ Debug จากเว็บ Netbeans

บทความที่เกี่ยวข้อง

1. Install Xampp
2. Install Java SE and Netbeans
3. Create project in Netbeans 
4. PHP Debug with Netbeans
5. Subversion with Netbeans