Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,028

HOME > PHP > PHP Forum > การ Debug Source Code PHP ด้วย XDebug และ Visual Studio Code

การ Debug Source Code PHP ด้วย XDebug และ Visual Studio Code

เริ่มหัวข้อใหม่

xxxxxxxx

โพสกระทู้ ( 6 )
บทความ ( 0 )

คนที่เคยเขียน PHP มาก่อนก็คงจะมีปัญหาเรื่องของการ Debug Source Code และพักหลังๆมาเริ่มมีตัว XDebug มาเพื่อช่วยให้เราสามารถที่จะ Debug PHP Source Code ได้ ซึ่งวันนี้จะมาแนะนำวิธีการใช้ตัว XDebug เพื่อทำการ Debug PHP Source Code

ผมเองก็เป็นคนที่หา Editor สำหรับเขียน PHP มาหลายตัวเช่น DreamWeaver, ATOM และล่าสุดก็มาใช้ตัว Visual Studio Code

ก่อนอื่นจะที่เริ่มกันให้โหลดโปรแกรมพวกนี้มาก่อนน่ะครับ

1.) Visual Studio Code โหลดจากลิ้ง https://code.visualstudio.com/download
2.) Virtual Application Server
แนะนำให้ใช้ตัว WampServer โหลดได้จาก http://www.wampserver.com/en/ เพราะว่าเค้าโหลดพวก Extension ต่างๆมาให้เราแล้วไม่ต้องเสียเวลาไปดาวน์โหลดเองให้ยุ่งยาก ก็แค่เพียง Client Something เพื่อ Enable ใช้งาน

[font=Verdana]หลังจากโหลดทั้งสองตัวนี้มาก็ลงให้เรียบร้อยซะ[/font]

Step 1 ทีนี้ให้เปิดตัว Visual Studio Code ขึ้นมาแล้วก็ลง Extension ดังนี้
Install VSCode Extension

Step 2 ลงตัว WampServer เสร็จแล้วก็ให้เปิด App ขึ้นมาแล้วก็ไปที่ตามภาพ
เลือก Version ของ PHP ในที่นี้จะเลือกตาม Default ที่มากับตัวมันอยู่แล้วคือ 5.6.31 (ตามภาพ)
WampServer Select PHP

คราวนี้ก็มาตั้งค่า XDebug ซึ่งอย่างที่บอกตัว WampServer ค่อยข้างเตรียมมาให้ครบล่ะไม่ต้องไปดาวน์โหลด DLL สำหรับ XDebug มา เพียงแค่ Config ให้ถูกต้องก็เป็นอันใช้งานได้ล่ะ ตามภาพ
WampServer Select PHP.ini

ให้ค้นหาคำว่า [xDebug] พอเจอแล้ว ให้ทำดังนี้ หากงงก็ดูภาพประกอบไปด้วย
Comment บรรทัดนี้ไว้
;xdebug.remote_enable = On

เพิ่มบรรทัดนี้
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
WampServer Select Setting XDebug

พอเสร็จแล้วก็กด SAVE และ Restart WampServer ตามภาพ
WampServer Restart

Step 3 กลับมาที่ Visual Studio Code ให้ไปที่ File ->New File เพื่อเขียน PHP Script สักตัว ยกตัวอย่างเช่น
Code (PHP)

    <?php
$var1 = 100;
$var2 = 200;

$cal = $var1 + $var2;
header("Content-Type:text/html;charset=utf8");
echo "<h1>" . $cal . "</h1>";
?>

เสร็จแล้วให้บันทึกไว้ที่พาร์ทที่คุณๆ ลง WampServer ในที่นี้ผมลงไว้ที่ Drive D: ผมก็ Save ไปที่ D:\wamp64\www ส่วนชื่อไฟล์ก็ตามใจจะตั้งเลย
หลังจากนี้ก็ให้ไปที่ Debug ใน Visual Studio Code ตามภาพ
WampServer Restart

แล้วก็ให้เลือก PHP จากนั้นตัว Visual Studio Code จะสร้างไฟล์มาให้เราก็ไม่ต้องไปสนใจไรมาก หน้าตาก็จะประมาณนีี้
Debug Source File

หลังจากนี้ให้เรากดที่ปุ่ม Listen for XDebug เพื่อเป็นการรอการรันเว็บของเรา และมันจะเข้ามา Debug พอเรากดเสร็จแล้วก็ไปรันหน้าเว็บไซด์ ที่เราเขียน Script เอาไว้ ในที่นี้ของผมจะเป็น http://localhost/testDebug/testDebug.php
VSCODE LAUNCH BUTTON

พอเราลองรันเว็บเราหน้าจอการ Debug ก็จะประมาณนี้
Debug Step

คราวนี้ถ้ายังไม่เก็ต ก็ให้ดู VIDEO นี้ประกอบเป็นของต่างชาติน่ะ อิ้ง ในตัวอย่างเค้าใช้ Xampp
https://www.youtube.com/watch?v=eE6oxEhqqoU

Tag : PHP, Zend Framework, WampServer

Date : 2017-10-06 01:58:19

By : takky12345

View : 3681

Reply : 3

No. 1

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

ขอบคุณข้อมูลดีดี
ปล.ย่อรูปสักหน่อยแล้วมา edit จะแจ่มเลยครับ

Date : 2017-10-06 08:27:38

By : apisitp

No. 2

mr.v

โพสกระทู้ ( 4,720 )
บทความ ( 8 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : apisitp เมื่อวันที่ 2017-10-06 08:27:38

รายละเอียดของการตอบ ::

ผมว่าคุณวินเขาน่าจะใส่โค้ด responsive image, fluid image แทนได้แล้วอะนะ
ตอนนี้ก็ปล่อยให้ responsi (เรสปอนสิ)ไปก่อน

ประวัติการแก้ไข
2017-10-06 10:28:17

Date : 2017-10-06 10:27:54

By : mr.v

No. 3

Mr.กล้า

โพสกระทู้ ( 5,105 )
บทความ ( 4 )

ตอบความคิดเห็นที่ : 2 เขียนโดย : mr.v เมื่อวันที่ 2017-10-06 10:27:54

รายละเอียดของการตอบ ::

... ท่านวินคงจะทราบล่ะ ฮ่าๆๆๆ

Date : 2017-10-06 10:48:59

By : apisitp

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : การ Debug Source Code PHP ด้วย XDebug และ Visual Studio Code

รายละเอียด

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

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก