WebStorm에서 Hubot 디버깅 환경 구축

Hubot 설치/셋팅

yeoman generator for hubot 를 설치하고 hubot 프로젝트의 스캐폴드 생성:

> npm install -g generator-hubot
> mkdir hubot && cd hubot
hubot > yo hubot
➜ hubot yo hubot
...
...

CoffeeScript 설정

  1. PyCharm 메뉴에서 Settings/Preferences 열기.
  2. Build, Execution, Deployment 에서 Docker 선택.

Hubot 실행 설정

  1. Hubot 실행을 위해 먼저 실행 환경을 추가한다. 메뉴에서 Run 을 클릭하고 Edit Configuration 을 클릭.
  2. + 를 클릭하고Node.js 선택.
  3. JavaScript File항목에 node_modules/hubot/bin/hubot입력. 체크 Run with CoffeeScript plugin(2017.1 버전에서는 필요 없음), Path to coffee executable 항목에 ~YOURDIRECTORY/hubot/node_modules/hubot/node_modules/coffee-script/bin/coffee입력.
  4. scripts/example.coffee 파일을 열면 우측 상단에 Add watcher 메시지가 표시되고, 클릭하면 CoffeeScript filewatcher 설정.
  5. watcher 설정 화면에서 OK to 클릭, 이후 *.coffee 파일은 watcher가 자동 실행됨.
  6. example.coffee 를 변경하면 WebStorm이 자동으로 example.js 파일과 example.js.map 파일을 생성한 것을 볼 수 있다. example.jsexample.coffee 파일의 변경이 감지되면, example.coffee 에서 변환되어 생성되는 파일이다.
  7. CoffeeScript file watcher 를 수동으로 설정하기 위해서는, WebStorm > Preference > Tools> File Watchers > CoffeeScript 에서 할 수 있다.
  8. WebStorm 은 ArgumentsOutput paths to refesh 을 자동으로 설정한다. 다만 CoffeeScript 실행 파일이 전역 실행 가능한지 확인한다. 일반적으로 실행 파일은 /usr/local/bin/coffee 에 위치해 있다.
  9. Apply 를 클릭하여 저장한다.
1. Hubot 실행 설정
2. Hubot 실행 설정
3. Hubot 실행 설정
4. Hubot 실행 설정
5. Hubot 실행 설정
6. Hubot 실행 설정
7. Hubot 실행 설정
8. Hubot 실행 설정
9. Hubot 실행 설정

Debug configurations

  1. ~YOURDIRECTORY/hubot/node_modules/hubot/bin 로 들어가서 hubot 파일을 hubot.coffee 로 복사한다. WebStrom 이 자동으로 hubot.jshubot.js.map 파일을 생성한다.
  2. ‘Hunbot 실행 설정’ 2번째 항목에서 처럼 Node.js, 파일을 추가한다. 하지만 이번에는 JavaScript File 항목에 node_modules/hubot/bin/hubot 를 입력한다.
  3. 강제로 watcher 에서 coffeeScript 파일을 js 파일로 변환하기:
    find . -type f -name "*.coffee" -exec touch {} \;
  4. hubot.js 파일의 robot.run() 라인에 브레이킹 포인트를 잡고 디버깅을 시작해 본다.
  5. 실행 후 hubot.coffee 의 해당 라인에서 멈추고 일반적인 node.js 프로젝트 처럼 모든 변수가 표시된다.
1. Debug configurations
2. Debug configurations
3. Debug configurations
4. Debug configurations
5. Debug configurations

참조 원문: http://blog.neilni.com/2015/07/05/developing_hubot_with_webstorm/