วิธีเปิดใช้งานและตั้งค่า Xdebug ใน ServBay

ServBay เป็นสภาพแวดล้อมสำหรับพัฒนาเว็บท้องถิ่นอันทรงพลังที่เตรียม Xdebug ซึ่งเป็นเครื่องมือดีบักและวิเคราะห์สำหรับ PHP มาให้ล่วงหน้า การเปิดใช้ Xdebug จะช่วยเพิ่มประสิทธิภาพในการพัฒนา PHP อย่างมาก ให้คุณดีบัก วิเคราะห์ประสิทธิภาพ และตรวจสอบความครอบคลุมของโค้ดได้ง่ายขึ้น บทความนี้จะอธิบายขั้นตอนการเปิดใช้และปรับแต่ง Xdebug ใน ServBay พร้อมแนวทางการเชื่อมต่อกับ IDE ชั้นนำ เช่น PHPStorm และ VS Code เพื่อการดีบักอย่างมืออาชีพ

Xdebug คืออะไร

Xdebug คือ Extension เสริมสำหรับ PHP ที่ออกแบบมาเพื่อช่วยดีบักและวิเคราะห์โค้ด ServBay ได้เตรียม Xdebug ที่เหมาะสมกับแต่ละเวอร์ชัน PHP มาให้ คุณจึงไม่ต้องติดตั้งและคอมไพล์เอง ช่วยลดความยุ่งยากในกระบวนการใช้งาน

ฟีเจอร์หลักของ Xdebug

การดีบักแบบหยุดที่จุดเบรก (Breakpoint): กำหนดจุดหยุดการทำงานของโค้ดเพื่อเช็คค่าต่างๆ ของตัวแปร สเต็กการเรียก และสามารถเดินโค้ดทีละบรรทัดได้
เดินโค้ดแบบ Step: รองรับการเดินโค้ดทีละบรรทัด (Step Over), เข้าไปในฟังก์ชัน (Step Into), หรือออกจากฟังก์ชัน (Step Out) เพื่อวิเคราะห์กระบวนการทำงานอย่างละเอียด
ดูค่าตัวแปรสด: ตรวจสอบค่า Local/Global Variables แบบ Real-time ระหว่างดีบัก
Stack Trace: เมื่อเกิดข้อผิดพลาด จะแสดงการเรียกใช้ฟังก์ชันย้อนหลังอย่างละเอียด ช่วยแก้ปัญหาได้รวดเร็ว
การวิเคราะห์ประสิทธิภาพ (Profiling): สร้างรายงานการทำงานของโค้ด ช่วยค้นหาคอขวดของระบบ
วัดความครอบคลุมของโค้ด (Code Coverage): ตรวจวัดว่าชุดทดสอบ ครอบคลุมโค้ดเส้นใดแล้วบ้าง ช่วยประเมินความสมบูรณ์ของเทสต์

เวอร์ชัน Xdebug ที่ติดตั้งกับ ServBay และพอร์ต

ServBay ติดตั้ง Xdebug ให้พร้อมในแต่ละเวอร์ชันของ PHP แต่สิ่งสำคัญคือ พอร์ตที่ Xdebug รับฟัง (Listening Port) จะไม่ซ้ำกันและเชื่อมโยงกับเวอร์ชันของ PHP จึงควรระบุพอร์ตให้ถูกต้องใน IDE ทุกครั้ง

PHP เวอร์ชัน	Xdebug ที่ติดตั้ง	พอร์ต Xdebug (โดยค่าเริ่มต้น)
PHP 5.6	Xdebug 2.5.5	39056
PHP 7.0	Xdebug 2.5.5	39070
PHP 7.1	Xdebug 2.5.5	39071
PHP 7.2	Xdebug 3.1.6	39072
PHP 7.3	Xdebug 3.1.6	39073
PHP 7.4	Xdebug 3.1.6	39074
PHP 8.0	Xdebug 3.3.1	39080
PHP 8.1	Xdebug 3.4.0	39081
PHP 8.2	Xdebug 3.4.0	39082
PHP 8.3	Xdebug 3.4.0	39083
PHP 8.4	Xdebug 3.4.0	39084
PHP 8.5	Xdebug 3.4.0	39085

กฎของพอร์ต

รูปแบบการกำหนดพอร์ตของ Xdebug คือ 39000 + หมายเลขเวอร์ชันย่อยของ PHP เช่น PHP 8.3 จะได้ 39000 + 83 = 39083 และ PHP 7.4 จะได้ 39000 + 74 = 39074 จำหลักการนี้ไว้ เพื่อเลือกพอร์ตตรงกับเวอร์ชัน PHP ที่ใช้

วิธีเปิดใช้ Xdebug

การเปิด Xdebug ใน ServBay ทำได้ง่ายมาก แนะนำให้ดำเนินการผ่าน GUI (กราฟิกอินเตอร์เฟซ) ของ ServBay ซึ่งรวดเร็วและสะดวก หรือจะตั้งค่าเองก็ได้

เปิด Xdebug ผ่าน GUI ของ ServBay

วิธีการนี้ง่ายและรวดเร็วที่สุด

เปิดหน้าแอปพลิเคชันของ ServBay
ที่แถบเมนูด้านซ้าย เลือก Languages (ภาษา)
ขยายหัวข้อ PHP เพื่อเลือกเวอร์ชันที่ต้องการเปิด Xdebug เช่น PHP 8.3
กดปุ่ม Extension ที่อยู่ด้านขวามือของเวอร์ชัน PHP ดังกล่าว
จากรายการ Extensions ค้นหา Xdebug
กดสวิตช์ทางซ้ายของ Xdebug ให้เปลี่ยนเป็นเปิด (ON)
หากต้องปรับค่าสำหรับ Xdebug สามารถทำได้ในหน้านี้
กดปุ่ม Save ที่ด้านล่างของหน้า
ServBay จะรีสตาร์ท PHP ให้โดยอัตโนมัติและโหลด Xdebug ทันที

ภาพประกอบ: เปิด Xdebug ในหน้าตั้งค่า Extension

ตรวจสอบว่า Xdebug ถูกโหลดหรือไม่

วิธีเช็คที่แม่นยำที่สุด คือ เรียกดูข้อมูล phpinfo() ของระบบ

ที่โฟลเดอร์รากของเว็บไซต์บน ServBay (โดยปกติคือ /Applications/ServBay/www) สร้างไฟล์ใหม่ชื่อ phpinfo.php
ใส่โค้ดต่อไปนี้ลงไปในไฟล์ phpinfo.php
php
```
<?php
phpinfo();
?>
```
1
2
3
เปิดเบราว์เซอร์ เข้าไปที่ไฟล์นี้ เช่น https://servbay.demo/phpinfo.php (แทนที่ servbay.demo ด้วยโดเมนที่ตั้งค่าใน ServBay ของคุณ)
ที่หน้าแสดงผลของ phpinfo ค้นหา "Xdebug" ถ้าโหลดสำเร็จ จะมีส่วนของ Xdebug พร้อมระบุเวอร์ชันและข้อมูลการตั้งค่า

ภาพประกอบ: ตรวจสอบ Xdebug ผ่าน phpinfo

การตั้งค่า Xdebug ร่วมกับ IDE

หลังเปิดใช้งาน Xdebug แล้ว ขั้นตอนต่อไปคือ ตั้งค่าใน IDE เพื่อดีบักได้แบบหยุดที่เบรกพอยต์ โดยต้องตั้ง PHP Interpreter, Debugger, และ Path Mapping ให้ถูก สำหรับตัวอย่างนี้จะเน้นที่ PHPStorm และ Visual Studio Code (VS Code)

การตั้งค่า Xdebug ใน PHPStorm

PHPStorm รองรับ Xdebug ได้ดีมาก

เปิดหน้าต่างตั้งค่าของ PHPStorm: ไปที่เมนู File -> Settings (Windows/Linux) หรือ PHPStorm -> Preferences (macOS)
ตั้ง PHP CLI Interpreter:
- เลือก Languages & Frameworks -> PHP
- ที่หัวข้อ CLI Interpreter ให้กดปุ่ม ...
- ในหน้าต่างใหม่ กด + เพื่อเพิ่ม Interpreter ใหม่
- เลือก path ของ PHP CLI สำหรับเวอร์ชันที่ต้องการใช้งานใน ServBay เช่น /Applications/ServBay/package/php/8.3/8.3.7/bin/php (ให้ใช้ path ที่ตรงกับเวอร์ชันในเครื่องคุณ)
- PHPStorm จะตรวจสอบเวอร์ชันและ Extensions อัตโนมัติ (รวม Xdebug)
- กด OK เพื่อบันทึก
ภาพประกอบ: กำหนด Interpreter ของ PHP CLI จาก ServBay ใน PHPStorm
ตั้งค่าพอร์ตดีบัก Xdebug:
- เลือก Languages & Frameworks -> PHP -> Debug
- ในช่อง Xdebug ใส่หมายเลขพอร์ตที่ Xdebug ใช้ใน ServBay สำหรับเวอร์ชัน PHP ที่ใช้งาน เช่น PHP 8.3 คือ 39083 (ต้องตรงกับค่า xdebug.client_port)
- ติ๊กถูกที่ Can accept external connections
- กด Apply แล้ว OK เพื่อบันทึก
ภาพประกอบ: ตั้งพอร์ตรับฟัง Xdebug ใน PHPStorm
ตั้งค่าเซิร์ฟเวอร์และ Path Mapping:
- เลือก Languages & Frameworks -> PHP -> Servers
- กด + เพื่อเพิ่มเซิร์ฟเวอร์ใหม่
- ตั้งชื่อเซิร์ฟเวอร์ (เช่น ServBay Localhost)
- ใส่ Host เป็นโดเมนที่ตั้งไว้ใน ServBay (เช่น servbay.demo)
- Port เลือก 443 (HTTPS) หรือ 80 (HTTP) ตามที่เว็บใช้
- Debugger เลือก Xdebug
- ติ๊ก Use path mappings
- ตั้ง mapping ระหว่าง path ในเครื่อง (เช่น /Applications/ServBay/www/myproject) กับ path บนเซิร์ฟเวอร์ (โดยปกติคือ /)
- ถ้าโปรเจกต์คุณอยู่ที่ /Applications/ServBay/www/myproject และยิงผ่าน https://servbay.demo/ ให้แมป /Applications/ServBay/www/myproject กับ / ถ้าใช้ซับโดเมนแบบ https://myproject.servbay.demo/ ก็ทำแบบเดียวกัน
- กด OK เพื่อบันทึก
ภาพประกอบ: ตั้งค่าเซิร์ฟเวอร์และ Path Mapping ใน PHPStorm
เริ่มดีบัก:
- เปิดไฟล์ที่ต้องการดีบักใน PHPStorm
- คลิกซ้ายบริเวณหมายเลขบรรทัด เพื่อเพิ่มจุดเบรกพอยต์ (วงกลมสีแดง)
- กดไอคอน "Start Listening for PHP Debug Connections" (รูปแมลง) ที่แถบด้านบน PHPStorm ไอคอนจะเปลี่ยนเป็นสีเขียว หมายความว่า PHPStorm กำลังรับฟังการเชื่อมต่อ Xdebug
- เปิดเบราว์เซอร์ ไปยังหน้า PHP ของคุณ เช่น https://servbay.demo/index.php
- ถ้าตั้งค่าถูกต้อง Xdebug จะเชื่อมต่อเข้ามาและโปรแกรมจะหยุดที่เบรกพอยต์ใน PHPStorm
ภาพประกอบ: กดฟังการเชื่อมต่อ Xdebug ใน PHPStorm

การใช้งาน Xdebug ใน Visual Studio Code (VS Code)

VS Code ก็ใช้ Xdebug ได้ดี เพียงติดตั้ง Plugin เพิ่ม

ติดตั้ง Extension PHP Debug:
- เปิด VS Code
- ไปที่ Extensions (Ctrl+Shift+X หรือ Cmd+Shift+X)
- ค้นหา "PHP Debug" และติดตั้ง Extension โดย Felix Becker

แก้ไข launch.json:

เปิดโปรเจกต์ PHP ของคุณ
ไปที่ Run & Debug (Ctrl+Shift+D หรือ Cmd+Shift+D)
คลิกไอคอนเฟือง เลือก "PHP" จะแสดงไฟล์ launch.json ในโฟลเดอร์ .vscode
แก้ไขไฟล์นี้ ให้พอร์ตตรงกับ Xdebug เวอร์ชัน PHP ที่ใช้ เช่น PHP 8.3 ใช้พอร์ต 39083

ตั้งค่า Path Mapping: ที่หัวข้อ pathMappings ระบุ path ของโปรเจกต์ในเครื่องให้ตรงกับบนเซิร์ฟเวอร์ ServBay

json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 39083, // เปลี่ยนให้ตรงกับเวอร์ชัน PHP ที่ใช้
            "pathMappings": {
                // แมปโฟลเดอร์เว็บไซต์ ServBay กับโฟลเดอร์ในเครื่องคุณ
                // เช่น โปรเจกต์อยู่ที่ /Applications/ServBay/www/myproject
                // และเข้าผ่าน https://servbay.demo/ ให้ "/" แมปกับ "${workspaceRoot}"
                "/": "${workspaceRoot}"
                // ถ้าใช้ subdomain เช่น https://myproject.servbay.demo/
                // และรากโปรเจกต์คือ /Applications/ServBay/www/myproject
                // ก็แมป "/" กับ "${workspaceRoot}" เช่นกัน
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 39083 // เปลี่ยนตรงนี้ด้วยถ้าใช้เวอร์ชันอื่น
        }
    ]
}

ตรวจสอบว่า ${workspaceRoot} ชี้ที่โฟลเดอร์โปรเจกต์หลักที่คุณเปิดใน VS Code

เริ่มต้นดีบัก:
- เปิดไฟล์ PHP ที่ต้องการดีบักใน VS Code
- คลิกเลขบรรทัดเพื่อสร้างเบรกพอยต์ (วงกลมสีแดง)
- ไปที่ Run & Debug (Ctrl+Shift+D หรือ Cmd+Shift+D)
- เลือก "Listen for Xdebug" ในเมนูด้านบน
- กดปุ่มเริ่มดีบัก (สีเขียว) แถบสถานะด้านล่างจะเปลี่ยนเป็นสีส้มเมื่อรับฟังสำเร็จ
- เปิดเบราว์เซอร์ เข้าที่เว็บ PHP ถ้าตั้งค่าถูกต้อง Xdebug จะหยุดที่เบรกพอยต์ใน VS Code

คำถามที่พบบ่อย (FAQ)

Q: ทำไม Xdebug ไม่โชว์ใน phpinfo()?
- A: ตรวจสอบว่าเปิดใช้งานโมดูล Xdebug แล้ว (ผ่าน GUI หรือแก้ไฟล์ xdebug.ini)
- รีสตาร์ท PHP ใน ServBay ใหม่
- ตรวจสอบว่า path ของไฟล์ xdebug.ini ถูกต้อง และมีบรรทัด zend_extension = xdebug.so (ไม่ถูก comment)
- ดูบันทึกข้อผิดพลาดของ ServBay ที่ไฟล์ (/Applications/ServBay/logs/php/<version>/error.log) ว่ามีข้อความ Xdebug โหลดไม่สำเร็จหรือไม่
Q: ตั้งเบรกพอยต์ใน IDE แล้ว แต่โปรแกรมไม่หยุด?
- A: ตรวจสอบว่า IDE กำลังฟังการเชื่อมต่อ Xdebug อยู่ (PHPStorm ไอคอนแมลงเป็นสีเขียว, VS Code แถบสถานะสีส้ม)
- ดูว่าตั้งค่าพอร์ตใน IDE ให้ตรงกับ xdebug.client_port และตรงกับเวอร์ชัน PHP ที่ใช้หรือไม่
- เช็คการตั้งค่า Path Mapping ใน IDE — Path Mapping ผิดเป็นสาเหตุหลักที่ Xdebug ไม่หยุด
- ดู firewall ของเครื่องคุณ ว่าบล็อกพอร์ตของ Xdebug (390xx) หรือไม่
- ถ้าใน xdebug.ini ใช้ xdebug.start_with_request=trigger ต้องแน่ใจว่ามีการส่ง Trigger ไปด้วย เช่นใช้ Extension Xdebug Helper ในเบราว์เซอร์ หรือเพิ่ม ?XDEBUG_TRIGGER=1 ใน URL
Q: Xdebug หลุดการเชื่อมต่อเองหลังจากใช้ไปสักพัก?
- A: ดูค่าของ xdebug.remote_autostart หรือ xdebug.start_with_request ใน xdebug.ini ถ้าตั้งเป็น yes ทุก request จะเริ่มกระบวนการดีบัก อาจควรตั้งเป็น trigger เพื่อลดภาระ
- ดูค่าการตั้งเวลา timeout ในฝั่ง IDE ด้วย

สรุป

ServBay ช่วยให้การเปิดใช้งาน Xdebug ง่ายขึ้นกว่าที่เคย ไม่ว่าจะเลือกทำผ่านอินเทอร์เฟซกราฟิกหรือแก้ไขไฟล์ด้วยตัวเอง คุณก็สามารถเปิดดีบักเกอร์ใน PHP ได้เพียงไม่กี่ขั้นตอน ระบบยังออกแบบให้รองรับหลายเวอร์ชันของ PHP ด้วยค่าพอร์ตที่ชัดเจน เมื่อใช้งานควบคู่กับ IDE อย่าง PHPStorm หรือ VS Code ก็สามารถดีบักโค้ด วิเคราะห์ประสิทธิภาพ และตรวจสอบคุณภาพซอฟต์แวร์ได้อย่างเต็มประสิทธิภาพ การรู้วิธีตั้งค่าและใช้ Xdebug กับ ServBay จะช่วยเสริมศักยภาพในสายงานพัฒนา PHP ของคุณได้อย่างยอดเยี่ยม

วิธีเปิดใช้งานและตั้งค่า Xdebug ใน ServBay ​

Xdebug คืออะไร ​

ฟีเจอร์หลักของ Xdebug ​

เวอร์ชัน Xdebug ที่ติดตั้งกับ ServBay และพอร์ต ​

วิธีเปิดใช้ Xdebug ​

เปิด Xdebug ผ่าน GUI ของ ServBay ​

ตรวจสอบว่า Xdebug ถูกโหลดหรือไม่ ​

การตั้งค่า Xdebug ร่วมกับ IDE ​

การตั้งค่า Xdebug ใน PHPStorm ​

การใช้งาน Xdebug ใน Visual Studio Code (VS Code) ​

คำถามที่พบบ่อย (FAQ) ​

สรุป ​