9.디버그 기능

9.1전통적 디버깅

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

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

그림 9-1trace_1

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

그림 9-2alert_1

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

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

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

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

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

9.2.1디버그 메뉴와 툴바

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

그림 9-3debug_toolbar

그림 9-4debug_menu_4


항목

설명

1

Start Debugging (F5)

Continue (F5)

애플리케이션 디버깅을 시작합니다.

디버깅을 계속해서 진행합니다.

(디버깅이 시작되면 Start Debugging 메뉴가 Continue 메뉴로 전환됩니다)

2

Start From Debugging (F6)

현재 폼에 대한 디버깅을 시작합니다.

3

Stop Debugging (Shift + F5)

디버깅을 종료합니다.

4

Restart (Ctrl + Shift + F5)

디버깅을 종료한 후 다시 시작합니다.

5

Step Into (F11)

한 줄씩 코드를 실행합니다. 중간에 함수가 호출되면 해당 함수로 넘어가 코드를 실행합니다.

6

Step Over (F10)

함수 단위로 코드를 실행합니다.

7

Step Out (Shift + F11)

함수에서 나갑니다.

8

Run to Cursor (Shift + F10)

현재 위치에서 커서의 위치까지 실행합니다.

9

Toggle Breakpoint (F9)

중단점을 지정하거나 해제합니다.

10

Set Conditional Breakpoint

조건부 중단점을 지정합니다.

11

Edit Breakpoint

지정된 중단점에 조건을 설정합니다.

12

Delete All Breakpoints (Ctrl + Shift + F9)

지정된 모든 중단점을 해제합니다.

13

Go to Source Code

Breakpoints 창의 중단점 목록에서 해당 중단점의 소스 위치로 이동합니다.

14

Enable/Disable Breakpoint (Ctrl + F9)

지정된 중단점을 활성화 혹은 비활성화합니다.

15

Enable/Disable All Breakpoints

지정된 모든 중단점을 활성화 혹은 비활성화합니다.

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

9.2.2디버그 정보창

기능

설명

Debug

디버깅 모드에서 발생하는 메시지를 표시합니다.

Breakpoints

디버깅 모드에서 일시 정지할 위치를 스크립트 코드상에 지정할 수 있습니다. 중단점으로 지정된 위치는 Breakpoints 창에서 목록 형태로 확인할 수 있습니다.

Call Stack

현재 상태까지 거쳐온 함수를 역순으로 표시해 줍니다. 함수를 더블 클릭하면 해당 소스의 위치로 이동합니다.

Variables

현재 상태에서 확인이 가능한 변수, 객체의 상태 값을 조회합니다. 변수인 경우에는 해당 값을 보여주고, 객체인 경우에는 해당 객체의 속성을 트리 형태로 조회할 수 있습니다.

Watch

특정 변수나 객체의 값을 등록해 놓고 변화되는 값을 관찰할 수 있습니다. 특히 스텝 기능을 사용할 때 유용합니다.

9.3디버그 기능 사용하기

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

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

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

그림 9-5new_01

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

중단점을 설정하지 않은 상태에서도 디버깅 모드로 애플리케이션을 실행할 수 있습니다. 그러나 디버그 기능들을 사용할 수 없으므로 실행 자체가 무의미합니다. 그러므로 중단점을 먼저 지정한 후 디버깅 모드로 실행하시기 바랍니다.

9.3.2중단점 추가/삭제하기

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

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

마커란?

중단점이 지정되었음을 알려주는 일종의 표식입니다. 중단점의 설정 상태에 따라 다음의 네 가지 모양을 갖습니다.


(Enable): 중단점을 지정한 줄에서 실행을 멈춥니다.

(Disable): 중단점을 비활성화합니다. 애플리케이션 실행 시 무시됩니다.

(Conditional Enable): 중단점에 설정된 조건이 일치할 경우에만 실행을 멈춥니다.

(Conditional Disable): 조건부 중단점을 비활성화합니다. 애플리케이션 실행 시 무시됩니다.

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

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

그림 9-6debug_2-2_01

1

스크립트 편집 창에서 20번 줄을 선택합니다.

2

20번 줄의 줄 번호를 클릭하거나 메뉴에서 [Toggle Breakpoint]를 선택하면 중단점이 지정됩니다. 중단점으로 지정되면 줄 번호 옆에 마커가 생깁니다.

중단점을 삭제하려면 삭제하려는 위치의 줄 번호를 클릭하거나 툴바의 [Toggle Breakpoint]를 선택합니다. [Delete Breakpoint]를 선택해도 결과는 같습니다. 중단점을 삭제하면 줄번호 옆의 마커가 없어지고 Breakpoints 창의 중단점 정보도 없어집니다.

지정한 모든 중단점을 한 번에 삭제하려면 메뉴나 툴바에서 [Delete All Breakpoints]를 선택합니다.

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

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

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

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

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

1

스크립트 편집 창을 클릭하여 활성화 시킵니다.

2

스크립트 편집 창에서 19번 줄을 선택하고 툴바 혹은 Breakpoints 창에서 [Set Conditional Breakpoint]를 선택합니다.

그림 9-7new_07_conditional_breakpoint

3

Add Conditional Breakpoint 팝업이 오픈되면 Conditional Expression에 조건 표현식을 입력합니다.

그림 9-8sample_07


이름

설명

1

Conditional Expression

중단점을 적중시킬 조건 표현식을 설정합니다.

2

Number of ignore

설정한 횟수만큼 중단점을 무시합니다.

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

그림 9-9new_03

조건부 중단점을 삭제하려면 삭제하려는 위치의 줄 번호를 클릭하거나 툴바의 [Toggle Breakpoint]를 선택합니다. [Delete Breakpoint]를 선택해도 결과는 같습니다. 중단점을 삭제하면 줄번호 옆의 마커가 없어지고 Breakpoints 창의 중단점 정보도 없어집니다.

지정한 모든 중단점을 한 번에 삭제하려면 메뉴나 툴바에서 [Delete All Breakpoints]를 선택합니다.

이미 중단점으로 지정된 줄이라도 툴바의 [Edit Breakpoint]를 사용하여 조건식이나 무시 횟수 값을 설정하면 조건부 중단점으로 변경됩니다.

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

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

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

그림 9-10new_06_breakpoint_disable

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

1

스크립트 편집창에서 38번 줄에 중단점을 지정합니다.

2

중단점이 지정된 38번 줄을 선택한 후 툴바에서 [Enable/Disable Breakpoint]를 선택합니다.

비활성화된 중단점을 다시 활성화하려면 툴바의 [Enable/Disable Breakpoint]를 다시 한번 선택합니다. 그리고 지정된 모든 중단점을 한 번에 활성화 혹은 비활성화하려면 툴바에서 [Enable/Disable All Breakpoints]를 선택합니다.

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

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

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

1

스크립트 편집창에서 34번 줄과 44번 줄에 중단점을 지정합니다.

그림 9-11debug_2-10_01

2

디버깅 모드로 애플리케이션을 실행하면 34번 줄까지 코드가 실행된 후 멈춥니다.

3

이때 메뉴나 툴바에서 [Continue]를 선택하면 35번 줄부터 43번 줄까지의 코드를 모두 실행하고 그다음 중단점인 44번 줄에서 멈춥니다.

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

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

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

Step 명령을 사용하여 디버깅 시에도 진행 중간에 중단점이 존재하면 Step 명령과 상관없이 중단점 위치에서 실행이 멈춥니다.

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

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

그림 9-12debug_2-6_01

Step Into 사용법

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

1

스크립트 편집 창에서 20번 줄에 중단점을 지정합니다.

2

디버깅 모드로 애플리케이션을 실행하면 20번 줄까지 코드가 실행된 후 멈춥니다.

3

메뉴나 툴바에서 [Step Into]를 선택하면 아래와 같이 fn_validate 함수의 첫 번째 줄로 이동합니다. 만일 한 번 더 [Step Into]를 선택하면 3번 줄을 실행하는데 여기서 다시 isNumeric 함수의 호출이 발생하므로 isNumeric 함수의 첫 번째 줄로 이동하게 됩니다.

그림 9-13debug_2-6_02

Step Over 사용법

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

1

스크립트 편집 창에서 20번 줄에 중단점을 지정합니다.

2

디버깅 모드로 애플리케이션을 실행하면 20번 줄까지 코드가 실행된 후 멈춥니다.

3

메뉴나 툴바에서 [Step Over]를 선택하면 21번 줄의 fn_validate 함수를 실행하고 27번 줄로 이동합니다. 한 번 더 [Step Over]를 선택하면 27번 줄의 코드를 실행하고 그다음 줄인 28번 줄로 이동하여 멈춥니다.

그림 9-14debug_2-6_03

Step Out 사용법

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

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

1

스크립트 편집창에서 20번 줄에 중단점을 지정합니다.

2

디버깅 모드로 애플리케이션을 실행하면 20번 줄까지 코드가 실행된 후 멈춥니다.

3

메뉴나 툴바에서 [Step Into]를 선택하면 21번 줄을 실행하는데 여기서 fn_validate 함수를 호출하므로 fn_validate 함수의 첫 번째 줄로 이동합니다.

그림 9-15debug_2-6_02

4

메뉴나 툴바에서 [Step Out]을 선택하면 3번 줄부터 fn_validate 함수의 끝인 5번 줄까지 실행한 후 fn_validate 함수를 호출했던 btn_calc_onclick 함수의 21번 줄로 이동합니다.

그림 9-16debug_2-6_04

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

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

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

그림 9-17new_05_run_to_cursur

1

스크립트 편집 창에서 34번 줄에 중단점을 지정합니다.

2

디버깅 모드로 애플리케이션을 실행합니다. 입력과 버튼 클릭이 이뤄지면 34번 줄에서 실행이 멈춥니다.

3

43번 줄에 커서를 놓고 메뉴나 툴바에서 [Run to Cursor]을 선택합니다. 그러면 35번 줄부터 42번 줄까지 코드를 실행하고 43번 줄에서 실행이 멈춥니다.

9.3.8변수 값 확인하기(Variables)

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

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

그림 9-18debug_2-8_03

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

1

스크립트 편집 창에서 세 변수 x, y, result의 값을 확인하기 위해 34번 줄에 중단점을 지정합니다.

그림 9-19debug_2-8_01

2

디버깅 모드로 애플리케이션을 실행합니다. 입력과 버튼 클릭이 이뤄지면 34번 줄에서 실행이 멈춥니다. 이때, Variables 창을 보면 다음과 같이 x, y, result 값을 확인할 수 있습니다.

그림 9-20debug_2-8_02

9.3.9변수 값 확인하기(Script Editor)

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

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

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

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

1

스크립트 편집 창에서 세 변수 x, y, result의 값을 확인하기 위해 34번 줄에 중단점을 지정합니다.

그림 9-21debug_2-8_01

2

디버깅 모드로 애플리케이션을 실행합니다. 입력과 버튼 클릭이 이뤄지면 34번 줄에서 실행이 멈춥니다. 이때, 스크립트 편집기를 보면 적중된 중단점 위쪽 코드 줄 옆에 '변수 = 값' 형태로 Inline Asist Variable이 표시됩니다. Asist Tip으로 특정 변수값만을 확인하고 싶으면 마우스 커서를 객체 혹은 변수명 위로 오버시키면 사각형 상자안에 값이 표시됩니다.

그림 9-22debug_2-9_01

Assist Tip과 Inline Assist Variable 기능의 사용 여부는 [Options > Debug > Assistance]에서 설정할 수 있습니다.

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

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

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

그림 9-23new_04_watch

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

1

스크립트 편집 창에서 result 변수값의 변화를 관찰하기 위해 34번 줄과 44번 줄에 중단점을 지정합니다.

그림 9-24debug_2-10_01

2

디버깅 모드로 애플리케이션을 실행합니다. 입력과 버튼 클릭이 이뤄지면 34번 줄에서 실행이 멈춥니다. 그럼 Watch 창을 선택한 후 + 버튼을 클릭하거나 마지막 행(Input Expression)을 더블 클릭하여 다음과 같이 result 변수를 등록합니다.

그림 9-25debug_2-10_02

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

3

Continue 명령을 사용하여 코드를 실행합니다. 두 번째 중단점인 44번 줄에서 실행이 멈추면 다시 Watch 창을 확인하여 result 값이 어떻게 변화됐는지 확인합니다.

그림 9-26debug_2-10_03

객체나 변수를 Watch에 추가하면 사용자가 삭제하기 전까지 계속 유지됩니다. Watch에 등록한 변수를 삭제하려면 Watch 창에서 삭제하려는 항목을 선택한 후 - 버튼을 클릭하거나 키보드의 Delete 키를 입력합니다.

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

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

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

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

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

1

스크립트 편집 창에서 함수 호출 정보를 확인하기 위해 fn_add 함수 내에 있는 26번 줄에 중단점을 지정합니다.

그림 9-27debug_2-11_01

2

디버깅 모드로 애플리케이션을 실행합니다. 입력과 버튼 클릭이 이뤄지면 26번 줄에서 실행이 멈춥니다. 이때, Call Stack 창에서 함수 호출 정보를 확인하면 다음과 같습니다.

그림 9-28debug_2-11_02

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

스크립트 함수 정의 형태에 따라 Call Stack 창에 함수명이 표시되지 않을 수도 있습니다. 예를 들면, 다음과 같이 선언된 함수는 함수명이 표시되지 않고 인수만 (a, b) 형태로 표시됩니다.

function myFunc(a, b) { }


따라서 Call Stack에 함수명이 정상적으로 표시되지 않을 경우에는 다음과 같은 형태를 사용하시기 바랍니다.

var myFunction = function(a, b) { }