PHPStorm + Xdebug + XAMPP + PHP/CodeIgniter 로컬에서 디버깅하기

보통 디버깅을 할 때는 로컬에서 BreakPoint를 잡아서 해당 BreakPoint까지 진행시키고, 멈춘 후 변수 들의 값들을 확인하는 방식으로 진행한다.

웹이 연동되지 않는 프로그램의 경우, 별도의 WAS설정 등이 많이 필요가 없다. 내장된 디버거 하나만으로도 디버깅이 가능하기 때문이다.

그러나 자바와 같은 컴파일 언어로 빌드한 웹 애플리케이션은 WAS에 jar 또는 war파일을 올리는 방식으로 수행하고,

php와 같은 스크립트 언어의 웹 애플리케이션은 서버에 스크립트를 올린 후 WAS에 path를 설정하여 읽은 후 실행하는 방식으로 수행된다.

이런 상황에서의 디버깅은 몇 가지 설정을 동반하여야 한다.

다룰 주제는 PHPStorm에서 Xdebug를 연동하여, 로컬에서만 돌아가는 프로그램이 아닌, 웹 애플리케이션을 디버깅하는 방법이다.

(자바에 대한 내용은 포함되어 있지 않음)

* 참고

기본적으로 웹 서버(Apache 사용), PHP는 XAMPP를 설치하면 제공되는 것을 사용한다.

 그 이유는, XAMPP를 설치하면 XAMPP Control Panel이라는 프로그램을 제공하는데, Apace Module쪽에서 Apache 또는 PHP에 대한 Start/Stop, Config, Logs를 원 클릭으로 제공하기 때문이다. 하다보면 이리저리 설정파일(php.ini 또는 httpd.conf)을 만질 일이 있는데, 일일이 찾아가서 수정하기란 여간 귀찮은 작업이 아니다.

php프레임워크는 코드이그나이터를 사용한다.

웹 브라우저는, Xdebug를 사용하기 위해 확장 프로그램을 지원하는, 구글의 Chrome을 사용한다.

1. PHP 설치 정보 얻기

Xdebug를 사용하기 위해서는 dll을 다운로드 하여 특정 path에 넣고, php.ini에 해당 dll의 경로를 포맷에 맞게 명시해야 한다.

문제는 설치된 PHP의 버전의 Thread Safe 등의 여부에 따라 다른 dll을 설치해야 한다.

단순히 다운로드 사이트에 들어가서 쳐다보면 어떤 버전을 받아야 할지 모르는데, 다운로드 사이트에서 php정보를 입력하면 적절한 버전의 dll 링크를 제공해준다.

php의 정보를 얻기 위해서는, php에서 제공하는 함수 phpinfo()를 이용해야 한다.

php 파일을 만든 후 phpinfo()를 echo로 출력하여 php의 정보를 웹 브라우저에 띄운다.

phpinfo()의 정보를 띄우는 것은, 아무런 프로젝트나 코드이그나이터의 특정 컨트롤러에 기술하면 쉽게 띄울 수 있다.

echo phpinfo(); 코드를 활용한다.

XAMPP Panel에서 Apache를 시작 한 후 다음과 같은 사진이 나온다면 성공이다.

2. PHP버전에 맞는 xdebug.dll 다운로드 받기

1번의 phpinfo()가 출력된 화면에서, 오른쪽 마우스 - 페이지 소스 보기  를 누르면 html 소스코드가 나온다.

Ctrl + A로 전체 지정을 한 후, 복사한다.

https://xdebug.org/wizard.php

에 접속하여 text창에 소스를 전체를 복사한 것을 붙여넣기 한 후 'Analysis my phpinfo() output' 을 클릭한다.

버튼을 누른 후 다음과 같은 화면이 뜬다면 성공.

아래에 링크되어 있는 dll이 Xdebug를 사용하기 위한 dll파일이다. 해당 파일을  그림의 2번의 경로에 위치시킨다.

참고로, 2번 경로는 현재 내 pc에 설치된 php의 경로를 찾아서 ext라느 폴더에 넣도록 알려주는 것이다.

따라서, 2번의 경로는 xampp가 설치된 사람마다 다른 경로가 나온다.  이는 phpinfo()에서 던져준 정보를 보여주기 때문이다.

다음과 같이 dll파일을 위치시킨다.

3. xdebug를 사용하도록 php.ini 세팅

xdebug.dll을 다운로드하였으니, 이를 php에서 인식하도록 해야 한다. XAMPP Control Panel에서 php.ini를 열도록 한다.

만약 XAMPP를 쓰지 않는다면, php.ini가 있는 곳에 직접 들어가서 설정해도 무방하다.

php.ini에 다음 정보를 추가한다.

[XDebug]

zend_extension = "D:\xampp\php\ext\php_xdebug-2.6.1-7.1-vc14.dll"

xdebug.remote_enable = 1

xdebug.remote_handler = "dbgp"

xdebug.remote_host = "127.0.0.1"

xdebug.remote_port=9000

zend_extension에는 xdebug를 사용하기 위한 dll의 절대경로를 적어준다.

여기서 xdebug.remote_port는 이후 설정할 PHPStorm의 Xdebug관련 설정에서도 나오는데, 이를 일치시키도록 하자. 

다음 그림은 위 정보를 php.ini의 맨 밑라인에 추가한 예시 이다.

만약 제대로 설정이 됐다면, php -v 명령을 쳤을 때 다음과 같이 Xdebug가 제대로 인식됨을 알 수 있다.

위 화면처럼 나오지 않고, Failed Loading : ~.dll 이라는 문구가 나온다면, 다음과 같은 상황이 아닌지 살펴봐야 한다.

 - php.ini에 path 또는 dll파일명을 잘못 입력

 - 파일명은 제대로 기술되었으나, 현재 php버전과 맞지 않아 로딩 오류

4. 크롬 웹브라우저에 xdebug 헬퍼 추가

웹 브라우저에 요청을 하고, IDE로 확인을 하는 방식으로 디버깅을 할 것인데, 단순히 요청만 해서 되는 것은 아니고,

Request에 XDEBUG_SESSION=netbeans_xdebug와 같은 값을 넣어서 보내야 한다고 한다.

이걸 Request마다 넣어주거나 다른 REST 클라이언트를 사용한다고 한다면 불편하고 번거롭다.

크롬에서는 이러한 작업을 자동으로 수행하는 확장 프로그램이 존재한다. 크롬 확장 스토어에서 아래 링크로 들어가, xdebug 헬퍼 확장 프로그램을 설치한다.

https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc

5. PHP Storm설정

IDE에서도 관련 설정을 해줘야 한다. PHPStorm에서 다음과 같이 세팅을 한다.

File -> Settings -> Languages&Frameworks -> PHP -> Debug 클릭 -> Xdebug란에 다음과 같이 세팅

6. 디버깅 시작

대부분의 IDE는 효율적인 디버깅을 위해 BreakPoint 기능을 지원하는데, PHPStorm 역시 지원한다.

대버깅할 소스코드와 라인수 중간의 공간을 클릭하면 BreakPoint가 빨간 색으로 걸린다.  주의할 점은, 주석/공백 부분은 클릭해도 BreakPoint가 잡히지 않는다.

또 단순히 BreakPoint를 지정하는 것으로 끝나는 게 아니라, IDE에서 Debug Connections Listener를 켜줘야 한다.

내 경우는 IDE 오른쪽 위에 존재했다. 아래 사진에서 전화기 표시에 전파 표시가 되어있어야 리스너가 켜진 것이다.

그다음, 크롬 브라우저에서 Debug모드를 사용하도록, 아까 설치한 확장 프로그램을 Enable 한다.

이제 새로 고침을 누르면 되는데, 만약 다음과 같은 화면이 떴다면 웹서버가 떠있지 않아서 그런 것이므로, XAMPP Control Panel에서 Apache를 Start해주도록 한다.

  

(위 상태는 꺼진 상태, Start를 누르면 켜짐)

아파치가 켜져있는 것을 확인 한 후, 다시 새로고침을 눌러보자.

새로고침을 누르는 순간, 다음과 같은 창이 뜬다. 맨 처음 디버깅을 할 때 PHPStorm에서 Debug Conntection Listener 가 디버깅 커넥관련 설정을 탐지하고 띄우는 것이다. 한번 Accept를 하면 그 이후부터는 보이지 않는다.

Accept를 누르면 지정한 Break Point쪽에 걸리면서 IDE에서 Debug라는 새로운 창이 뜨게 된다. 

PHP와 CodeIgniter에서 사용하는 로컬 및 각종 전역 변수를 확인할 수 있다. 잘 보면, 소스코드 입력 창에도 각 변수에 대한 내용을 화면에 띄워주기 때문에 간단한 변수값의 경우 바로 확인 할 수 있다.

웹 브라우저에서는 다음과 같이 계속해서 요청을 기다리고 있는 상태가 되는데, Response가 오면 제대로 페이지를 출력하게 된다.

이 시간이 길어질 경우, 환경에 따라 디버그 중 Timeout이 나는 경우도 있다.

Debug 창에는 여러 기능이 존재한다.

Step Over

Step Into

Forct Step Into

Step Out

Run to Cursor

Resume Program

Resume Program을 수행하면 다음 BreakPoint까지 이동하게 되며, 그 외 명령은 메서드단위 혹은 라인 단위로 수행하는 명령어 들이다.

웹 브라우저가 정상적으로 Response를 받으면, 실행하는 도중 일어난 Error, Fatal Error, Warning 등이 발생하기 까지의 Call Stack이나 발생 원인 및 라인 수를 띄워준다. 발생한게 없다면 일반적으로 기대하는 창이 로드된다.

상세한 디버깅 기능은 개인적으로 공부하길 바란다.