스칼라.js 테스트 코드의 디버깅 (작성중) Scala

스칼라.js(Scala.js) 코드의 테스트를 작성하면, 최종적으로 생성된 .js 파일을 이용해 테스트를 진행하게 된다. 이때 rhino를 이용해 jvm 기반에서 테스트를 할 수도 있지만, 대개는 최종 실행 환경과 같은 브라우저 환경을 이용한다. 그런데 그러다 보니 간혹 테스트가 실패하거나 실행중 오류가 발생할 때, 스택트레이스(Stacktrace)가 제대로 표시되지 않거나 오류가 JavascriptException 식으로 모호하게 나와서 디버깅이 난감해진다. 경험상 이런 오류들은 웹 브라우저의 디버거를 이용해 .js 파일을 디버깅해야지, 컴파일되기 전의 .scala 파일에서는 논리적으로 추론하기 힘들 때가 많았다.

여기서는 컴파일된 .js 파일을 가지고 디버깅을 할 수 있는 방법들을 알아보기로 한다.

팬텀JS 실패시의 대응

스칼라.js 코드 테스트에 가장 쉽게 사용할 수 있는 것은 팬텀JS(PhantomJS)이다. 최신의 우분투에서는 apt-get 명령으로 쉽게 최신 버전을 세팅하고 테스트를 구동할 수 있다. 하지만 별로 추천하고 싶지는 않다. 웹킷 기반이라고는 하나 실제 널리 쓰이는 브라우저(Chrome, Firefox 등)에서는 일어나지 않는 오류가 발생하기도 하고, 그밖에 자잘한 문제점이 많기 때문이다(팬텀JS 프로젝트의 이슈 목록 참고). 따라서 최근에는 셀레니움(Selenium)에 xvfb를 붙이거나(scala-js-env-selenium) 카마(karma)등의 기존 JS 테스트 도구를 사용해 대체하기도 한다. 아마도 크롬의 헤드리스 모드가 릴리즈되면 설 자리가 더욱 좁아지지 않을까 싶다.

그런 이유로, 일단 팬텀JS에서 오류가 발생하면 이것이 실제 구동 환경(브라우저 혹은 node 등)에서도 발생하는 이슈인지를 확인해야 한다. 스칼라.js 0.6.10에서 추가된 testHtmlFastOpt/testHtmlFullOpt 태스크를 이용해 html 페이지를 빌드한 뒤, 브라우저에서 돌려보면 된다. 만일 브라우저에서도 발생한다면 여기서 디버깅을 하는 것이 편하다. 만일 그렇지 않다면 웹킷의 리모트 디버거를 이용해 팬텀JS 런타임에서 발생하는 문제를 추적할 수 있다.

순서는 다음을 따른다. (버전 2.1.1 기준)

1. 빌드 파일에 PhantomJS 환경 설정을 추가하거나 수정한다.
jsEnv in Test := PhantomJSEnv(args = Seq("--remote-debugger-port=9001")).value,

2. JS 프로젝트의 테스트를 실행한다.
$ sbt js/test

3. 브라우저를 열고 http://localhost:9001/webkit/inspector/inspector.html?page=1 에 접속한다.

4. 화면에 보이는 Web Inspector에서 (필요하면) 소스코드에 breakpoint를 설정한다. 브라우저의 개발자 도구가 아님에 주의.

5. 화면에 보이는 Web Inspector의 Console 탭에서 __run() 을 실행하고 결과를 확인한다.

보다 자세한 내용 : http://phantomjs.org/troubleshooting.html 의 Remote Debugging 항목 참고.

=> 그런데 여기서는 소스코드나 오류 라인이 제대로 표시되지 않는다. /tmp/phantomjs-launcher*.js 를 커맨드라인에서 실행해보는 방법이 더 나은 듯 하다.

Tag :
, ,

Leave Comments