Google AdSense (text)

hidden logo stop

Moving

거지 같은 이글루스 광고노출 정책이 싫어서,
새 보금자리(http://blog.leocat.kr/)로 이사감.

[node.js] 디버깅 툴 Node Inspector Computer & Program

난 왠만한 코딩은 디버깅을 하면서 하기 때문에 디버깅 모드가 중요하다. 어릴적부터 습관을 잘못 들여서인지, 남들처럼 로그 찍고 확인하고 하는 방식의 개발은 영 답답해서 못 해먹겠다. 때문에 내가 원하는 위치에서 원하는 값을 확인하고 체크하고 하는 디버깅 모드가 가장 중요했다.

eclipse로 디버깅하는 플러그인은 이클립스로 디버깅이 된다는게 너무 좋았는데.. 사용하는데 불편함이 좀 있다. 디버깅 코드를 바꿔도 계속 원래코드로 동작한다는 것이다. "Display", "Expressions", "Variables" 등 웬만한 디버깅용 이클립스 view가 제대로 동작하지 않는다.


그리하야 좀 뒤적이다 찾아낸 것이 Node Inspector(https://github.com/dannycoates/node-inspector)이다. node.js로 만들어진 디버거이고, 디버깅 포트(default:5858)로 접속한 다음 웹 브라우저로 사용하면 된다. 헌데 파이어폭스에서는 아이콘이나 파일명이 안 보이는 등 정상적으로 동작하지 않는다. (정상 동작을 확인한 브라우저는 크롬과 사파리)


사용 방법은 간단하다.
1. Node Inspector를 설치한다. npm으로 관리되기 때문에 설치는 간단하다. (MacOS 같은 경우는 sudo 권한이 필요할 수 있다.)
$ npm install -g node-inspector

2. node.js 프로젝트를 디버깅 모드로 동작시킨다. (--debug 또는 --debug-brk 옵션)
$ cat app.js
var express = require('express');
var app = express();
app.get('/', function(req, res) {
  res.send('Hello world');
});

app.listen(8000);
$ npm install express
... [어쩌구 저쩌구; 예제가 Express의 예제이기 때문에 모듈 설치] ...
$ node --debug app.js
debugger listening on port 5858

3. Node Inspector를 디버깅 포트에 붙인다.
$ node-inspector &
   info - socket.io started
visit http://0.0.0.0:8080/debug?port=5858 to start debugging

4. 크롬이나 사파리 등으로 http://127.0.0.1:8080 또는 http://localhost:8080 으로 접속하면 아래와 같은 화면을 볼 수 있다.
맨위의 "Scripts"버튼을 누르면 아래와 같은 코드 영역이 나오고, 왼쪽에서 원하는 코드를 선택하면 된다.


"Console"이 있기 때문에 동작 중인 코드가 아닌 원하는 코드를 테스팅할 수 있고 자동완성까지 지원해 준다. 그리고 "Watch Expressions"와 "Call Stack"도 지원한다. 그리고 가장 맘에 드는건 코드를 변경하고 저장을 하면 저장된 코드로 프로그램이 동작한다는 것이다. (단!! 실제 코드가 변경되는 것이 아니라 동작하고 있는 코드만 변경되는 것이니 주의!!) 아래 사진은 기존 코드로 디버깅을 시작한 다음 프로그램 종료 없이 원하는 코드로 변경하고 디버깅하는 모습이다. message라는 변수를 만들었는데 "Watch Expressions"에서도 잘 볼 수 있고, "Console"로 이런저런 테스트도 가능하다.


덧글

댓글 입력 영역

Google AdSense (text/image)