[PHPStorm] PHP 및 JavaScript 원격 디버깅 Develop Tip

우분투 12.04 서버에서 아파치와 PHP 5.3이 설치되어 있을 경우, OS X 에서 원격으로 PHP 디버깅 혹은

JavaScript 디버깅을 해 봅니다.


우선 우분투 서버에서


$ sudo apt-get install php5-xdebug

$ sudo vi /etc/php5/conf.d/xdebug.ini

zend_extension=/usr/lib/php5/20090626/xdebug.so

xdebug.idekey=abcde12345

xdebug.remote_enable=On

xdebug.remote_connect_back=On


$ sudo /etc/init.d/apache2 restart

이렇게 합니다.


그러면,


$ php -v

PHP Deprecated: Comments starting with '#' are deprecated in /etc/php5/cli/conf.d/xdebug.ini on line 4 in Unknown on line 0PHP 5.3.10-1ubuntu3.4 with Suhosin-Patch (cli) (built: Sep 12 2012 18:59:41) Copyright (c) 1997-2012 The PHP GroupZend Engine v2.3.0, Copyright (c) 1998-2012 Zend Technologies

    with Xdebug v2.1.0, Copyright (c) 2002-2010, by Derick Rethans


위와 같이 Xdebug가 활성화 되었음을 확인합니다.

이제는 원격 컴퓨터 (OS X)에서 PHPStorm이 설치되어 있다고 가정합니다.


(윈도우, 리눅스 등도 상관없습니다)

초기 화면 입니다. 그런데 여기서 한가지, 오른편에 PlugIns 관리자를 띄웁니다.

위와 같이 Extended Code Sense 플러그인을 설치 해제 합니다. 이 플러그인이 설치되어 있으면 에디터에서 '$' 문자를 입력할 수 없었습니다. (좋다고 플러그인을 거의 모든 것을 설치했더니 이런 일이...)

원격 접속을 위하여 위와 같이 SFTP로 접속을 한다고 합니다. (SSH 접속이 가능한 경우입니다)

일단 로컬 위치를 지정하고,

서버 연결에서 "Add new Server" 를 선택하고 "Next"

위와 같이 지정을 해 놓았습니다. 

참고로 테스트할 소스는 /var/www 아래에 phpdebug 폴더를 만들어 그 안에 index.php 파일과, js/mytest.js 파일이 있는 상태입니다.

위와 같이 지정을 하고 "Next" 합니다.

웹 패스를 위와 같이 설정하고 "Finish" 합니다.

싱크하여 놓고 index.php 파일이 위와 같이 되어 있다고 가정합니다.

이제 원격 디버깅을 위하여 상단의 아래 화살표를 누르고, "Edit Configuration..."을 누릅니다.

"PHP Web Application"을 선택하고, 이름을 넣고 (phpdebug@jjj) 서버의 오른편 (...) 단추를 누르면,

위와 같이 서버 및 URL을 지정했습니다.

이제 브레이크 포인트를 잡고 디버그를 했더니, 위와 같이 디버거 창에 무언가 오류가 나타납니다.

오류 구문 중, "Click to set up paths..." 를 눌러, 위와 같이 매핑 정보를 넣어줍니다. (로컬에 가져온 파일과 원격 정보를 일치 시키는 작업입니다)

Setting use path mappting... 정보를 위와 같이 줍니다.

위와 같이 로컬에서 변경을 했을 경우, Tools > Deploy > Upload to ... 로 로컬에서 수정한 사항을 올릴 수 있습니다.

드디어 위와 같이 PHP를 원격에서 디버깅하는 감격스러운 장면이 화면에 잡혔습니다. ^^

이제는 JavaS-ript를 디버깅하기 위하여 위와 같이 "Edit Configuration"에서 "JavaS-ript Debug"를 선택하고, 위와 같이 remote url 정보를 주었습니다.

크롬으로 돌릴 경우 위와 같이 디버깅 정보가 나타납니다.

해당 JavaScript 를 디버그 하여 하단의 Scripts 탭에서 mytest.js 라는 간단한 javascript를 선택하면 서버에 있는 js파일을 에디터에 엽니다. 그 다음 필요 부분에 브레이킹 포인트를 정합니다.

디버그를 돌리고 웹 에서 단추를 눌러 onClick 이벤트를 부르면, 해당 js 함수가 돌면서 브레이킹 포인트에 섭니다.

위와 같이 결과가 나왔습니다.

결국 PHP와 JavaScript가 개별적으로 Debugging 하면 잘 됩니다.

제가 최근에 Eclipse 혹은 AptanaStudio 등으로 PHP 개발을 안했지만,

PHPStorm이 훨씬 더 좋은 IDE 환경임을 짐작할 수 있었습니다.

PHP로 큰 프로젝트를 진행할 경우 이런 IDE를 사용하면 생산성이 좋아질 것 같지 않나요??

어느 분께는 도움이 되셨기를 바랍니다...


핑백

  • 지훈현서 : [lighttpd + php5 + xdebug] PhpStorm 원격 DEBUG 2013-01-08 09:07:16 #

    ... 지난번 PhpStorm 원격 디버깅 블로그 내용과 유사하지만, 좀 더 하위레벨에서 테스트 해 본 것입니다. 일단은 아파치 웹서버 대신 lighttpd을 이용하여 php5와 xdebu ... more

  • 지훈현서 : [PyCharm]으로 HTML, Javascript, Less 이용하기 (기초) 2014-04-16 15:04:29 #

    ... yCharm을 이용하고 부터는 전혀 Eclipse를 사용하지 않게 되었습니다. 약 2년전쯤 필요에 따라 PHPStorm 을 이용할 필요가 있었습니다.(PHP 및 JavaScript 원격 디버깅 참조) 결국은 WebStorm, PHPStorm, PyCharm 등이 모두 IntelliJ의 기본 베이스에각각의 환경에 특화시켰다는 것을 알았 ... more

덧글

  • 여름눈 2012/12/12 03:09 # 답글

    제가 맥은 잘 모르겠지만 윈도우 환경일경우에 PHP는 에디트플러스의 FTP 업로드로 방식을 사용하면
    그리 복잡하지 않게 개발이 가능하죠~ ^^;
    또 JvaScript 디버깅은 크롬과 사파리에서 제공하는 개발자도구를 이용하면 훨신 간편하지 않을까요??
    (둘다 자바스크립트 콘솔을 제공합니다~)
  • 지훈현서아빠 2012/12/12 07:09 #

    음... 요즘 특성상 Node.js 등을 이용한 ServerSide JS가 대세인 듯 싶습니다.
    즉, JS가 단순 브라우저 단에서 도는 것 말고도 서버단에서 JS가 코드로 실행되는 것이지요.
    이런 경우에는 위에 말씀하신 것처럼 브라우저단에서 디버깅하기 힘들지요.
    이런 경우에도 모두 지원하는 것이 필요합니다...
  • 테드 2013/05/15 07:50 # 삭제

    에디트플러스의 용도가 있고,
    규모가 커지고, 아빠님 말씀대로 대량의 서버사이드 js 디버깅 등 복잡한 환경에서는 적합한 툴이 꼭 필요한 것 같아요.
    물론 저도 주로 에딧플러스+FTP editing 을 주로 사용해왔지만... 도움이 필요해서 우연히 인텔리 스톰시리즈를 찾게 되었네요.
    지훈현서아빠님, 좋은 정보 감사해요!
  • 지훈현서아빠 2013/05/15 09:21 #

    도움이 되셨다니 저의 보람입니다~
댓글 입력 영역

구글애드텍스트