XDebug – Changwoo Blog

나는 주력으로 PhpStorm IDE를 꽤 오랫동안 사용해 오고 있다. IDE로서 매우 편리한 기능들이 많기 때문에 버릴 수가 없다.

하지만 요즘은 VSCode가 엄청나게 많은 개발자들의 지지를 얻고 있다. 무료로 사용 가능하고 많은 확장 기능들이 있어 그 나름대로 많이 편리한 것 같다. 가볍기도 하고.

나는 그동안 PhpStorm에서 최고로 유용한 기능으로 꼽았던 것이 PHP 원격 디버깅 기능이었다. 다만, 이건 PhpStorm에서만 가능한 사항은 아니고 IDE 별로 적절히 지원만 해 주면 가능한 기능이다.

앞으로 PhpStorm을 애용할 생각이지만, VSCode를 활용한 개발 환경은 대안으로 늘 만들어 두고 싶었다. 그 중 넘어야 할 산(?) 중 하나인 원격 디버깅 기능을 VSCode에서 셋업해 봤다.

PHP Debug

Extensions 메뉴를 선택하고, ‘PHP Debug’를 입력해 확장을 설치한다.

그다음 디버깅을 하려는 소스 코드가 있는 디렉토리를 연다. 만약 워드프레스 테마나 플러그인을 작업하려면 워드프레스 루트 디렉토리를 여는 것을 더 권장한다.

VSCode의 설정을 저장하는 .vscode 디렉토리가 생성된다 (만약 없으면 만들면 된다). 이 디렉토리에 launch.json 파일을 생성한다 (마찬가지로 없으면 만들면 된다). 이 파일에 다음처럼 셋팅을 준비한다.

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Remote Debugging",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/path/to/wp": "${workspaceFolder}/"
            }
        }
    ]
}Code language: JSON / JSON with Comments (json)

기본 템플릿 코드는 적당히 무시하고 위 코드로 갈음한다.
XDebug 3가 나오면서 기본 포트가 9000번에서 9003번으로 변경되었다. 해당 사항을 명시한다.
호스트는 로컬 개발을 가정하므로 기본인 localhost로 생략하였다.
type으로 php를 설정한다.
request는 launch로 고정된다.
pathMappings 부분의 /path/to/wp 부분은 현재 VSCode에서 열어둔 디렉토리 절대경로 설정한다.
name은 임의의 이름이다. 마음대로 정하면 된다.

이렇게 하면 ‘Run and Debug’ 메뉴에서 ‘Remote Debugging’ 실행 항목이 생성된다. ‘Start Debugging’ 아이콘을 눌러 디버깅을 실행하면 된다.

PHP XDebug 설정

xdebug 설정 부분은 대략 아래와 같다.

zend_extension=xdebug.so

xdebug.mode=develop,debug
xdebug.remote_enable=on
xdebug.start_with_request=trigger
xdebug.idekey=phpstorm-xdebug

이 설정은 XDebug 3의 설정이다. 2와 다르다. 버전을 확인하여 3.X인지 확인하자.
mode가 develop도 같이 넣어 에러 출력도 같이 더했다. 원하지 않으면 debug만 넣으면 된다.
start_with_requst=yes로 하는 방법도 있다. 그런데 이렇게 하면 언제나 디버깅이 실행된다. 브라우저에서 적절히 ON/OFF를 결정할 수 있으려면 trigger를 설정하면 된다.
브라우저에서 ON/OFF를 결정하는 방법은 세션 쿠키를 보내는 방법이다. 이때 사용하는 설정이 idekey. 이 값을 phpstorm-xdebug로 정했다. 디버깅은 VSCode 뿐만 아니라 PhpStorm에서도 번갈항 쓰는 데다, PhpStorm이 더 주력이기 때문이다.

브라우저 설정

start_with_requst=trigger로 설정했으면 이 과정이 필요하다. 브라우저에 절절히 세션 쿠키를 넣을 방법이 필요하기 때문이다. 어지간한 브라우저마다 PHP 디버깅을 위한 확장 프로그램을 제공할 것이다. 나는 주로 파이어폭스와 XDebug Session Cookie를 사용한다. 설치한 다음 쿠키 값으로 phpstorm-xdebug를 설정한다.

디버깅 시작

워드프레스의 프론트 메인 파일인 index.php에 적당히 브레이크 포인트를 넣고 디버깅을 시작해 봤다. 아래처럼 PHP 처리가 중간에 멈추면서, 해당 과정 중의 콜스택, 변수 정보를 모두 속속들이 볼 수 있다. 여기에서 함수 안으로 들어갈지, 다음 코드 라인으로 진행할지 결정할 수 있다.

현재 브레이크 포인트에 걸려서 중지된 라인이 하이라이트되었다.
디버깅 툴이다. 코드 진행을 제어할 수 있다.
현재 상태의 변수 이름과 값을 확인할 수 있다. 매우 유용하다.
콜스택이 나타난다.

배열의 활용이 두드러진 PHP 코드는 런타임 때 대체 연관 배열 변수 값이 어떤 구조인지 알아보기 어려운 경우가 많다. 이 때 사용할 수 있는 가장 강력한 툴이 바로 XDebug를 활용한 원격 디버깅인 것 같다. 이렇게 XDebug의 원격 디버깅 기능을 활용하면 프로그램의 상황을 자세히 파악하면서 개발할 수가 있다. 보다 품질 좋은 코드를 작성하려면 반드시 필요하다.

[태그:] XDebug

성가신 메시지 Xdebug: [Step Debug] Could not connect to … 제거

VSCode에서 PHP Remote Debugging 설정

PHP Debug

PHP XDebug 설정

브라우저 설정

디버깅 시작