ตั้งค่า Xdebug ร่วมกับ Visual Studio Code เพื่อใช้ดีบั๊กโค้ด PHP

123 ใครที่เขียนเคยจาวาหรือดอทเน็ตมาก่อนน่าจะคุ้นเคยกับการดีบั๊กโค้ดผ่าน IDE กันเป็นอย่างดี ที่เราสามารถตั้งเบรคพอยต์ให้โค้ดมาหยุดที่ตรงนั้นเพื่อดูค่าตัวแปรและอื่นๆ ได้ ซึ่งค่อนข้างน่าเสียดายว่าภาษา PHP นั้นไม่มีอะไรแบบนี้มาให้ในตัวจริงๆ แล้ว PHP ก็สามารถดีบั๊กในลักษณะเดียวกันนี้ได้เช่นกัน อย่างเช่นใครที่ใช้ Zend Studio หรือ PHPed นั้นจะมีระบบดีบั๊กมาให้ในตัว แต่สำหรับใครที่ไม่ได้ใช้ IDE ทั้งสองตัวดังกล่าวก็สามารถเซ็ตอัพระบบดีบั๊กด้วย Xdebug ได้ด้วยเช่นกัน (ส่วนใครใช้ PHPStorm จะพบว่ามันรองรับ Xdebug มาให้ในตัวตั้งแต่แรกอยู่แล้ว)

อะไรคือ Xdebug

Xdebug เป็นส่วนเสริมของ PHP ที่ช่วยเพิ่มความสามารถในการดีบั๊กแบบ Single-step ให้กับภาษา PHP เหมือนอย่างในภาษาอื่นๆ (ที่ตั้งเบรคพอยต์แล้วกด next เอาได้เรื่อยๆ นั่นแหละ เรียกว่า Single-step debuging) นอกจากนี้ยังช่วยปรับปรุงการแสดงผลให้กับ var_dump, รองรับ Stack trace สำหรับ error และ warning ต่างๆ แถมมี Profiler สำหรับตรวจสอบประสิทธิภาพของโค้ดอีก เรียกได้ว่าช่วยให้การแก้บั๊กใน PHP นั้นสะดวกกับชีวิตขึ้นมาเลยทีเดียว

ติดตั้ง Xdebug บน PHP ที่มากับแมค

ออกตัวก่อนว่าผมเพิ่งลองติดตั้ง Xdebug ใช้งานจริงๆ เมื่อคืนนี้เอง ทำให้ในตอนนี้จะมีเฉพาะวิธีบนแมคก่อนนะครับ สำหรับใครใช้วินโดวส์อาจจะต้องดำน้ำหาวิธีตั้งค่ากันเองไปก่อน (หรือข้ามไปใช้ VVV โลด) เดี๋ยวผมจะตามเขียนให้ทีหลังครับ

สำหรับใครที่ใช้ VVV หรือ MAMP สามารถข้ามไปหัวข้อถัดไปได้เลยครับ

การติดตั้ง Xdebug บนแมคจะมีสองวิธีหลักๆ คือติดตั้งผ่าน Homebrew หรือใช้วิธีคอมไพล์จากซอร์สโค้ด ในที่นี้ผมจะใช้วิธีติดตั้งผ่าน Homebrew ซึ่งใครที่ยังไม่มี Homebrew อยู่ในเครื่อง สามารถเข้าไปดูวิธีติดตั้งได้ในนี้หลังจากมี Homebrew แล้ว ให้เปิด Terminal ขึ้นมาแล้วตรวจสอบเวอร์ชันของ PHP ในเครื่อง โดยพิมพ์คำสั่งดังนี้

$ php -v

ก็จะได้ผลลัพธ์ออกมาดังนี้ เวอร์ชันของ PHP จะอยู่บรรทัดแรกครับ (ของผมเป็น 7.2.2)

เมื่อได้เวอร์ชัน PHP แล้วก็ให้ติดตั้งแพคเกจ Xdebug ผ่าน Homebrew โดยจะต้องเลือกเวอร์ชันให้ตรงกับ PHP ด้วย เช่นของผมเป็น PHP 7.2.2 ก็ให้ลง Xdebug ของ PHP 7.2 (php72-xdebug)

$ brew install homebrew/php/php72-xdebug

และให้ลงแพ็คเกจ xdebug-osx เพิ่มอีกตัวเพื่อเอาไว้สั่งเปิด/ปิด Xdebug ในเครื่อง

$ brew install homebrew/php/xdebug-osx

หลังติดตั้งแล้วให้เปิดไฟล์ php.ini ขึ้นมา วิธีหาว่าไฟล์นี้อยู่ที่ไหนให้พิมพ์คำสั่งตามนี้

$ php -i | grep php.ini

แล้วพาธของไฟล์จะบอกเอาไว้ตรง Loaded Configuration File

ให้สั่งเปิดโฟลเดอร์เก็บคอนฟิกขึ้นมา แล้วแก้ไขไฟล์ php.ini

$ open /usr/local/etc/php/7.2

เมื่อสั่ง open จะเป็นการเปิด Finder ขึ้นมา ให้ดับเบิลคลิกที่ไฟล์ php.ini เพื่อแก้ไขได้ทันที (ไฟล์ในโฟลเดอร์นี้เราจะเป็น owner ดังนั้นไม่จำเป็นต้อง sudo) และเพิ่มการตั้งค่านี้ลงไปที่ท้ายไฟล์

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

บันทึกไฟล์ให้เรียบร้อย จากนั้นสั่ง restart apache (หรือรีบู๊ตเครื่องไปเลย) เพื่อเริ่มใช้งาน

เปิดใช้งาน Xdebug บน MAMP

MAMP เป็น Development stack คู่บุญชาวแมคอีกตัวหนึ่ง ซึ่ง PHP ที่มากับ MAMP นั้นก็มี Xdebug มาให้ในตัวเช่นกันสำหรับใครที่ใช้ MAP อยู่ ให้เปิดไปที่ไฟล์ php.ini สองไฟล์ดังนี้

/Applications/MAMP/conf/php[version]/php.ini
 
/Applications/MAMP/bin/php/php[version]/conf/php.ini

และให้เพิ่มคอนฟิกนี้ต่อท้ายด้านล่างลงไป (อย่าลืมแก้ [php_version] ให้ตรงกับที่ MAMP ใช้อยู่ด้วยนะ)

[xdebug]
zend_extension="/Applications/MAMP/bin/php/[php_version]/lib/php/extensions/no-debug-non-zts-20100525/xdebug.so"
xdebug.remote_autostart=1
xdebug.remote_enable=1
xdebug.remote_host=localhost
xdebug.remote_port=9000
xdebug.remote_handler=dbgp

บันทึกไฟล์และสั่ง Restart Apache ใน MAMP ให้เรียบร้อยก็พร้อมใช้งาน

อ้างอิงจากบล็อก Jeffrey Everhart

เปิดใช้งาน Xdebug ใน VVV

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

วิธีเปิดใช้งานคือให้เปิดไปที่โฟลเดอร์ที่เก็บ VVV เอาไว้แล้วสั่ง $ vagrant ssh เมื่อเชื่อมต่อได้ก็สั่ง $ xdebug_on เป็นอันพร้อมใช้[caption id="attachment_125" align="aligncenter" width="650"]

ภาพจาก VVV Wiki[/caption]ส่วนใครที่ใช้ Environment ตัวอื่น เช่น Trellis ของ Root.io (ตัวนี้เป็น Vagrant) หรือ Local by Flywheel (ตัวนี้เป็น Docker) ก็ให้ ssh เข้าไปเปิด Xdebug ให้เรียบร้อย น่าจะสามารถใช้งานได้ทันทีเหมือนกัน

ตรงนี้เป็นสาเหตุหนึ่งที่ผมแนะนำให้ใช้ Isolated Environment อย่างเช่น VVV เพราะมักจะมีการเตรียมเครื่องมือที่จำเป็นเอาไว้ให้หมดแล้ว และสามารถเปิดใช้ได้ทันทีโดยไม่ต้องแก้ไขไฟล์การตั้งค่าใดๆ ให้วุ่นวาย

ตั้งค่า Visual Studio Code ให้รองรับการแสดงผลดีบั๊กจาก Xdebug

ในขณะที่ VSCode นั้นรองรับการดีบั๊ก Node.js ในตัว แต่ภาษาที่อยู่มานานอย่าง PHP กลับไม่รองรับ (เสียใจ) แต่ก็โชคดีว่ามีคนทำส่วนเสริม PHP Debug ที่ช่วยให้ VSCode สามารถดีบั๊กกับ Xdebug ได้ออกมา วิธีติดตั้งคือให้เปิดแท็บ Extension ของ VSCode ขึ้นมา พิมพ์ค้นหา php debug และเลือกติดตั้งลงไป

หลังจากติดตั้งส่วนเสริม PHP Debug แล้วเราจำเป็นต้องตั้งค่าเพิ่มเติมอีกเล็กน้อยเพื่อให้ VSCode สามารถใช้งาน Xdebug ได้อย่างถูกต้องในขั้นตอนนี้ให้เปิดโฟลเดอร์เก็บไฟล์ทั้งหมดของเราขึ้นมาใน VSCode ซึ่งจากบทความก่อนหน้านี้เราได้สร้างโฟลเดอร์สำหรับเก็บไฟล์ให้กับโปรเจ็กท์ใน VVV เอาไว้แล้ว (ที่มีโฟลเดอร์ provision และ public_html อยู่ข้างในนั่นแหละ) ก็เปิดโฟลเดอร์นี่ขึ้นมาใน VSCode ได้เลย

จากนั้นให้กดปุ่ม F5 (หรือ Fn + F5) เพื่อเรียกเมนูดีบั๊กขึ้นมา และให้เลือกการดีบั๊กเป็น PHP

ในตอนนี้ VSCode จะสร้างไฟล์ launch.json ซึ่งเป็นไฟล์คอนฟิกการดีบั๊กขึ้นมาให้ พร้อมกับคอนฟิก 2 ค่าคือ Listen for XDebug กับ Launch currently open script ให้ดูในส่วน Listen for XDebug และเพิ่มการตั้งค่า pathMappings ลงไป

"pathMappings": {
	"/srv/www/myproject/public_html": "${workspaceRoot}/public_html"
}

ค่าที่จะต้องแก้ไขคือชื่อคีย์ ให้เป็นไดเรคทอรี่ที่เก็บโค้ดบน VM และค่าจะเป็นไดเรคทอรี่ที่เก็บโค้ดบนเครื่องเราเอง (ใช้ ${workspaceRoot} เพื่ออ้างไดเรคทอรี่ปัจจุบันได้ทันที) เมื่อแก้ไขไฟล์ launch.json เสร็จแล้วก็จัดการเซฟไฟล์ให้เรียบร้อย และเรามาเริ่มขั้นตอนการดีบั๊กกัน

การดีบั๊กใน Visual Studio Code

ขั้นแรก ให้จัดการ Start Server ให้เรียบร้อยก่อน ใครใช้ VVV ก็ไป vagrant up ให้ VVV ของเราให้เรียบร้อยก่อนได้เลยวิธีการดีบั๊กแบบ Single-step debugging นั้นคือให้เราสร้างเบรคพอยต์ก่อน วิธีก็คือเอาเมาส์ไปคลิกหน้าเลขบรรทัดในไฟล์ที่ต้องการสร้างเบรคพอยต์ มันก็จะมีจุดแรงๆ ขึ้นมา นั่นหมายความว่าเราสร้างเบรคพอยต์เรียบร้อยแล้ว

เมื่อได้เบรคพอยต์แล้วก็กด F5 ขึ้นมาเพื่อเริ่มทำการดีบั๊ก ในตอนนี้พาเนลขวามือของ VSCode จะเปลี่ยนมาเป็นแท็บดีบั๊ก และมีคอนโทรลดีบั๊กเพิ่มเข้ามาด้านบนดังภาพนี้

เอาล่ะ ถ้ามาถึงตรงนี้ สามารถเปิดดีบั๊กขึ้นมาได้โดยไม่พ่น Error ใดๆ ออกมา ก็น่าจะมาถูกทางแล้ว ขั้นต่อไปก็เปิดเบราเซอร์ไปยังเว็บของเราได้เลย (เว็บบน VVV) และเมื่อโค้ดเริ่มประมวลผลจนถึงจุดเบรคพอยต์ที่ตั้งไว้ มันก็จะหยุดชั่วคราว (pause) และแสดงข้อมูลให้แบบนี้ เมื่อต้องการให้ประมวลผลต่อก็แค่กดปุ่ม Continue ด้านบน

ในพาเนลฝั่งขวามือเราจะสามารถไล่ดูค่าตัวแปรต่างๆ ที่ประมวลผลไว้แล้วได้ในช่อง Variables และตรง Call Stack จะเป็นจุดที่ไล่ว่าไฟล์ที่ประมวลผลอยู่นั้นไล่มาจากไฟล์ไหน

แถบควบคุมการดีบั๊ก

มาถึงจุดสำคัญอีกจุดหนึ่งในการดีบั๊ก นั่นคือแถบควบคุมของมันที่เด้งขึ้นมาบริเวณด้านบน มีหน้าตาแบบนี้

เมนูควบคุมนี้จะมี 6 ปุ่มด้วยกัน มีหน้าที่ดังนี้

Continue สำหรับข้ามไปยังเบรคพอยต์ตัวต่อไป
Step Over สำหรับประมวลผลคำสั่งต่อไป
Step Into สำหรับเปิดเข้าไปดูในฟังก์ชันที่กำลังประมวลผลอยู่
Step Out สำหรับออกจากฟังก์ชันที่เพิ่งเข้ามาดูด้วย Step Into
Restart สำหรับหยุดการดีบั๊กรอบปัจจุบัน และรอการดีบั๊กรอบใหม่ (หรือก็คือรอให้เราไปกด Refresh หน้าเว็บ)
Stop สำหรับหยุดการดีบั๊กถาวร

ขอให้สนุกกับการแก้บั๊กครับและสุดท้ายหากใครต้องการใช้ Xdebug ในการทำ Profiling เพื่อตรวจสอบประสิทธิภาพของโค้ดเรา สามารถอ่านบทความที่ WordPress เตรียมเอาไว้ได้ในนี้