퀵 스타트: 디버거 탐색(JavaScript)

이 퀵 스타트에서는 Visual Studio 디버거에서 탐색하는 방법과 한 세션에서 프로그램 상태를 보는 방법을 보여 줍니다.

이 퀵 스타트는 Visual Studio를 사용한 디버깅을 처음 접하는 개발자와 Visual Studio 디버그 세션에서의 탐색에 대해 자세히 배우려는 개발자를 위한 것이며 디버깅 기술 자체를 설명하지는 않습니다. 샘플 코드의 함수는 이 항목에서 설명하는 디버깅 절차를 보여 주기 위한 용도로만 디자인되었으며 응용 프로그램 또는 함수 디자인에 대한 최선의 구현 방법을 사용하지 않습니다. 사실상 샘플 코드의 함수나 응용 프로그램 자체의 기능이 별로 없다는 사실을 바로 알게 될 것입니다.

이 퀵 스타트의 단원은 최대한 독립적으로 디자인되었으므로 이미 잘 알고 있는 정보가 포함된 단원은 건너뛰어도 됩니다. 샘플 응용 프로그램을 만들 필요는 없지만 샘플 응용 프로그램을 만드는 것이 좋으며 프로세스는 최대한 쉽게 만들었습니다.

디버거 바로 가기 키. Visual Studio에서 탐색은 마우스와 키보드 모두에 맞게 최적화되었습니다. 이 항목에 있는 대부분의 단계에는 괄호 안의 설명에 키보드 액셀러레이터 또는 바로 가기 키가 포함되어 있습니다. 예를 들어 (키보드: F5)는 F5 키를 누르면 디버거 실행이 시작되거나 계속됨을 나타냅니다.

참고

모듈 패턴

Windows 스토어 앱에서는 주로 JavaScript 모듈 패턴을 사용하여 페이지의 데이터 및 함수를 캡슐화합니다. 모듈 패턴은 단일 자체 실행 익명 클로저를 사용하여 페이지 기능을 전역 네임스페이스와 별개로 유지합니다. 이 항목에서는 해당 함수를 모듈이라고 합니다.

항목 내용

여기에서는 다음과 같은 작업을 수행하는 방법에 대해 배울 수 있습니다.

샘플 응용 프로그램 만들기

중단점 설정, 중단점까지 실행, 한 단계씩 함수 실행 및 프로그램 데이터 검사

한 단계씩 함수 실행, 함수 건너뛰기 및 함수에서 나가기

조건부 중단점 설정, 커서까지 실행 및 변수 시각화

로컬 창에서 변수 데이터 보기

• 개체의 변수 데이터 및 속성 체인 보기

• 범위 체인 데이터 검사

호출 스택 창을 사용하여 코드 탐색

샘플 응용 프로그램 만들기

디버깅은 코드에 대해 이루어지므로 샘플 응용 프로그램은 Windows 스토어 앱의 프레임워크를 사용하여 디버그 세션 탐색이 작동하는 방법과 프로그램 상태를 검사하는 방법을 볼 수 있는 소스 파일을 만들기만 합니다. 호출할 코드는 모두 default.js 파일의 module 함수에서 호출됩니다. 컨트롤이 추가되지 않고 이벤트가 처리되지 않습니다.

1. 빈 JavaScript Windows 스토어 앱을 만듭니다. Visual Studio를 엽니다. 홈 페이지에서 새 프로젝트 링크를 선택합니다. 새 프로젝트 대화 상자의 설치됨 목록에서 JavaScript를 선택한 다음 Windows 스토어를 선택합니다. 프로젝트 템플릿 목록에서 새 응용 프로그램을 선택합니다. 새 솔루션 및 프로젝트가 만들어지고 코드 편집기에 default.htm 파일이 표시됩니다.

   페이지에 로드된 스크립트 파일을 확인합니다.

   • base.js 및 ui.js 파일은 JavaScript용 Windows 라이브러리를 만듭니다. JavaScript용 Windows 라이브러리는 JavaScript를 사용하여 Windows 스토어 앱을 쉽게 만들 수 있도록 하는 JavaScript 및 CSS 파일 집합입니다. JavaScript용 Windows 라이브러리를 HTML, CSS 및 Windows Runtime과 함께 사용하여 응용 프로그램을 만들 수 있습니다.

   • 코드는 default.js 파일에서 시작합니다.

2. default.js 소스 파일을 엽니다. 솔루션 탐색기에서 js 노드를 열고 default.js를 선택합니다.

3. 페이지 내용을 샘플 코드로 바꿉니다. default.js 파일에서 모든 내용을 삭제합니다. 디버거 탐색 샘플 코드(JavaScript) 링크를 클릭한 다음 JavaScript 섹션에 나열된 코드를 클립보드에 복사합니다. 이 퀵 스타트 페이지로 돌아가려면 브라우저 또는 도움말 뷰어에서 뒤로를 선택합니다. Visual Studio 편집기에서 비어 있는 default.js에 코드를 붙여 넣습니다. Ctrl+S를 선택하여 파일을 저장합니다.

이제 이 항목의 예제를 수행할 수 있습니다.

중단점 설정, 중단점까지 실행, 한 단계씩 함수 실행 및 프로그램 데이터 검사

디버그 세션을 시작하는 가장 일반적인 방법은 디버그 메뉴에서 디버깅 시작(키보드: F5)을 선택하는 것입니다. 응용 프로그램이 시작된 후 중단점에 도달하거나 수동으로 실행을 일시 중단하거나 예외가 발생하거나 응용 프로그램이 끝날 때까지 계속해서 실행됩니다.

디버거에서 실행이 일시 중단되는 경우 데이터 팁의 활성 변수에서 마우스를 멈추면 해당 변수 값을 볼 수 있습니다.

응용 프로그램의 실행을 일시 중단(디버거 실행이라고도 함)한 후 나머지 프로그램 코드의 실행 방법을 제어할 수 있습니다. 함수 호출에서 함수 자체로 이동하여 한 줄씩 계속하거나 호출된 함수를 하나의 단계에서 실행할 수 있습니다. 이러한 절차를 단계별 응용 프로그램 실행이라고 합니다. 설정한 다음 중단점까지 또는 커서를 둔 줄까지 실행하여 응용 프로그램의 표준 실행을 다시 시작할 수도 있습니다. 언제든지 디버그 세션을 중지할 수 있습니다. 디버거는 필요한 정리 작업을 수행하고 실행을 종료하도록 디자인되었습니다.

예제 1

이 예제에서는 첫 번째 사용자 문을 호출할 때 default.js의 module 함수 본문에 중단점을 설정합니다. 그런 다음 함수를 한 단계씩 실행하고 디버거 데이터 팁의 변수 값을 확인한 다음 디버깅을 중지합니다.

1. 중단점을 설정합니다. app.start()에 대한 호출 직후에 발생하는 callTrack = "module function"; 문에 중단점을 설정합니다. 소스 코드 편집기의 회색 여백에 있는 줄을 선택합니다(키보드: 해당 줄에 커서를 두고 F9 키 선택).

   

   여백에 중단점 아이콘이 나타납니다.

2. 중단점까지 실행합니다. 디버그 메뉴에서 디버깅 시작(키보드: F5)을 선택하여 디버그 세션을 시작합니다.

   응용 프로그램 실행이 시작된 후, 중단점을 설정한 문 바로 앞에서 실행이 일시 중단됩니다. 여백에 있는 현재 줄 아이콘으로 위치가 식별되며 현재 문은 강조 표시됩니다.

   

   이제 응용 프로그램의 실행을 제어할 수 있으므로 프로그램 문을 단계별로 실행하면서 프로그램 상태를 검사할 수 있습니다.

3. 함수를 한 단계씩 실행합니다. 디버그 메뉴에서 한 단계씩 코드 실행(키보드: F11)을 선택합니다.

   

   디버거가 example1 함수에 대한 호출인 다음 줄로 이동합니다. 한 단계씩 코드 실행을 다시 선택합니다. 디버거가 example1 함수의 첫 번째 코드 줄로 이동합니다. 강조 표시된 줄은 실행되지 않았지만 함수가 호출 스택에 로드되었으며 로컬 변수에 대한 메모리가 할당되었습니다.

4. 코드 줄을 한 단계씩 실행하면 디버거가 다음 작업 중 하나를 수행합니다.

   • 다음 문이 솔루션의 함수에 대한 호출이 아닌 경우 디버거는 문을 실행하고 다음 문으로 이동한 다음 실행을 일시 중단합니다.

   • 문이 솔루션의 함수에 대한 호출인 경우 디버거는 호출된 함수의 첫 번째 줄로 이동한 다음 실행을 일시 중단합니다.

   종료 지점에 도달할 때까지 계속해서 example1의 문을 한 단계씩 실행합니다. 함수의 닫는 중괄호가 강조 표시됩니다.

5. 데이터 팁의 변수 값을 확인합니다. 종료 지점에 도달할 때까지 계속해서 example1의 문을 한 단계씩 실행합니다. 함수의 닫는 중괄호가 강조 표시됩니다. 변수 이름에서 마우스를 멈추면 변수의 이름과 값이 데이터 팁에 표시됩니다.

   

6. callTrack 변수에 대한 조사식을 추가합니다. callTrack 변수는 이 퀵 스타트 전체적으로 예제에서 호출되는 함수를 표시하는 데 사용됩니다. 변수를 조사식 창에 추가하면 변수 값을 쉽게 볼 수 있습니다. 편집기에서 변수 이름을 선택한 다음 바로 가기 메뉴에서 조사식 추가를 선택합니다.

   

   조사식 창에서 여러 변수를 조사할 수 있습니다. 데이터 팁 창의 값과 마찬가지로 조사 변수 값은 실행이 일시 중단될 때마다 업데이트됩니다. 조사된 변수는 디버그 세션에서 저장됩니다.

7. 디버깅을 중지합니다. 디버그 메뉴에서 디버깅 중지(키보드: Shift+F5)를 선택합니다. 그러면 디버그 세션이 끝납니다.

한 단계씩 함수 실행, 함수 건너뛰기 및 함수에서 나가기

부모 함수에서 호출하는 함수를 한 단계씩 실행하는 것과 달리 함수를 건너뛰면 자식 함수가 실행된 다음 부모가 다시 시작될 때 호출 함수에서 실행이 일시 중단됩니다. 함수의 작동 방식을 잘 알고 있고 함수 실행이 조사 중인 문제에 영향을 주지 않는 것이 확실한 경우 함수를 건너뛸 수 있습니다.

함수 호출이 포함되어 있지 않은 코드 줄을 건너뛰면 코드 줄은 코드 줄을 한 단계씩 실행하는 것과 마찬가지로 실행됩니다.

자식 함수에서 나가면 함수의 실행이 계속된 다음 함수가 호출 함수로 돌아간 후 실행이 일시 중단됩니다. 함수의 나머지 부분이 중요하지 않다고 판단되면 긴 함수에서 나가도 됩니다.

함수를 건너뛰는 작업과 함수에서 나가는 작업 모두 함수를 실행합니다.

예제 2

이 예제에서는 함수를 한 단계씩 실행하고 함수를 건너뛰고 함수에서 나갑니다.

1. 모듈 함수에서 example2 함수를 호출합니다. module 함수를 편집하고 var callTrack = "module function" 다음에 오는 줄을 example2();로 바꿉니다.

   

2. 중단점까지 실행합니다. 디버그 메뉴에서 디버깅 시작(키보드: F5)을 선택하여 디버그 세션을 시작합니다. 디버거가 중단점에서 실행을 일시 중단합니다.

3. 코드 줄을 건너뜁니다. 디버그 메뉴에서 프로시저 단위 실행(키보드: F10)을 선택합니다. 디버거가 문을 한 단계씩 실행하는 것과 동일한 방식으로 var callTrack = "module function" 문을 실행합니다.

4. example2 및 example2_a를 한 단계씩 실행합니다. F11 키를 선택하여 example2 함수를 한 단계씩 실행합니다. var x = example2_a(); 줄에 도달할 때까지 계속해서 example2 문을 한 단계씩 실행합니다. 마찬가지로 이 줄을 한 단계씩 실행하여 example2_a의 진입점으로 이동합니다. example2로 돌아갈 때까지 계속해서 example2_a의 각 문을 한 단계씩 실행합니다.

   

5. 함수를 건너뜁니다. example2에서 다음 줄인 var y = example2_a();는 기본적으로 앞의 줄과 동일합니다. 이 줄을 안전하게 건너뛸 수 있습니다. F10 키를 선택하여 example2의 다시 시작에서 example2_a에 대한 이 두 번째 호출로 이동합니다. callTrack 문자열은 example2_a 함수가 두 번 실행되었음을 나타냅니다.

6. 함수에서 나갑니다. F11 키를 선택하여 example2_b 함수를 한 단계씩 실행합니다. example2_b는 example2_a와 크게 다르지 않습니다. 함수에서 나가려면 디버그 메뉴에서 프로시저 나가기(키보드: Shift+F11)를 선택합니다. callTrack 변수는 example2_b가 실행되었고 example2가 다시 시작되는 지점으로 디버거가 돌아갔음을 나타냅니다.

7. 디버깅을 중지합니다. 디버그 메뉴에서 디버깅 중지(키보드: Shift+F5)를 선택합니다. 그러면 디버그 세션이 끝납니다.

조건부 중단점 설정, 커서까지 실행 및 변수 시각화

조건부 중단점은 디버거가 실행을 일시 중단하게 하는 조건을 지정합니다. 조건은 true 또는 false로 확인될 수 있는 코드 식에 의해 지정됩니다. 예를 들어 조건부 중단점을 사용하여 주로 변수가 특정 값에 도달할 경우에만 호출되는 함수에서 프로그램 상태를 검사할 수 있습니다.

커서까지 실행하는 것은 일회용 중단점을 설정하는 것과 비슷합니다. 실행이 일시 중단되면 소스에서 줄을 선택하고 선택한 줄에 도달할 때까지 실행을 다시 시작할 수 있습니다. 예를 들어 함수의 루프를 단계별로 실행하고 루프의 코드가 올바르게 수행되고 있는지 확인할 수 있습니다. 루프의 모든 반복을 단계별로 실행하는 대신 루프가 실행된 후 배치되는 커서까지 실행할 수 있습니다.

데이터 팁 행 또는 다른 변수 창에서 변수 값을 보기 힘들 때도 있습니다. 디버거는 스크롤 가능한 창에서 값의 서식이 지정된 보기를 제공하는 텍스트 시각화 도우미에 문자열, HTML 및 Xml을 표시할 수 있습니다.

예제 3

이 예제에서는 루프의 특정 반복에서 중단되도록 조건부 중단점을 설정한 다음 루프 다음에 배치되는 커서까지 실행합니다. 텍스트 시각화 도우미에서 변수 값을 볼 수도 있습니다.

1. 모듈 함수에서 example3 함수를 호출합니다. module 함수를 편집하고 var callTrack = "module function"; 다음에 오는 줄을 example3(); 줄로 바꿉니다.

   

2. 중단점까지 실행합니다. 디버그 메뉴에서 디버깅 시작(키보드: F5)을 선택하여 디버그 세션을 시작합니다. 디버거가 module 함수의 중단점에서 실행을 일시 중단합니다.

3. example3 함수를 한 단계씩 실행합니다. 디버그 메뉴에서 한 단계씩 코드 실행(키보드: F11)을 선택하여 example3 함수의 진입점으로 이동합니다. for 블록의 루프를 하나 이상 반복할 때까지 계속해서 함수를 한 단계씩 실행합니다. 1000개의 반복을 모두 단계별로 실행하려면 시간이 오래 걸립니다.

4. 조건부 중단점을 설정합니다. 코드 창의 왼쪽 여백에서 s += i.toString() + "\n"; 줄을 마우스 오른쪽 단추로 클릭한 다음 바로 가기 메뉴에서 조건을 선택합니다.

   조건 확인란을 선택한 다음 텍스트 상자에 i == 500;을 입력합니다. 참인 경우 옵션을 선택하고 확인을 선택합니다. 중단점을 사용하면 for 루프의 500번째 반복에서 값을 확인할 수 있습니다. 흰색 십자 모양으로 조건부 중단점 아이콘을 식별할 수 있습니다.

   

5. 중단점까지 실행합니다. 디버그 메뉴에서 계속(키보드: F5)을 선택합니다. 마우스로 i를 가리켜 현재 i 값이 500인지 확인합니다. 변수 s는 한 줄로 표시되며 데이터 팁 창 길이보다 훨씬 더 깁니다.

6. 문자열 변수를 시각화합니다. s의 데이터 팁에서 돋보기 모양 아이콘을 클릭합니다.

   텍스트 시각화 도우미 창이 나타나고 문자열 값이 여러 줄 문자열로 표시됩니다.

   

7. 커서까지 실행합니다. callTrack += "->example3"; 줄을 선택한 다음 바로 가기 메뉴에서 커서까지 실행(키보드: Ctrl+F10)을 선택합니다. 디버거가 루프 반복을 완료한 다음 해당 줄에서 실행을 일시 중단합니다.

8. 디버깅을 중지합니다. 디버그 메뉴에서 디버깅 중지(키보드: Shift+F5)를 선택합니다. 그러면 디버그 세션이 끝납니다.

커서까지 실행을 사용하여 코드로 돌아간 다음 중단점 삭제

Microsoft 또는 타사에서 라이브러리 코드를 한 단계씩 실행한 경우 커서까지 실행하는 작업이 매우 유용할 수 있습니다. 라이브러리 코드를 단계별로 실행하여 자세한 정보를 제공할 수 있지만 시간이 오래 걸릴 수 있습니다. 그리고 일반적으로 사용자 고유의 코드에 더 관심을 두게 됩니다. 이 연습에서는 커서까지 실행하는 방법을 보여 줍니다.

1. app.start call에 중단점을 설정합니다. module 함수에서 app.start() 줄에 중단점을 설정합니다.

2. 중단점까지 실행하고 라이브러리 함수를 한 단계씩 실행합니다.

   app.start()를 한 단계씩 실행하면 편집기에 base.js의 코드가 표시됩니다. 몇 개의 줄을 더 한 단계씩 실행합니다.

3. 함수 건너뛰기 및 함수에서 나가기 base.js의 코드를 건너뛰고(F10) 해당 코드에서 나갈 때(Shift+F11) 시작 함수의 복잡성과 길이를 검사하는 것이 원하는 작업이 아니라는 결론을 내릴 수 있습니다.

4. 코드에 대한 커서를 설정하고 해당 커서까지 실행합니다. 코드 편집기에서 default.js 파일로 다시 전환합니다. app.start() 다음의 첫 번째 코드 줄을 선택합니다. 주석 또는 빈 줄까지 실행할 수는 없습니다. 바로 가기 메뉴에서 커서까지 실행을 선택합니다. 계속해서 app.start 함수가 실행되고 중단점에서 실행이 일시 중단됩니다.

로컬 창에서 변수 데이터 보기

로컬 창은 현재 실행 중인 함수의 범위 체인에 있는 매개 변수 및 변수의 트리 뷰입니다.

개체의 변수 데이터 및 속성 체인 보기

1. 모듈 함수에 배열 개체를 추가합니다. module 함수를 편집하고 var callTrack = "module function" 다음에 오는 줄을 var myArray = new Array(1, 2, 3);로 바꿉니다.

   

2. 중단점까지 실행합니다. 디버그 메뉴에서 디버깅 시작(키보드: F5)을 선택하여 디버그 세션을 시작합니다. 디버거가 중단점에서 실행을 일시 중단합니다. 줄을 한 단계씩 실행합니다.

3. 지역 창을 엽니다. 디버그 메뉴에서 창을 가리킨 다음 지역(키보드: Alt+4)을 (키보드: Alt+4)

4. 모듈 함수에서 로컬 변수를 검사합니다. 지역 창에는 현재 실행 중인 함수(module 함수)가 트리의 최상위 노드로 표시됩니다. 함수를 입력하면 JavaScript가 모든 변수를 만들고 해당 변수에 undefined 값을 제공합니다. 함수에 정의된 함수는 각각 텍스트 값을 가집니다.

   

5. callTrack 및 myArray 정의를 단계별로 실행합니다. 지역 창에서 callTrack 및 myArray 변수를 찾습니다. 두 개의 정의를 건너뛰고(F10) 값 및 형식 필드가 변경되었는지 확인합니다. 지역 창에서 마지막으로 중단된 이후에 변경된 변수 값이 강조 표시됩니다.

6. myArray 개체를 검사합니다. myArray 변수를 확장합니다. 배열의 각 요소에 Array 개체의 상속 계층 구조가 포함된 [prototype] 노드가 나열됩니다. 이 노드를 확장합니다.

   

   • 메서드 노드에는 Array 개체의 모든 메서드가 나열됩니다.

   • [prototype] 노드에는 Array가 파생되는 Object 개체의 프로토타입이 포함되어 있습니다. [prototype] 노드는 재귀적일 수 있습니다. 개체 계층 구조의 각 부모 개체는 해당 자식의 [prototype] 노드에서 설명합니다.

7. 디버깅을 중지합니다. 디버그 메뉴에서 디버깅 중지(키보드: Shift+F5)를 선택합니다. 그러면 디버그 세션이 끝납니다.

범위 체인 데이터 검사

함수의 범위 체인에는 함수에서 접근할 수 있고 활성인 모든 변수가 포함됩니다. 전역 변수는 현재 실행 중인 함수를 정의하는 함수에 정의된 개체(함수 포함)와 마찬가지로 범위 체인의 일부입니다. 예를 들어 default.js의 module 함수에 정의된 callTrack 변수는 module 함수에 정의된 함수에서 접근할 수 있습니다. 각 범위는 전역 창에 별도로 나열됩니다.

• 현재 실행 중인 함수의 변수는 이 창의 맨 위에 나열됩니다.

• 범위 체인에 있는 각 함수 범위의 변수는 함수의 [Scope] 노드 아래에 나열됩니다. 범위 함수는 현재 함수를 정의하는 함수에서 체인의 최상위 함수까지 체인에서의 순서대로 나열됩니다.

• [Globals] 노드에는 함수 외부에서 정의된 전역 개체가 나열됩니다.

범위 체인은 혼동될 수 있으며 예제를 통해 가장 잘 보여 줄 수 있습니다. 다음 예제에서는 module 함수가 해당 함수 고유의 범위를 만드는 방법과 클로저를 만들어 다른 수준의 범위를 만드는 방법을 알 수 있습니다.

예제 4

1. 모듈 함수에서 example4 함수를 호출합니다. module 함수를 편집하고 var callTrack = "module function" 다음에 오는 줄을 example4()로 바꿉니다.

   

2. 중단점까지 실행합니다. 디버그 메뉴에서 디버깅 시작(키보드: F5)을 선택하여 디버그 세션을 시작합니다. 디버거가 중단점에서 실행을 일시 중단합니다.

3. 지역 창을 엽니다. 필요한 경우 디버그 메뉴에서 창을 가리킨 다음 지역(키보드: Alt+4)을 선택합니다. 창에 module 함수의 모든 변수와 함수가 나열되고 [Globals] 노드도 포함됩니다.

4. 전역 변수를 검사합니다. [Globals] 노드를 확장합니다. Global에 있는 개체와 변수는 JavaScript용 Windows 라이브러리를 통해 설정되었습니다. 전역 범위에 사용자 고유의 변수를 추가할 수 있습니다.

5. example4를 한 단계씩 실행하고 example4의 로컬 및 범위 변수를 검사합니다. example4 함수를 한 단계씩 실행합니다(키보드: F11). example4가 module 함수에서 정의되기 때문에 module 함수는 부모 범위가 됩니다. example4는 module 함수에서 어떠한 함수든 호출하고 변수에 액세스할 수 있습니다. 지역 창에서 [Scope] 노드를 확장하면 해당 노드에 module 함수의 동일한 변수가 포함되어 있음을 알 수 있습니다.

   

6. example4_a를 한 단계씩 실행하고 example4_a의 로컬 변수와 범위 변수를 검사합니다. 계속해서 example4를 한 단계씩 실행하고 example4_a에 대한 호출을 한 단계씩 실행합니다. 이제 로컬 변수는 example4_a에 있으며 [Scope] 노드는 계속해서 module 함수의 변수를 보유하고 있습니다. example4의 변수가 활성 변수이지만 example4_a에서 이 변수에 접근할 수 없으며 이 변수는 더 이상 범위 체인의 일부가 아닙니다.

7. multipyByA를 한 단계씩 실행하고 multipyByA의 로컬 변수와 범위 변수를 검사합니다. example4_a의 나머지 부분을 단계별로 실행하고 var x = multilpyByA(b); 줄을 한 단계씩 실행합니다.

   함수 변수 multipyByA는 클로저인 multiplyClosure 함수로 설정되었습니다. multipyClosure는 내부 함수인 mulitplyXby를 정의하고 반환하며, 이 함수의 매개 변수 및 변수를 캡처(닫기)합니다. 클로저에서 반환된 내부 함수는 외부 함수의 데이터에 액세스할 수 있으므로 고유 수준의 범위를 만듭니다.

   var x = multilpyByA(b);를 한 단계씩 실행하면 mulitplyXby 내부 함수의 return a * b; 줄로 이동합니다.

8. 지역 창에서는 매개 변수 b만 multiplyXby의 지역 변수로 나열되지만 새 [Scope] 수준이 추가되었습니다. 이 노드를 확장하면 multiplyXby의 첫 번째 줄에서 호출된 변수 a를 비롯하여 multiplyClosure의 매개 변수, 함수 및 변수가 포함되어 있는 것을 알 수 있습니다. 두 번째 [Scope] 노드를 보면 다음 줄에 대한 multiplyXby 액세스인 모듈 함수 변수가 표시되어 있음을 알 수 있습니다.

   

9. 디버깅을 중지합니다. 디버그 메뉴에서 디버깅 중지(키보드: Shift+F5)를 선택합니다. 그러면 디버그 세션이 끝납니다.

호출 스택 창을 사용하여 코드 탐색

호출 스택은 현재 응용 프로그램 스레드에서 실행 중인 함수에 대한 정보를 포함하는 데이터 구조입니다. 중단점이 적중되면 호출 스택 창에 스택에서 활성 상태인 모든 함수의 목록이 표시됩니다. 현재 실행 중인 함수는 호출 스택 창 목록의 맨 위에 있습니다. 스레드를 시작하는 함수는 목록의 맨 아래에 있습니다. 그 사이의 함수는 시작 함수에서 현재 함수로의 호출 경로를 보여 줍니다.

호출 스택 창을 사용하면 현재 실행 중인 함수에 대한 호출 경로를 볼 수 있을 뿐 아니라 코드 편집기에서 코드를 탐색할 수도 있습니다. 이 기능은 여러 파일을 사용하는 경우 특정 함수로 빠르게 이동하려고 할 때 유용할 수 있습니다.

예제 5

이 예제에서는 다섯 개의 사용자 정의 함수가 포함되어 있는 호출 경로를 한 단계씩 실행합니다.

1. 모듈 함수에서 example5 함수를 호출합니다. module 함수를 편집하고 var callTrack = "module function"; 다음에 오는 줄을 example5(); 줄로 바꿉니다.

   

2. 중단점까지 실행합니다. 디버그 메뉴에서 디버깅 시작(키보드: F5)을 선택하여 디버그 세션을 시작합니다. 디버거가 모듈 함수의 중단점에서 실행을 일시 중단합니다.

3. 호출 스택 창을 엽니다. 디버그 메뉴에서 창을 선택한 다음 호출 스택(키보드: Alt+7)을 선택합니다. 호출 스택 창에 다음과 같은 두 가지 함수가 표시됩니다.

   • 전역 코드는 호출 스택의 맨 아래에 있는 module 함수의 진입점입니다.

   • 익명 함수는 실행이 일시 중단되는 module 함수의 줄을 보여 줍니다. 이 함수는 호출 스택의 맨 위에 있습니다.

4. example5_d 함수에 접근할 함수를 한 단계씩 실행합니다. 디버그 메뉴에서 한 단계씩 코드 실행(키보드: F11)을 선택하여 example5_d 함수의 진입점에 접근할 때까지 호출 경로의 호출을 실행합니다. 함수가 함수를 호출할 때마다 호출 함수의 줄 번호가 저장되고 호출된 함수가 스택의 맨 위에 배치됩니다. 호출 함수의 줄 번호는 호출 함수가 실행을 일시 중단한 지점입니다. 노란색 화살표는 현재 실행 중인 함수를 가리킵니다.

   

5. 호출 스택 창을 사용하여 example5_a 코드를 탐색하고 중단점을 설정합니다. 호출 스택 창에서 example5_a 목록 항목을 선택한 다음 바로 가기 메뉴에서 소스로 이동을 선택합니다. 코드 편집기가 함수의 반환 줄에 커서를 설정합니다. 이 줄에서 중단점을 설정합니다. 현재 실행 줄은 변경되지 않았습니다. 편집기 커서만 이동되었습니다.

6. 함수를 한 단계씩 실행한 다음 중단점까지 실행합니다. 계속해서 example5_d를 한 단계씩 실행합니다. 함수에서 반환할 때 함수는 호출 스택에서 제외됩니다. F5 키를 눌러 프로그램 실행을 계속합니다. 이전 단계에서 만든 중단점에서 중지합니다.

7. 디버깅을 중지합니다. 디버그 메뉴에서 디버깅 중지(키보드: Shift+F5)를 선택합니다. 그러면 디버그 세션이 끝납니다.

참고 항목

개념

디버깅 세션을 시작하는 방법(JavaScript)

퀵 스타트: 디버거 탐색(JavaScript)

빠른 시작: 앱 디버깅(JavaScript)

Windows 스토어 앱에서 일시 중단, 다시 시작 및 백그라운드 이벤트를 트리거하는 방법

Windows 스토어 앱 디버깅