Cài đặt Xdebug cho VSCode trên Windows

Môi trường

  • Windows 10 x64
  • Visual Studio Code (latest version)
  • PHP 8.1.6

Tổng thể các bước thực hiện

  1. Cài đặt PHP Debug plugin cho VSCode
  2. Tải và cài đặt Xdebug
  3. Cấu hình PHP
  4. Dùng thử Xdebug

Cài đặt PHP Debug plugin cho VSCode

Trong Market Place, tìm kiếm với từ khóa "PHP Debug" và chọn plugin có tên "PHP Debug" như hình dưới đây. Lưu ý chọn plugin có tích xanh Xdebug và có lượt tải hơn 7 triệu.
Sau khi cài đặt (install) thành công, nhấn chuột vào plugin này thì thông tin chi tiết sẽ hiện lên. Trong đó, ở mục Details có hướng dẫn cách cài đặt và cấu hình Xdebug cho PHP.

Tải và cài đặt Xdebug

Để tải được phiên bản Xdebug phù hợp với hệ thống của mình, ta sẽ sử dụng trình Wizard của Xdebug. Trình này yêu cầu cung cấp thông tin về phiên bản PHP mà ta có. Thực thi câu lệnh sau để trích xuất thông tin và lưu vào tập tin 'phpinfo.txt':
D:\> php -i > phpinfo.txt
Tiếp đó, truy cập trang https://xdebug.org/wizard; sao chép toàn bộ nội dung tập tin 'phpinfo.txt' và điền vào trang này
.
Sau khi nhấn nút 'Analyze my phpinfo() output', trình wizard sẽ cho biết phiên bản Xdebug cần tải, cũng như cách cài đặt
Theo hướng dẫn của trình wizard, ta tải tập tin .DLL về, đổi tên thành 'php_xdebug.dll' rồi đưa vào thư mục 'C:\Xampp\php\ext'. Riêng thao tác cấu hình thì hướng dẫn của trình wizard là chưa đủ. Ta cần thực hiện như dưới dây.

Cấu hình PHP

Nếu tìm kiểm với Google cách thức cài đặt, cấu hình Xdebug cho VSCode thì sẽ có một số hướng dẫn, nhưng ở đó không đề cập đến sự khác biệt khi cấu hình cho các phiên bản Xdebug khác nhau. Như ở trên thì ta đã tải về phiên bản 3.x; cấu hình cho phiên bản 3.x sẽ có sự khác biệt so với cấu hình cho phiên bản 2.x.

Người xưa có câu "Xa tận chân trời, gần ngay trước mắt". Bản thân tôi mải miết tìm kiếm với Google, thử nhiều lần nhưng không thành công. Thế rồi phát hiện ra rằng thông tin về cách cấu hình Xdebug cho PHP đã có sẵn (một cách ngắn gọn, cụ thể, chính xác) đã được cung cấp bởi PHP Debug plugin mà ta cài đặt cho VSCode ở trên, vẫn trong mục 'Details'.

Một cách ngắn gọn, ta cần thêm vào cuối tập tin 'php.ini' một mục cấu hình như sau
[Xdebug]
zend_extension=xdebug
xdebug.mode = debug
xdebug.start_with_request = yes
Đến đây, việc cài đặt, cấu hình đã hoàn tất. Để kiểm tra kết quả, ta tạo một tập tin *.php bất kỳ (ví du, 'testphp.php'), trong đó gọi hàm phpinfo(). Truy cập tập tin này qua trình duyệt:
Nếu trong trang trả về 1)có thông tin về Xdebug và 2)'Step Debugger' được kích hoạt thì cấu hình đã chính xác. Nếu không thì cần rà soát, kiểm tra lại.

Dùng thử Xdebug

Để có thể tiến hành debug một project nào đó, trước hết ta cần cấu hình VSCode cho nó bằng cách chọn menu "Run > Add Configuration...". Tập tin "launch.json" sẽ được tạo ra (nếu có nhiều cấu hình đã được thiết lập cho VSCode thì hộp thoại sẽ hiện lên để ta chọn cấu hình phù hợp, cụ thể là "PHP", trước khi tập tin "launch.json" được tạo). Ta không cần thay đổi nội dung tập tin này.
Để phục vụ cho mục đích thử nghiệm Xdebug, ta tạo một tập tin *.php với nội dung tùy ý. Ví dụ, tập tin index.php với nội dung như dưới đây:
Tiếp đó, thực hiện các thao tác
  • Mở giao diện debug và chọn chế độ "Listen for Xdebug"
  • Bắt đầu debug (Run > Start Debugging). Lúc này sẽ xuất hiện thanh công cụ debug.
  • Đặt một (một số) breakpoint trong mã
  • Từ trình duyệt truy cập tới tập tin "index.php"
Lúc này, trình duyệt sẽ thể hiện trạng thái chờ đợi (waiting) bởi mã PHP ở phía server bị tạm dừng thực thi ở breakpoint đã thiết lập. Đồng thời, biểu tượng của VSCode trên thanh tác vụ (Taskbar) cũng được làm nổi bật (highlight). Chuyển sang cửa sổ VSCode, ta sẽ thấy giao diện như dưới đây để ta tiến hành debug:
Đến đây, việc cài đặt, cấu hình, thử nghiệm Xdebug trên VSCode đã hoàn tất./.

Comments

Popular posts from this blog

Lập trình tạo một MVC Component đơn giản cho Joomla. Phần 4. Chỉnh sửa một phần tử

Lập trình tạo một MVC Component đơn giản cho Joomla. Phần 1. Khởi tạo component