전통적 디버깅

디버그란 애플리케이션 프로그램 내에 존재하는 비정상적인 동작이나 논리상의 오류와 같은 버그를 찾아내어 수정하는 작업을 말합니다. 처음부터 완벽한 결과물을 만들어 낼 수 없는 개발의 특성상 시작 단계에서부터 완료 시까지 계속해서 디버깅 과정이 이뤄집니다.

개발자가 가장 손쉽게 사용할 수 있는 디버깅 방법은 확인이 필요한 객체나 변수 등을 화면에 출력하는 것입니다. 이렇게 출력창에 남겨진 기록을 로그라 하며 넥사크로플랫폼에서는 trace 메소드를 사용할 수 있습니다. trace는 추적한다는 의미 그대로 개발자가 로직의 흐름이나 변수의 값을 추적할 수 있도록 로그를 남기는 기능을 합니다. 다음과 같이 텍스트 형태로 기술하면 Output 창과 로그 파일에 정보를 출력합니다.

개발 과정에서 trace만큼 많이 사용하는 것이 alert 메소드입니다. trace는 남겨진 로그에서 자기가 필요로 하는 부분을 찾아 확인해야 하는 번거로움이 있지만 alert은 화면에서 바로 팝업으로 오픈하여 필요한 결과만을 확인할 수 있으므로 편리하다는 장점이 있습니다.

trace나 alert은 사용하기 쉽다는 장점이 있으나 프로젝트가 많은 파일로 구성되거나 코드가 길고 복잡한 경우에는 오히려 디버깅을 복잡하게 만듭니다. 또한, 여러 변수나 객체 정보를 출력할 때 공간상의 제약이 많으며 정보를 확인하기 불편합니다. 더구나 스크립트로 일일이 코딩을 해야 하며 디버깅이 끝난 다음에는 개발자가 직접 삭제해줘야 하므로 그 과정에서 새로운 문제를 일으킬 수도 있습니다.

넥사크로 스튜디오에서는 개발자가 좀 더 효율적으로 디버깅할 수 있도록 자체 디버그 기능을 포함하고 있습니다. 이번 장에서는 넥사크로스튜디오에서 제공하는 디버그 기능과 그 사용법에 관해 설명합니다.

디버그 기능을 활용한 디버깅

앞서 설명한 trace나 alert 메소드는 사용이 간편하지만, 프로세스의 흐름이나 많은 정보를 담고 있는 객체를 확인하기에 한계가 있습니다. 또한, 현재 코드상에 어떤 문제가 있는지 명확히 파악하기 힘듭니다. 하지만 디버그 기능을 사용하면 문제가 어디서부터 어떤 경로를 통해 해당 지점까지 오게 되었는지 등의 구체적인 정보를 추적하기에 좀 더 수월합니다.

넥사크로 스튜디오의 디버그 기능은 명령어를 실행할 수 있는 메뉴 및 툴바와 객체, 함수, 로그 등의 정보를 볼 수 있는 디버그 정보창으로 구성됩니다.

디버그 메뉴와 툴바

넥사크로 스튜디오의 디버그 메뉴와 툴바에서는 디버깅에 필요한 명령어를 사용할 수 있습니다. 디버그 메뉴와 툴바의 구성은 조건부 중단점 관련 명령을 제외하고는 같습니다.

주요 디버그 명령은 단축키를 지원합니다. 실제 디버깅할 때에는 디버그 명령을 메뉴나 툴바에서 선택해서 사용하기 보다는 단축키를 사용하는 것이 속도 면에서 훨씬 효과적입니다.

디버그 정보창

디버그 기능 사용하기

디버깅 모드로 애플리케이션 실행/종료하기

디버깅 모드는 디버깅을 위한 애플리케이션의 실행 형태로 디버그 기능을 사용해 애플리케이션의 오류를 추적하고 해결할 수 있는 환경을 제공합니다.

디버깅 모드는 Debug 메뉴에서 [Start Debugging] 혹은 [Start Form Debugging]을 선택하여 실행할 수 있습니다. [Start Debugging]은 프로젝트 전체를, [Start Form Debugging] 현재 오픈된 폼만을 실행할 때 사용합니다.

디버깅 모드를 종료하려면 Debug 메뉴에서 [Stop Debugging]을 선택합니다.

중단점 추가/삭제하기

중단점은 디버깅 모드에서 일시 정지할 위치를 지정할 때 사용합니다. 이렇게 지정된 위치는 스크립트 편집 창과 Breakpoints 창에서 확인할 수 있습니다. 스크립트 편집 창에서는 코드의 왼쪽에 위치한 줄 번호 옆에 마커가 찍혀 있어 중단점의 설정 상태를 확인할 수 있습니다. Breakpoints 창에서는 목록 형태로 중단점을 표시하는데 이를 더블 클릭하면 중단점이 찍혀 있는 소스 위치로 이동할 수 있습니다.

중단점을 한번 지정하면 넥사크로 스튜디오를 종료해도 사용자가 삭제하기 전까진 상태가 계속 유지됩니다.

중단점을 지정하면 해당 줄의 앞에 마커가 추가되고 Breakpoints 창에 중단점 정보가 등록됩니다. 또한, 한번 지정된 중단점은 사용자가 삭제하기 전까진 넥사크로 스튜디오를 종료해도 상태가 계속 유지됩니다.

중단점을 추가/삭제하는 방법을 예를 들어 설명합니다.

조건부 중단점 추가/삭제하기

사용자는 필요에 따라 중단점을 특정 조건에만 적중하도록 설정할 수 있습니다. 이렇게 조건을 설정한 중단점을 조건부 중단점이라 합니다.

조건 표현식을 설정하면 애플리케이션 수행이 해당 라인에 도달 시 설정된 조건에 맞는 경우에만 중단점이 적중합니다. 무시 횟수를 설정하면 코드 실행이 해당 라인에 도달해도 중단점은 무시되며 설정한 횟수를 넘어간 이후부터 적중합니다.

조건부 중단점의 기본적인 사용법은 중단점과 같으나 조건 표현식(Conditional Expression)과 무시 횟수(Number of Ignore)를 설정할 수 있다는 차이가 있습니다.

조건부 중단점을 추가/삭제하는 방법을 예를 들어 설명합니다.

입력을 완료하면 줄 번호 옆에 주황색 마커가 생기고 Breakpoints 창에서 다음과 같이 설정 정보를 확인할 수 있습니다.

중단점 활성화/비활성화하기

지정한 중단점은 필요에 따라 활성화 혹은 비활성화 상태로 설정할 수 있습니다. 이 기능은 지정한 중단점을 다음에 다시 사용해야 할 필요가 있을 때 일시적으로 중단점이 동작하지 못하도록 할 때 사용합니다.

중단점을 활성화 혹은 비활성화하면 해당 줄의 마커 표시와 Breakpoints 창의 중단점 정보가 상태에 맞게 변경됩니다.

중단점을 활성/비활성화하는 방법을 예를 들어 설명합니다.

디버깅 모드에서 코드 실행하기(Continue)

디버깅 모드에서 계속해서 코드를 실행하려면 Continue 명령을 사용합니다. Continue를 실행하면 현재 중단점부터 다음 중단점 사이의 코드를 실행하고 다음 중단점 위치에서 멈춥니다.

Continue 명령으로 코드를 실행하는 방법을 예를 들어 설명합니다.

Step 명령으로 코드 실행하기(Step Into, Step Over, Step Out)

중단점을 사용할 때에는 필요한 곳에만 사용하는 것이 좋습니다. 코드가 길고 복잡한 애플리케이션을 디버깅할 때 중단점을 남발하면 중단점을 지정한 횟수만큼 사용자가 직접 Continue 명령을 입력해야 하므로 실행 효율성이 떨어집니다. 따라서 특정 부분에서 줄 단위로 코드를 실행하며 디버깅이 필요한 경우에는 Step 명령을 사용하는 것이 편리합니다.

Step 명령은 일종의 임시 중단점 기능을 합니다. 쉽게 말해 중단점을 지정하지 않는 위치에서 애플리케이션 실행을 멈춰 디버깅할 때 사용할 수 있습니다. Step 명령은 동작 방식에 따라 Step Into, Step Over, Step Out으로 나뉩니다.

다음은 사용자로부터 숫자 두 개를 입력받아 더한 결과를 출력하는 예제 샘플입니다. btn_calc_onclick 함수는 버튼 클릭을 통해 발생하는 이벤트 함수로 사용자가 숫자 17과 2를 입력하고 연산 버튼을 클릭해서 함수 호출이 일어났다고 가정합니다.

다음은 사용자로부터 숫자 두 개를 입력받아 더한 결과를 출력하는 예제 샘플입니다. 이 예제를 사용하여 Step 명령으로 코드를 실행하는 방법에 관해 설명합니다.

Step Into 사용법

코드를 한 줄씩 실행합니다. 함수 호출을 만나면 해당 함수 내부로 이동하여 코드를 한 줄씩 실행합니다.

Step Over 사용법

코드를 한 줄씩 실행합니다. 실행 중 함수 호출을 만나면 함수 내부로 들어가지 않고 함수를 실행해 버린 후 다음 라인으로 이동합니다.

Step Out 사용법

현재 실행 중인 함수의 나머지 코드 부분을 실행하고 함수를 호출했던 곳으로 돌아가 그다음 줄로 이동한 후 멈춥니다.

Step Out은 독자적으로 사용하기보다는 Step Into와 같이 사용합니다. Step Into를 수행하며 함수 내부로 이동하여 코드를 수행하다 더는 살펴볼 필요가 없을 때 해당 함수에서의 디버깅을 건너뛰는 용도로 사용합니다.

커서 위치까지 한번에 코드 실행하기(Run to Cursor)

현재 적중된 중단점에서 커서 위치까지 코드를 실행한 후 멈춥니다. 만일 현재 중단점과 커서 사이에 다른 중단점이 존재하면 해당 중단점에서 실행을 멈춥니다. 또한, 커서의 위치가 분기 상 도달할 수 없는 위치일 경우에는 다음 중단점까지 실행한 후 멈춥니다.

Run to Cursor 명령으로 코드를 실행하는 방법을 예를 들어 설명합니다.

변수 값 확인하기(Variables)

디버깅의 가장 기본은 객체나 변수의 값을 확인하는 것입니다. 이 정보는 Variables 창에서 확인할 수 있습니다.

Variables는 중단점이 적중한 위치에서 접근 가능한 객체나 변수의 값을 표시합니다. 멤버를 포함하는 객체의 경우 목록에서 +/- 버튼으로 상세 내용을 펼치거나 접어서 확인할 수 있습니다. 값이 변경된 항목은 적색 볼드체로 표시됩니다. Variables은 디버깅 모드를 수행하면 자동으로 동작합니다.

Variables로 변수값을 확인하는 방법을 예를 들어 설명합니다.

변수 값 확인하기(Script Editor)

스크립트 편집기에서는 디버깅 중에 객체/변수값을 직관적으로 확인할 수 있도록 Assist Tip과 Inline Assist Variable 기능을 제공합니다.

Assist Tip은 스크립트 편집기에서 값을 확인하고 싶은 객체나 변수에 마우스 커서를 오버시키면 팝업 형태로 해당 정보를 표시해주는 기능입니다. 해당 항목이 변수면 단순히 값만 표시해 주고 객체면 구성되는 멤버와 그 값까지 트리 형태로 표시해 줍니다.

Inline Assist Variable은 스크립트 편집기에서 함수의 선언부부터 현재 적중된 중단점 사이에 존재하는 모든 객체와 변수의 값을 각 라인의 옆에 표시해 주는 기능입니다. 또한, 적중된 중단점이 속한 함수뿐만 아니라 그와 연관된 Call Stack 상의 함수에서도 해당 함수가 호출되기 이전까지의 객체와 변수값을 표시해 줍니다.

스크립트 편집기에서 변수값을 확인하는 방법을 예를 들어 설명합니다.

변수 값의 변화 관찰하기(Watch)

특정 객체 또는 변수를 Watch에 등록해놓고 디버깅이 진행되는 동안 해당 값의 변화를 살펴볼 수 있습니다. 값이 변경된 항목은 적색 볼드체로 표시됩니다.

일단 객체/변수를 Watch에 등록하면 넥사크로 스튜디오를 종료해도 사용자가 삭제하기 전까진 목록이 계속 유지됩니다.

Watch로 변수값을 관찰하는 방법을 예를 들어 설명합니다.

스크립트 편집기에서도 추가할 수 있는데 우선 객체 명이나 변수 명을 드래그하여 선택한 후 Watch 창에 드래그 앤 드롭하거나 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴에서 [Add Text to Watch]를 선택합니다.

함수 호출 정보 확인하기(Call Stack)

각종 객체와 함수가 섞여 있는 복잡한 코드를 디버깅하려면 함수 간의 관계를 파악하는 것이 중요합니다. 현재 보고 있는 코드가 어떤 함수에 존재하는 것인지, 어떤 함수의 호출로부터 왔는지 등을 한눈에 파악할 수 있다면 흐름을 파악하는 데 큰 도움이 됩니다.

Call Stack은 함수 호출 히스토리를 제공하여 함수 간의 호출 관계를 확인할 수 있게 해줍니다. 현재 위치까지 호출된 함수를 역순으로 표시하는데 항목의 함수명을 더블 클릭하면 함수를 호출한 위치의 코드로 이동할 수 있습니다.

Call Stack은 디버깅 모드를 실행하면 자동으로 동작하며 코드 실행 흐름에 따라 함수 호출 정보가 갱신됩니다.

함수 호출 정보를 확인하는 방법을 예를 들어 설명합니다.

현재 위치인 fn_add 함수가 최상단에 위치하고 그다음으로 fn_add 함수를 호출한 btn_calc_onclick 함수가 위치합니다. 그리고 그 아래에도 여러 함수가 보이는데 이는 넥사크로플랫폼 내부에서 사용되는 함수들이므로 특별한 경우가 아니면 신경을 쓰지 않아도 됩니다.