Debug 'pờ rồ' hơn với Xdebug

php Jan 31, 2021

Mở đầu

Khi bạn phát triển một ứng dụng Web bằng Laravel, khả năng sẽ phát sinh ra lỗi. Các bạn cần 1 công cụ để giúp bạn tìm và gỡ lỗi. Với PHP công cụ thường được sử dụng nhất là Xdebug. Thật may mắn chúng ta có thể sử dụng Xdebug với PHPStorm. Sau đây mình xin hướng dẫn các bạn cài đặt, cấu hình, và debug Laravel với PHPStorm và Xdebug.

Xdebug là gì

Là một extension cho ngôn ngữ lập trình PHP giúp các lập trình viên có thể dễ dàng hơn trong việc gỡ rối (hay còn gọi là debug) cho chương trình.
Giúp các theo tác debug có thể thực hiện một các đơn giản bằng việc cho phép các lập trình viên sử dụng các điểm dừng (hay breakpoint) vào các vị trí khác nhau trên mã lệnh của chương trình để tạp dừng quá trình thực thi chương trình ở vị trí điểm dừng đó và quan sát các dữ liệu tại thời điểm đó.

Ảnh này cho vào cho đỡ trống trải, anh em đừng để ý (^^)

Cài đặt Nginx

! nếu start laravel bằng "php artisan serve" thì có thể bỏ qua phần này

Ta sẽ cần 1 web service để xử lý các request đến và đưa đến cho Laravel xử lý. Ngoài Nginx ta có thể chọn Apache. Trong bài này, mình chọn Nginx.

sudo apt update
sudo apt upgrade
sudo apt install nginx

Cài đặt PHP

sudo apt install software-properties-common

sudo add-apt-repository ppa:ondrej/php

sudo apt update

sudo apt install php7.4

sudo apt install php7.4-fpm

sudo apt install php7.4-common php7.4-mysql php7.4-xml php7.4-xmlrpc php7.4-curl php7.4-gd php7.4-imagick php7.4-cli php7.4-dev php7.4-imap php7.4-mbstring php7.4-opcache php7.4-soap php7.4-zip php7.4-intl -y

Cài đặt Xdebug

sudo apt-get install php7.4-xdebug

Để kiểm tra đã cài thành công hay chưa

php7.4 -m | grep xdebug

Nếu hiện lên chữ xdebug màu đỏ là ok

Tiếp theo là ghi nội dung cấu hình php vào file php-info.txt rồi copy chúng vào ô input trên trang xdebug bằng lệnh sau

php7.4 -i > php-info.txt  //Ghi nội dung vào file php-info.txt

sudo nano php-info.txt // Lấy nội dung

Nội dụng file php-info.txt sẽ như hình dưới

Copy paste nội dung vào trang https://xdebug.org/wizard.php

Làm theo hướng dẫn từ 1-9

Cấu hình xdebug.ini

Trước khi cấu hình nắm một số nguyên tắc làm việc của Xdebug khi kết nối với IDE như sau: IDE phải tạo ra một phiên làm việc và mở ra một cổng (mặc định 9000, với địa chỉ IP, mặc định localhost) để XDebug của PHP kết nối vào mỗi khi PHP chạy các script

edit file xdebug.ini

sudo vim /etc/php/7.4/mods-available/xdebug.ini

zend_extension=xdebug.so
xdebug.remote_enable = 1
xdebug.remote_port = 9000
xdebug.idekey = PHPSTORM
xdebug.show_error_trace = 1
xdebug.remote_autostart = 0
xdebug.mode=debug
xdebug.client_port=9000

Restart the services

sudo systemctl restart php7.4-fpm

sudo systemctl restart nginx // nếu dùng php artisan serve thì không cần chạy lệnh này//

Cài đặt Laravel

Tiến hành cài đặt laravel, ở đây mình sử dụng composer để cài đặt, ngoài ra có thể tải source từ github cũng được

composer create-project --prefer-dist laravel/laravel test-xdebug 7.*

Cấu hình Nginx Server Blocks

! nếu start laravel bằng "php artisan serve" thì có thể bỏ qua phần này

sudo vim /etc/nginx/site-available/testxdebug.conf

// testxdebug.conf

server {
    listen 80;
    root /home/huy/test-xdebug/public;
    index index.php index.html index.htm;
    server_name testxdebug.local;
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/www;
    }
    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_pass unix:/run/php/php7.4-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

sudo ln -s /etc/nginx/site-available/testxdebug.conf /etc/nigx/site-enable/testxdebug.conf

sudo systemctl restart nginx

Thêm domain vào /etc/hosts

dùng php artisan serve thì không cần config phần này

127.0.0.1	testxdebug.local

Thực hiện Debug với PHPStorm

Khởi động PHPStorm

Chọn [ Run ] => [ Edit Configurations ] => [ + ] => [ PHP Web Page ]

Điền các thông tin sau:

Name: Tên tùy ý
Server: Chọn 1 server có sẵn ( Nếu chưa có tham khảo phần [Tạo Debug Server] ở bên dưới)
Browser: Chọn trình duyệt để khởi động, Bình thường sẽ là trình duyệt mặc định của máy tính

Tạo Debug Server

Name: Tên gì tùy ý
Host: testxdebug.local #domain đã config ở /etc/hosts | nếu dùng php artisan serve thì để là 'localhost'
Port: 80 (mặc định nginx chạy port 80, chạy port khác thì đổi tại đây | nếu dùng php artisan serve thì để là 8000)
Debuger: Xdebug

Hướng dẫn debug Laravel

Đầu tên Set Breakpoint để debug

Chọn cấu hình debug
Lắng nghe Xdebug
Start debug

Kết quả:

Bằng cách chọn vào biểu tượng trình duyệt muốn mở. Trang web chạy trên server PhpStorm sẽ hiện lên trên trình duyệt. Khi muốn debug tính năng nào của trong web chỉ cần click vào con bọ trên trình duyệt và thực hiện request.

Kết

Thông qua bài hướng dẫn này mình đã hướng dẫn các bạn cài đặt xdebug và chạy với PHPSTORM. Ở tiếp theo mình sẽ tìm hiểu và hướng dẫn cài xdebug trên docker.
Cảm ơn vì đã dành thời gian để đọc bài viết của mình.