endy

Setup Debug (Nodejs, Python, Java, PHP)

endy's photo
endy
·

9 min read

Ở bài này mình sẽ note lại cách setup debug các ứng dụng cả local lẫn remote debug, trong VSCode lẫn JetBrains IDEs

1. PHP

A. Vscode

Mình có cấu trúc thư mục như sau:

Mình sẽ setup local debug và remote debug trên src này

Local Debug

Để local Debug web PHP ở Vscode mình sẽ dùng XAMPP và Xdebug

Đầu tiên mình sẽ cần copy tất cả thông tin từ phpinfo và paste vào trang này

Khi nhấn analyse web sẽ cung cấp cho ta file dll cũng như các bước cài đặt phù hợp với project

Sau khi tải file dll về đổi tên thành php_xdebug.dll và move vào thư mục ..\xampp\php\ext như hướng dẫn

Sau đó update file ..\xampp\php\php.ini , thêm các dòng sau

zend_extension="D:\xampp\php\ext\php_xdebug.dll"
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_port=9003
xdebug.client_host = localhost

Lúc này mở Vscode và cài extension PHP Debug

Khi cài xong chỉ cần nhấn create a launch.json file file config sẽ được tạo tương thích với project (nhớ chỉnh cwd và port cho khớp với src)

Nội dung file launch.json cho tiện copy

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}/src",
            "port": 80,
            "runtimeArgs": [
                "-dxdebug.start_with_request=yes"
            ],
            "env": {
                "XDEBUG_MODE": "debug,develop",
                "XDEBUG_CONFIG": "client_port=${port}"
            }
        },
        {
            "name": "Launch Built-in web server",
            "type": "php",
            "request": "launch",
            "runtimeArgs": [
                "-dxdebug.mode=debug",
                "-dxdebug.start_with_request=yes",
                "-S",
                "localhost:0"
            ],
            "program": "",
            "cwd": "${workspaceRoot}",
            "port": 9003,
            "serverReadyAction": {
                "pattern": "Development Server \\(http://localhost:([0-9]+)\\) started",
                "uriFormat": "http://localhost:%s",
                "action": "openExternally"
            }
        }
    ]
}

Nhấn Start debugging để bắt đầu debug

Kết quả:

Remote debug

Tiếp theo là remote debug thông qua Docker trong Vscode, mình cũng sẽ dùng Xdebug để setup. Lưu ý: phiên bản PHP mình dùng là 8.0, các bước setup dưới đây chỉ áp dụng cho PHP version >= 8.0.0 và <= 8.2.99

Đầu tiên thêm 2 dòng sau vào Dockerfile để cài Xdebug

RUN pecl install xdebug
RUN docker-php-ext-enable xdebug

Tiếp theo tải extension PHP Debug trong Vscode (tương tự ở trên) và thêm file /config/docker-php-ext-xdebug.ini vào src code với nội dung như sau:

[xdebug]
zend_extension=xdebug
xdebug.mode=on
xdebug.start_with_request = yes
xdebug.client_host = "host.docker.internal"
xdebug.idekey="VSCODE"
xdebug.log=/tmp/xdebug_remote.log
xdebug.client_port = "9003"

Cấu trúc thư mục lúc này sẽ như sau:

Tiếp theo, thêm 2 dòng sau vào docker-compose.yml

environment:
      XDEBUG_MODE: debug
      XDEBUG_CONFIG: client_host=host.docker.internal client_port=9003
extra_hosts:
      - "host.docker.internal:host-gateway"

Và thêm dòng COPY file config vào Dockerfile

COPY ./config/docker-php-ext-xdebug.ini /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

Tổng thể Dockerfile và docker-compse.yml sẽ trông như thế này:

Nếu setup đúng thì khi docker compose up và vào check phpinfo sẽ có dòng chữ sau:

Như vậy nghĩa là đã setup thành công, việc tiếp theo chữ cần Path Mapping tại Vscode. Vẫn tạo file launch.json như trên nhưng lần này mình sẽ xóa hết config gen sẵn và chỉnh thành:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}/src"
            }
        },
    ]
}

Nhớ lưu ý port và pathMappings phải match với src, bây giờ chỉ cần build docker sau đó nhấn Start Debugging

Kết quả:

B. PHPStorm

Remote Debug

Cách setup remote debug trong PHPStorm cũng tương tự như VSCode ở mấy bước đầu nên mình sẽ không nói lại.

Lần lượt thực hiện chỉnh sữa file Dockerfile, docker-compose và thêm file config sao cho được src như sau

Dockerfile:

Docker-compose

Nội dung file config

[xdebug]
zend_extension=xdebug
xdebug.mode=on
xdebug.start_with_request = yes
xdebug.client_host = "host.docker.internal"
xdebug.idekey="docker"
xdebug.log=/tmp/xdebug_remote.log
xdebug.client_port = "9003"

Sau khi có được mọi thứ như trên mình sẽ connect docker daemon vào PHPStorm

Tại phần Settings -> Build, Executeion, Deployment -> Docker. Chọn Docker for Windows

Nhấn Apply và OK

Tiếp theo mình config PHP server, chọn Settings -> PHP -> Servers. Bấm dấu + để add thêm PHP server. Sau đó config như hình sau.

Lưu ý là ports sẽ tương ứng với port map trong docker-compose và nhớ tick vào ô Use path mappings để map localpath với remote path. Ở đây mình map thư mục src local với /var/www/html trên server.

Nhấn Apply và OK

Đến bước tiếp theo là add config để chạy debug. Chọn Edit Configurations -> Run/Debug Configurations.

Nhấn dấu + chọn PHP Remote Debug

Tại đây chọn Server đã setup từ trước và IDE key là giá trị đã đặt ở file config phía trên

Trong trường hợp của mình thì IDE key là docker

Bây giờ thì docker compose up trước, sau đó vào PHPStorm nhấn vào con bọ để bắt đầu debug

Kết quả:

2.Java

3.Python (Flask)

A.Vscode

Mình có cấu trúc thư mục như sau:

Mình sẽ setup local debug và remote debug trên src này

Local Debug

Tại Run and debug của Vscode tiếp tục chọn create a launch.json file

Tại đây chọn Flask

Tiếp tục chọn vị trí của file python main, trong trường hợp của mình là ./src/app.py

Khi nhấn Enter Vscode sẽ gen cho mình một file launch.json như sau:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Flask",
            "type": "python",
            "request": "launch",
            "module": "flask",
            "env": {
                "FLASK_APP": "./src/app.py",
                "FLASK_DEBUG": "1"
            },
            "args": [
                "run",
                "--no-debugger",
                "--no-reload"
            ],
            "jinja": true,
            "justMyCode": true
        }
    ]
}

Nhấn Start Debugging để bắt đầu debug

Kết quả:

Remote Debug

Vẫn là cấu trúc thư mục như vậy, mình sẽ remote debug với debugpy. Thêm dòng pip install debugpy và run debugpy như sau vào Dockerfile

FROM python:3.8
RUN pip install flask
RUN pip install debugpy # add this

COPY ./src /app

WORKDIR /app
# CMD ["python","app.py"]
CMD ["python", "-m" , "debugpy", "--listen", "0.0.0.0:5678", "app.py"] # add this

Ở docker-compose file thì tương tự như nảy giờ đã làm, mở thêm port debug. Trong trường hợp này là port 5678

Đầu tiên mình sẽ docker compose up lên trước sau đó mới attach debug

Để remote debug mình sẽ thêm file lauch.json theo các bước như sau

Chọn Remote Attach, sau đó chọn host và port

Khi này mình đã có một file launch.json hoàn thiện, việc cần làm là thay đổi localRoot và remoteRoot cho đúng với cấu trúc code. Nội dung file launch.json để copy cho tiện

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Remote Attach",
            "type": "python",
            "request": "attach",
            "connect": {
                "host": "localhost",
                "port": 5678
            },
            "pathMappings": [
                {
                    "localRoot": "${workspaceFolder}/src",
                    "remoteRoot": "/app"
                }
            ],
            "justMyCode": true
        }
    ]
}

Kết quả:

B.Pycharm

Remote Debug

Vẫn là cấu trúc src như trên, nhưng lần này mình sẽ setup remote debug với Pycharm

Trước khi setup thì mình connect docker daemon với Pycharm trong phần Settings như sau

Chọn Docker for Windows/MacOS, ngoài ra thì cũng có thể connect thông qua SSH hoặc WSL

Tiếp theo, tại góc dưới bên phải IDE khi click chuột vào sẽ hiển thị menu để add interpreter, mình tiến hành add Docker compose Interpreter (cũng có thể chọn On Docker)

Lúc này chỉ cần định vị file docker-compose.yml cho Pycharm và bấm Next để bắt đầu build

Khi build xong bấm Next

Tiếp tục để mặc định và bấm Create

Sau khi tạo meterpreter xong mình sẽ thêm config để chạy Flask app như sau (lưu ý phần interpreter phải đổi thành Docker compose Interpreter vừa mới tạo)

Bây giờ chỉ cần đặt break point và run flask app để debug

Kết quả:

Note: có một bất tiện là mỗi lần run nó sẽ tạo một containers mới và mình không biết khắc phục như thế nào, dẫn đến sau 1 hồi debug thì rất nhiều containers được tạo 😥

4.Nodejs

Mình có cấu trúc thư mục như sau:

Mình sẽ setup local debug và remote debug trên src này.

A. Vscode

Local Debug

Sau khi khởi tạo npm được cấu trúc src như trên thì mình chọn create a launch.json file để tạo file launch.json.

Chọn Nodejs

Khi đó ta sẽ được file launch.json như sau:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\src\\app.js"
        }
    ]
}

Lưu ý: đôi khi attribute program sẽ không trỏ đúng file app.js. Nên ta phải chỉnh lại cho tương ứng với src.

Bây giờ chỉ cần nhấn Start Debugging để bắt đầu debug

Kết quả:

Remote Debug

Đối với remote debug thì cực kỳ đơn giản, mình chỉ cần thêm 2 dòng sau vào docker compose file để chạy debug nodejs và mở port:

    ports:     
         - "9229:9229"
    command: ["node", "--inspect=0.0.0.0:9229", "app.js"]

Tổng quan file docker-compose.yml sẽ như thế này:

Bây giờ chỉ cần tạo file launch.json với nội dung như sau:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Docker: Attach to Node",
            "port": 9229,
            "remoteRoot": "/src",
            "localRoot": "${workspaceFolder}/src"
        }
    ]
}

Lưu ý: remoteRoot và localRoot sẽ map với cấu trúc src và port cũng phải đúng port đã open ở docker compose file

Bây giờ chỉ cần build docker và Start Debugging là có thể remote debug được rồi

Kết quả:

B. WebStorm

Remote Debug

Setup remote deubg trong WebStorm lại càng đơn giản hơn. Đầu tiên mình sẽ phải docker compose trước (file docker-compose.yml cũng thêm 2 dòng tương tự như phần trên)

Sau đó mở project bằng WebStorm

Chọn Edit Configurations để popup Run/Debug Configurations. Tại đây ta sẽ nhấn chuột phải để add config Attach to Node.js/Chrome và config như hình dưới

Lưu ý: port phải map với port debug mà ta đã set up ở docker-compose file

Bây giờ chỉ cần đặt breakpoint và debug thoai

JavaScriptPythonJavaPHPdebugging