강좌 & 팁
2013.12.24 18:17:33 (*.52.177.249)
41084
C 프로그램을 배울때 가장 강력한 디버깅 방법은?
기똥찬 IDE 툴을 사용하면서도 쓰고 있는 원시적이지만
매우 효율적인 디버깅 방법은?
예
정답일 수는 없지만 printf 함수 입니다.
프로그램 문제 찾을 때 가장 편하고 쉬우면서 강력한 것은
역시 무언가 출력해 보는 거죠...
아마 프로그램 역사가 아무리 발달해도 이 부분 만큼은 변하지 않을 겁니다.
자 node-webkit 용 프로그램을 작성하면
디버깅은 필수고..
뭐 잘 아시겠지만 생각보다 자바스크립트 디버깅 더럽습니다.
이런 경우 무언가 변수가 출력도 하고 해당 함수 통과 했나 보기도 하는
아주 초간단 방법은 출력 함수를 사용하는 거죠..
이렇때 유용한 것이
console.log( "잘 보입니까?" );
같은 것이죠...
그럼 이렇게 출력한 것은 어디에 표출될까요?
도스 커맨드 창에 표출될까요?
오 노...
크롬 브라우저가 개발자들에게 정말 죽이는 기능을 많이 가지고 있는 거 아시죠?
node-webkit 은 크롬 브라우저를 변형한 것이기 때문에 이 기능이 모두 살아 있다는 점이
최고의 잠정이죠...
오늘의 디버깅 환경을 체험하기 위해서
먼저 새로운 프로젝트를 하나 만들죠.
프로젝트를 만든다는 것이 이전 강좌에서 설명했듯이 디렉토리를 복사하는 것이죠..
더이상 설명안합니다. 앞으로도 이부분은 설명을 생략 할 겁니다.
자
오늘 만들 프로젝트 위치는 c:\nw\debug 라는 디렉토리 입니다.
먼저 디버깅을 하기 위해서는 url 을 표시하고 부분을 활성화 합니다.
이것을 제어 하는 부분은 package.json 이라는 파일에 설정합니다.
이것은 윈도우를 제어하는 부분에 포함되어 있는데
오늘의 목표에 집중하기 위해서 package.json 을 다음과 같이 만듭니다.
----[package.json]--------------------------------------------------------------
{
"name": "디버깅",
"main": "index.html",
"window":
{
"toolbar" : true
}
}
--------------------------------------------------------------------------------
기존에 작성했던 곳에서 새로 추가된 부분이 아래 부분인데
"window":
{
"toolbar" : true
}
이 항목을 생략해도 디폴트가 이 부분이 포함되어 있는 것으로 됩니다.
결국 써도 되고 안써도 됩니다.
도리어 url 을 표시하는 부분을 없애기 위해서는 이 부분을 명시하고
toolbar 에 대한 부분을 false 로 선언해야 없어 집니다.
하지만 정확이 어디서 제어하는지를 알려 주기 위해서
이렇게 설명하는 것이죠
흐흐 전 진짜 친절한 사람입니다. (퍽~~ 죄.. 죄송합니다. )
다음은 반드시 필요한 index.html 입니다.
index.html 문장에서 consol.log() 함수를 호출하는 경우와
main.js 에서 consol.log() 함수를 호출하는 경우를 모두 보기 위해서
다음과 같이 index.html을 작성합니다.
----[index.html]----------------------------------------------------------------
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<title>초 간단 디버그</title>
</head>
<body>
<h1>초 간단 디버그</h1>
간단하게 consol.log() 함수를 호출합니다.
<script type="text/javascript">
console.log( 'body 태그 안에 있는 자바 스크립트에서 호출' );
</script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
--------------------------------------------------------------------------------
main.js 에서 consol.log() 함수를 호출하는 경우를 보기 위해서
다음과 같이 index.html을 작성합니다.
----[main.js]-------------------------------------------------------------------
console.log( 'main.js 안에 있는 자바 스크립트에서 호출' );
--------------------------------------------------------------------------------
먼저 nw 명령을 사용해서 프로그램을 실행해 봅니다.
그러면 다음과 같이 나오는 것을 확인 할 수 있죠..
[그림 P001_프로그램 실행.png]
실행 결과를 보시면 아시겠지만 consol.log() 함수의 결과는 어디에도 표시되지 않습니다.
이제 url을 표시 부분의 오른쪽에 보면 가로 막대기 세계가 나란히 있는 것 처럼 보이는
버튼을 클릭합니다.
이 버튼을 누르면 DevTool 이라고 부르는 Developer Tools 창이 뜹니다
[그림 P002_Developer Tools.png]
이 창은 해당 웹 페이지의 다양한 디버깅 정보를 볼 수 있는 창입니다.
그 중에 console.log() 함수에서 출력한 내용은 메뉴 탭 중 Console 탭을 클릭하면
여기에 출력된 것을 확인 할 수 있습니다.
이후 강좌에서 따라하실때 요 놈을 잘 이용하시면 간단 간단하게 디버깅을 할 수 있을 겁니다.
디버깅 참 쉽죠?
