ผมเชื่อนะ ว่าโปรแกรมเมอร์ภาษา php เวลาเขียนโปรแกรม แล้วต้องการตรวจสอบค่าในตัวแปร หรือตรวจสอบการทำงานของฟังค์ชัน ก็คงหนีไม่พ้นฟังค์ชันเหล่านี้แน่นอน
- var_dump
- print_r
- echo
- บลาาาๆๆๆๆๆๆๆ
จะดีไหม ถ้าเราสามารถสร้าง breakpoint แล้วตรวจสอบการทำงานต่างๆในขณะนั้น เหมือนพวก java พวก asp.net วันนี้ ฝันของพวกคุณเป็นจริงแล้ว!!! ด้วย tools ที่ชื่อว่า “xdebug”
ที่จริงเรื่องนี้ไม่ใช่เรื่องใหม่ครับ ผมบังเอิญท่องอยู่บนโลกออนไลน์เรื่อยๆ แล้วดั๊นไปเจอเข้า แล้วเห็นว่ามันเป็นอะไรที่น่าสนใจดี เลยอยากเอามานำเสนอดูครับ เอาหล่ะ เรามาลุยกันเลยดีกว่า
ตั้งค่า MAMP Pro
ผมเลือกใช้ MAMP Pro เนื่องจากใช้งานง่าย ทำงานบน OSX และมี Plugin ติดตั้งมาให้เยอะดี และตัว MAMP Pro ก็มีตัว xdebug ฝั่ง server-side ติดตั้งมาให้แล้ว แต่มันยังไม่ถูกเปิดใช้งานเป็นค่าเริ่มต้น (ด้วยเหตุผลทางด้านความปลอดภัยมั่ง) เราก็ต้องมาเปิดใช้งานมันเสียก่อน
แค่นี้ MAMP ของเราก็จะเปิดใช้งาน xdebug ฝั่ง server-side เรียบร้อยแล้ววว
ตั้งค่า Sublime Text และ xdebug client
คราวนี้ก็ต้องมาตั้งค่าตัว editor กันบ้าง เพื่อให้มันเชื่อมต่อกับ xdebug ฝั่ง server ได้ ในที่นี้ ผมใช้ Sublime Text 3 ตัว text editor คู่ใจของผม (ที่จริงแล้ว ตัว xdebug client มี plugin สำหรับ editor ตัวอื่นๆมากมาย แต่ในที่นี่ผมขอยกตัวอย่าง Sublime Text แหละกันครับ)
ก่อนที่เราจะติดตั้ง xdebug client เราจะต้องทำการติดตั้ง Package Control ให้กับตัว Sublime Text ซะก่อนครับ เราสามารถดูวิธีการติดตั้งได้ที่เว็บไซต์ของตัว Package Control ได้เลยครับ (ในที่นี้ผมขอไม่อธิบายในส่วยการติดตั้ง Package Control นะครับ)
https://packagecontrol.io/installation
หลังจากติดตั้ง Package Control เรียบร้อยแล้ว เราก็จะเริ่มติดตั้ง xdebug client ให้กับตัว Sublime Text กันครับ โดยทำการเปิดตัวติดตั้ง Package ผ่าน Package Control ก่อน ด้วยการกดปุ่ม Command + Shift + P (OSX) หรือ Ctrl + Shift + P (Linux + Windows) แล้วพิมพ์คำว่า Install Package แล้วกดปุ่ม Enter
หลังจากนั้นแล้ว ตัว Sublime Text ก็จะแสดงรายชื่อ Package มากมายขึ้นมา ให้เราพิมพ์คำว่า xdebug client แล้วกดปุ่ม enter
หลังจากนั้น ตัว Package Control จะติดตั้ง xdebug client ให้เรา ให้รอสักครู่ หลังจากที่ติดตั้งเสร็จ ให้เราเปิด Project ขึ้นมา หลังจากนั้นแล้ว ให้ทำการ save Sublime Text Project โดยไปที่เมนู Project => Save Project As…
หลังจากนั้น จะมีหน้าต่างให้บันทึกไฟล์ Project ของตัว Sublime Text ขึ้น แนะนำให้บันทึกไว้ที่เดียวกับไฟล์ที่เก็บ Project ของเราไว้ โดยไฟล์จะมีนามสกุล .sublime-project
หลังจากที่เราบันทึกไฟล์ Sublime Text Project เรียบร้อยแล้ว ให้ทำการเปิดไฟล์ที่เราบันทึกนั้นขึ้นมาด้วยตัว Sublime Text (เปิดด้วย Mode Editor นะครับ) แล้วในไฟล์ จะมีเนื้อหาประมาณนี้
{
"folders":
[
{
"path": "."
}
]
} |
ให้เราเพิ่ม Tag เข้าไป โดยไฟล์ Sublime Text Project ผลลัพธ์จะออกมาประมาณนี้ครับ
{
"folders":
[
{
"path": "."
}
],
"settings": {
"xdebug": {
"url": "http://localhost:8888/ttge2015",
}
}
} |
ในส่วนของ url ให้เปลี่ยน Path ของ Project ที่เราเก็บไว้ใน Server เช่น คุณเก็บไฟล์ Project เอาไว้ใน Folder ttge2015 อยู่บน Server localhost ทำงานที่ port 8888 ก็จะเป็น http://localhost:8888/ttge2015 เหมือนด้านบนครับ หลังจากนั้นก็ทำการบันทึกไฟล์นี้ครับ
เริ่มกระบวนการ Test
หลังจากนั้น ผมจะเริ่มกระบวนการ Test ผ่านการทำ Breakpoint บน Project ตัวอย่างของผมกันครับ โดยโปรเจ็คผมสร้างขึ้นโดยใช้ Codeigniter Framework และจะทำการทดสอบ Test เงื่อนไขบางอย่าง (ในที่นี่เป็นการตรวจสอบ Session ว่ามีค่าอย่างไร) ใน Controller ที่ชื่อว่า Admin ครับ
โดยการเพิ่ม Breakpoint นั้น ให้คุณไปบรรทัดที่ต้องการเพิ่ม Breakpoint คลิกขวาที่เลขบรรทัดเลือก xdebug => Add/Remove Breakpoint
หลังจากที่เราเพิ่ม Breakpoint แล้ว ก็มาลอง Debug กันครับ โดยเราสามารถเริ่ม Debug ได้ โดยไปที่ Tools => xdebug => Start Debugging (Launch Browser)
Sublime Text จะเปิด Browser ขึ้นมา พร้อมกับพาไปยัง URL ที่ Project เราโดยอัตโนมัติ (สังเกตุว่า จะมี ?XDEBUG_SESSION_START=sublime.xdebug ติดกับ URL ด้านหลังด้วย) หลังจากนั้น ให้เราไปยังหน้าที่เราทำ Breakpoint เอาไว้ เมื่อตัว xdebug เจอ Breakpoint มันจะหยุดการทำงานของ php script แล้วแสดง stacktrace ในฝั่ง Sublime Text ให้เราได้ Debug การทำงานของตัว php script กันครับ
หลังจากนั้น ก็จะสามารถตรวจสอบตัวแปรการทำงานต่างๆของ php ได้แล้วครับ หลังจากที่ตรวจสอบแล้ว ต้องการให้โปรแกรมทำงานต่อ ให้ไปที่เมนู Tools => xdebug => Run หรือถ้าต้องการหยุด เพื่อแก้ไขโปรแกรม ก็ไปที่เมนู Tools => xdebug => Stop ได้ครับ
หากกระบวนการ Debug ของคุณเสร็จสิ้นแล้ว ให้คุณไปที่เมนู Tools => xdebug => Stop Debugging (Close Windows) เพื่อให้ตัว Sublime Text ปิด xdebug ให้ครับ
เป็นไงบ้างครับ กับการ debug code php ด้วย xdebug แต่จากการทดสอบแล้ว การแสดงผลออกมานั้น ไม่ได้ละเอียดเท่ากับตัว debug ในภาษาอื่น แล้วยิ่งใช้กับ Framework หรือการเขียนแบบ OOP แล้วนั้น บางตัวแปร ก็ไม่สามารถ Extract ออกมาได้ แต่ถือว่าช่วยได้ในระดับนึงครับ ดีกว่าไปเขียนแสดงผลบน Screen ไหนต่อไหนครับ
Ref : http://xdebug.org/
Ref : https://github.com/martomo/SublimeTextXdebug
Ref : https://packagecontrol.io/packages/Xdebug
Ref : http://www.sitepoint.com/debugging-xdebug-sublime-text-3/