spectrum learns to dig

Meteor는 수정할때마다 소스를 다시 생성하는 방법이라서 기존 IDE상에서 node.js 디버깅은 어렵다. 하지만 방법이 없는 건 아닌데 의외로 간단하니 breakpoint나 watch가 필요한 경우 잘 보고 적용해보도록 하자. 사실 Meteor 에서 지원하는게 아니라 node 자체의 debugging 옵션을 사용하는 것인데 환경 변수 하나를 설정한다. export NODE_OPTIONS='--debug' 그리고 meteor(혹은 mrt)서버를 시작한다. 시작할때 로그를 보면 Running on: http://localhost:3000/ debugger listening on port 5858 5858포트로 디버거를 열었음을 확인할 수 있다.(default:기본값이 5858) 만일 특정포트로 열고자 하면 export NODE_OPTIONS='--debug=47977' 이런 식으로 하면 된다. 그리고 자신이 애용하는 node debugger로 보면 된다. node-inspector( https://github.com/dannycoates/node-inspector )나 node-webkit-agent ( https://github.com/c4milo/node-webkit-agent )같은 걸 사용하면 되겠다. webstorm을 사용한다면 Run/Debug Configuration으로 가서 설정하면 된다. node-inspector를 설치하고 해당 meteor 프로젝트가 있는 경로에서 터미널에 wstorm . 과 같이 커맨드라인 실행을 했다는 가정이다. (커맨드라인 실행은 webstorm > tools > Create Launcher Script 에서 지정한 name으로 할 수 있다) 그리고 Command Line Tools Console 에서 node-inspector나 node-webkit-agent 를 띄워서 본다. 내 경우엔 브라우저에서 창을 왔다갔다 하는게...

Google Chrome 이나 Firefox, Safari 그리고 아쉽지만 그런대로 Internet Explorer까지 모두 개발자 도구를 지원하여 DOM 구조를 보거나 요청별 응답시간을 추적하거나 CSS를 살펴보거나 할 수 있다. 이건 너무 편하고 당연해서 우리가 모바일 환경(Android/iOS)에서 같은 환경을 사용할 수 없는게 모바일 웹 개발의 어려운 점이기도 한데. 역시 찾아보니 방법이 있다. 먼저 iOS 같은 경우는 설정 > Safari > 고급 > 웹속성 을 켜주면 iOS장비와 Safari가 깔린 컴퓨터를 서로 연결하여 개발자용 메뉴 > (해당 기기 이름) 을 통해 접근가능하다. 물론 컴퓨터용 Safari에서 미리 환경>고급>메뉴 막대에서 개발자용 메뉴 보기 를 체크해줘야한다. 그리고 Android의 경우 Chrome for Android 가 있다면 좀 더 좋은 환경을 제공한다. https://developers.google.com/chrome/mobile/docs/debugging  내용 참조. USB 연결 후 adb devices 에서 장비 연결을 확인하고 Chrome for Anroid 에서 Settings > Advanced > Developer tools 로 들어가 Enable USB Web debugging 를 체크 그다음 adb forward tcp:9222 localabstract:chrome_devtools_remote 를 실행해서 9222 포트를 연결하고 크롬에서 localhost:9222를 띄워서 디버깅할 창을 선택하면 된다. https://developers.google.com/chrome-developer-tools/docs/timeline 도 같이 쓸 수 있따. 센스가 있는 분들이라면 iOS건 Android건 에뮬/시뮬을 통해서도 할 수 있지 않을까라고 생각할 수도 있을텐데 맞다. iOS Simulator나 AndroVM...