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

아티클
02/24/2013

Visual Studio에서는 Internet Explorer 및 Visual Studio 개발자에게 익숙한 기능이 포함된 JavaScript로 작성된 Windows용 Windows 스토어 응용 프로그램을 위한 포괄적인 디버깅 환경을 제공합니다.이 항목에서는 이러한 기능을 사용하는 방법을 보여 주는 자습서와 함께 이러한 응용 프로그램과 관련된 디버깅 기능에 대한 개요를 제공합니다.

디버깅할 때 대화형 디버깅 모델을 사용할 수 있으므로 렌더링된 HTML, CSS 및 JavaScript 코드를 보고 해당 코드와 상호 작용하여 문제를 해결할 수 있습니다.더 일반적인 Visual Studio 디버깅 모델을 사용하여 중단점을 설정하거나 코드를 단계별로 실행하는 등의 중요한 작업을 수행할 수 있습니다.또는 이러한 두 모델을 조합하여 사용할 수도 있습니다.

다음 표에서는 JavaScript로 작성된 Windows 스토어 응용 프로그램에 사용할 수 있는 디버깅 기능을 보여 주고 추가 정보에 대한 링크를 제공합니다.

DOM 탐색기	DOM 탐색기에서는 셸에서 원래 소스 코드가 아닌 페이지를 해석하는 방식을 나타내는 뷰를 제공합니다.이 탐색기를 사용하여 현재 선택된 요소의 스타일, 레이아웃 및 특성에 대한 동적 정보에 액세스할 수 있습니다.스타일, 레이아웃 및 특성을 변경할 수 있으며 변경 결과를 바로 확인할 수 있습니다. 자세한 내용은 다음을 참조하십시오. DOM 탐색기를 사용하여 대화형 디버깅 CSS 규칙을 검사하는 방법 레이아웃을 보고 편집하는 방법 이벤트 수신기를 보는 방법
JavaScript 콘솔 창	JavaScript 콘솔 창에서는 콘솔에 메시지를 보내고 로컬 변수 및 전역 변수 값을 보고 JavaScript 코드를 실행하여 렌더링된 응용 프로그램과 상호 작용할 수 있습니다.콘솔에서는 DOM(문서 개체 모델) 및 Windows Runtime 예외뿐 아니라 JavaScript 오류 및 예외도 보고합니다. 자세한 내용은 다음을 참조하십시오. JavaScript 콘솔 창을 사용한 대화형 디버깅 JavaScript 콘솔 창의 한 줄 모드 및 여러 줄 모드 JavaScript 콘솔 명령
새로 고침	새로 고침을 사용하면 디버거를 중지하여 다시 시작하지 않고 소스 코드를 편집한 다음 페이지를 다시 로드할 수 있습니다.자세한 내용은 앱을 새로 고치는 방법을 참조하십시오.
요소 선택	DOM 탐색기에서는 시뮬레이터 또는 호스트 컴퓨터에서 실행 중인 응용 프로그램의 영역을 클릭하여 DOM 요소를 선택할 수 있습니다.자세한 내용은 요소 선택을 참조하십시오.
디버깅 세션	디버깅 세션과 응용 프로그램 배포를 시작하는 방법에 대한 자세한 내용은 다음을 참조하십시오. 디버깅 세션을 시작하는 방법(JavaScript) Visual Studio에서 Windows 스토어 앱 실행
중단점, 단계별로 코드 실행	Visual Studio 디버거를 사용하면 F5(디버깅 시작 또는 계속) 및 F11(한 단계씩 코드 실행)과 같은 명령을 사용하여 중단점을 설정하고 코드를 단계별로 실행할 수 있습니다.코드를 단계별로 실행할 때 JavaScript 콘솔 창에서 현재 상태를 기반으로 응용 프로그램과 상호 작용할 수 있습니다.자세한 내용은 다음을 참조하십시오. 퀵 스타트: 디버거 탐색(JavaScript) 대화형 디버깅 및 중단 모드
프로파일러	응용 프로그램에서 성능 문제를 찾는 방법은 Windows 스토어 앱의 성능 분석을 참조하십시오.
JavaScript 메모리 분석기	응용 프로그램에서 메모리 누수를 찾는 방법은 Windows 스토어 앱에서 메모리 사용 분석(JavaScript)을 참조하십시오.

이 항목에서는 첫째 예외 사용 및 Windows 런타임 구성 요소를 사용하는 응용 프로그램 디버깅과 같은 JavaScript 디버깅 작업에 대한 자세한 내용도 제공합니다.

DOM 탐색기를 사용하여 대화형 디버깅

DOM 탐색기는 렌더링된 페이지의 뷰를 보여 주고, DOM 탐색기를 사용하여 값을 변경하고 변경 결과를 바로 확인할 수 있습니다.따라서 디버거를 중지하여 다시 시작하지 않고 대화형 프로세스를 사용하여 변경 내용을 테스트할 수 있습니다.이 방법을 사용하여 페이지와 상호 작용할 때 프로젝트의 소스 코드는 변경되지 않으므로 원하는 코드 수정 내용을 찾으면 디버거를 중지하고 소스 코드를 변경해야 합니다.

팁

디버거를 중지하지 않으려는 경우 소스 코드를 변경한 다음 디버그 도구 모음에서 Windows 응용 프로그램 새로 고침 단추를 사용하여 응용 프로그램을 새로 고치면 됩니다.자세한 내용은 앱을 새로 고치는 방법을 참조하십시오.

DOM 탐색기를 사용하면 다음 작업을 수행할 수 있습니다.

렌더링된 HTML, CSS 및 JavaScript 코드를 검사하고 DOM 요소 하위 트리를 탐색합니다.
렌더링된 요소에 대한 특성을 동적으로 변경합니다.
페이지에 대한 CSS 스타일의 응용 프로그램을 검사하고 동적으로 변경합니다.

응용 프로그램을 디버깅할 때 주로 DOM 탐색기에서 요소를 선택해야 합니다.요소를 선택하면 오른쪽 탭에 나타나는 값이 DOM 탐색기에서 선택된 요소를 반영하도록 자동으로 업데이트됩니다.이러한 탭으로는 스타일, 스타일 추적, 레이아웃, 특성 및 이벤트 탭이 있습니다.요소를 선택하는 방법에 대한 자세한 내용은 요소 선택을 참조하십시오.

팁

DOM 탐색기 창이 닫혀 있는 경우 디버그 > 창 > DOM 탐색기를 클릭하여 다시 엽니다.창은 스크립트 디버깅 세션 중에만 나타납니다.

이후에 나오는 절차에서 DOM 탐색기를 사용하여 응용 프로그램을 대화형으로 디버깅하는 과정을 살펴봅니다.이때 FlipView 컨트롤을 사용하는 응용 프로그램을 만든 다음 디버깅합니다.응용 프로그램 코드에는 여러 개의 오류가 포함되어 있습니다.

DOM 탐색기에서 대화형 디버깅을 사용하려면

파일 > 새 프로젝트를 클릭하여 Visual Studio에서 새 솔루션을 만듭니다.
새 응용 프로그램이라는 JavaScript 템플릿을 선택하고 FlipViewApp와 같은 프로젝트의 이름을 입력합니다.

default.html의 BODY 요소에 이 코드를 추가합니다.

    <div id="flipTemplate" data-win-control="WinJS.Binding.Template" 
             style="display:none">
        <div class="fixedItem" >
            <img src="#" data-win-bind="src: flipImg" />
        </div>
    </div>
    <div id="fView" style="width:100px;height:100px;background-color:#0094ff" 
        data-win-control="WinJS.UI.FlipView"
            data-win-options="{ itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
    </div>

default.js의 코드를 다음 코드로 바꿉니다.

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    var myData = [];
    for (var x = 0; x < 4; x++) {
        myData[x] = { flipImg: "/images/logo.png" }
    };

    var pages = new WinJS.Binding.List(myData, { proxy: true });

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !==
            activation.ApplicationExecutionState.terminated) {
                // TODO: . . .
            } else {
                // TODO: . . .
            }
            args.setPromise(WinJS.UI.processAll());

            updateImages();
        }
    };

    function updateImages() {

        pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
        pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
        pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
    };

    app.oncheckpoint = function (args) {
    };

    app.start();

    var publicMembers = {
        items: pages
    };

    WinJS.Namespace.define("Data", publicMembers);

})();

참고

위의 JavaScript 코드는 익명 익명 함수에 캡슐화됩니다.이 캡슐화는 프로젝트 템플릿에 사용되는 일반적인 프로그래밍 모델을 따릅니다.이런 식으로 코드를 래핑하면 WinJS.Namespace.define 함수를 사용하여 응용 프로그램의 다른 위치에서 코드 요소에 액세스할 수 있습니다.

디버그 도구 모음의 디버깅 시작 단추 옆에 있는 드롭다운 목록에서 시뮬레이터를 선택합니다.
디버그 > 디버깅 시작을 클릭하거나 F5 키를 눌러 디버그 모드에서 응용 프로그램을 실행합니다.

그러면 시뮬레이터에서 응용 프로그램이 실행되지만 코드에 몇 가지 버그가 있으므로 대부분 빈 화면이 표시됩니다.왼쪽 위에 있는 기본 이미지는 임의의 항목이 로드되었음을 나타냅니다.화면의 해당 영역을 클릭하면 컨트롤이 인스턴스화되었음을 나타내는 FlipView 화살표가 표시되지만 컨트롤의 크기가 올바르지 않습니다.

팁

Alt+Tab 또는 F12 키를 눌러 Visual Studio와 실행 중인 응용 프로그램 간에 전환할 수 있습니다.로컬 컴퓨터 대신 시뮬레이터에서 응용 프로그램을 실행하고 있는 경우에는 Windows 작업 표시줄에서 Visual Studio 및 시뮬레이터 단추를 클릭하여 창 간에 전환할 수 있습니다.
Visual Studio에서 DOM 탐색기 탭을 클릭합니다.
DOM 탐색기 창에서 "fView"의 ID가 있는 섹션에 대한 DIV 요소를 선택합니다.

팁

>> 입력 프롬프트에서 select(fView)를 입력한 다음 Enter 키를 눌러 JavaScript 콘솔 창의 왼쪽 아래 모퉁이에서 DIV 요소를 선택할 수도 있습니다.

DOM 탐색기에서 너비 및 높이가 올바르지 않은 픽셀 값으로 설정되었습니다.

DOM 탐색기 창의 오른쪽 탭에 나타나는 값이 DOM 탐색기의 현재 요소를 반영하도록 자동으로 업데이트됩니다.
특성 탭에서 style 특성을 두 번 클릭합니다.높이와 너비 둘 다를 100%로 설정되도록 편집합니다.Enter키를 누르면 디버깅 세션을 중지하지 않았더라도 새 값이 시뮬레이터에 바로 반영됩니다.

중요

특성 값을 업데이트할 수 있듯이 스타일, 스타일 추적 및 레이아웃 탭에 나타나는 값도 업데이트할 수 있습니다.자세한 내용은 CSS 규칙을 검사하는 방법 및 레이아웃을 보고 편집하는 방법을 참조하십시오.

이제 FlipView 컨트롤의 크기가 올바르게 조정되었습니다.또한 이 컨트롤이 올바르게 작동하지만 예상 이미지가 아닌 기본 이미지 및 누락된 이미지가 표시되거나 예상 이미지와 누락된 이미지가 섞여 표시됩니다.

JavaScript 코드에 이러한 문제를 발생시키는 버그가 있습니다.다음 단원에서는 JavaScript 콘솔 창을 사용하여 이 버그를 수정하는 방법을 살펴봅니다.디버깅을 계속하려면 JavaScript 콘솔 창을 사용한 대화형 디버깅을 참조하십시오.

새로 고침 기능을 사용하면 HTML, CSS 및 JavaScript 코드를 수정한 후 디버거를 중지하여 다시 시작하지 않고 바로 페이지를 다시 로드할 수 있습니다.새로 고침 기능에 대한 자세한 내용은 앱을 새로 고치는 방법을 참조하십시오.

디버깅하는 동안 응용 프로그램을 새로 고치려면

응용 프로그램이 실행 중인 동안 Visual Studio로 전환합니다.
default.html을 열고 "fView" DIV 요소의 높이와 너비를 100%로 변경하여 소스 코드를 수정합니다.
디버그 도구 모음에서 Windows 응용 프로그램 새로 고침 단추를 클릭하거나 F4 키를 누릅니다.단추는 과 같습니다.

응용 프로그램 페이지가 다시 로드되고 시뮬레이터가 전경으로 돌아갑니다.

이전과 마찬가지로 이미지는 아직 올바르게 표시되지 않습니다.다음 단원에서 이 응용 프로그램을 계속 디버깅할 수 있습니다.

JavaScript 콘솔 창을 사용한 대화형 디버깅

JavaScript 콘솔 창에서 JavaScript 코드를 실행하고 업데이트할 수 있습니다.DOM 탐색기와 마찬가지로 JavaScript 콘솔 창을 사용하면 디버거를 중지하여 다시 시작하지 않고 변경 내용을 테스트할 수 있으므로 렌더링된 페이지에서 변경 결과를 바로 확인할 수 있습니다.원하는 변경 내용을 발견하면 디버거를 중지하고 소스 코드를 수정합니다.

JavaScript 콘솔 창을 사용하여 다음과 같은 작업을 수행할 수 있습니다.

한 줄 또는 여러 줄 모드에서 스크립트를 실행합니다.
정보 메시지와 오류 메시지를 봅니다.
화면을 지우는 등의 다른 작업을 수행합니다.전체 명령 목록을 보려면 JavaScript 콘솔 명령을 참조하십시오.

팁

JavaScript 콘솔 창이 닫혀 있는 경우 디버그 > 창 > JavaScript 콘솔을 클릭하여 다시 엽니다.창은 스크립트 디버깅 세션 중에만 나타납니다.

이 절차에서는 DOM 탐색기를 사용하여 대화형 디버깅 단원에서 디버깅을 시작한 FlipView 응용 프로그램의 디버깅을 계속합니다.FlipView 컨트롤이 올바르게 작동하지만 예상 이미지가 표시되지 않는다는 사실을 이미 확인했습니다.

FlipView 응용 프로그램에서 JavaScript 코드를 디버깅하려면

시뮬레이터에서 FlipView 응용 프로그램이 실행되고 있는 상태에서 JavaScript 콘솔 창의 입력 프롬프트에서 Data.items를 입력하고 Enter 키를 누릅니다.

콘솔 창에 items 개체에 대한 시각화 도우미가 나타납니다.이는 items 개체가 인스턴스화되었으며 스크립트 컨텍스트에서 사용할 수 있음을 나타냅니다.콘솔 창에서 개체 노드를 클릭하여 속성 값을 볼 수 있습니다(또는 화살표 키를 사용함).다음 그림에서와 같이 items._data 개체를 클릭하면 예상대로 해당 개체의 이미지 소스 참조가 올바르지 않음을 알 수 있습니다.아직 개체에 기본 이미지가 있고 누락된 이미지가 예상 이미지와 섞여 있습니다.
프롬프트에서 Data.items.push를 입력하고 Enter 키를 누릅니다.콘솔 창에 JavaScript용 Windows 라이브러리(WinJS) 프로젝트 파일의 push에 대한 함수 구현이 표시됩니다.IntelliSense를 사용하여 간략하게 조사해 보면 setAt을 사용하여 기본 이미지를 바꿔야 한다는 사실을 알 수 있습니다.
디버깅 세션을 중지하지 않고 이 문제를 대화형으로 수정하려면 default.js를 열고 updateImages 함수에서 다음 코드를 선택합니다.
```
pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
```
이 코드를 복사하여 JavaScript 콘솔 입력 프롬프트에 붙여 넣습니다.

팁

JavaScript 콘솔 입력 프롬프트에 여러 줄 코드를 붙여 넣으면 콘솔 입력 프롬프트가 자동으로 여러 줄 모드로 전환됩니다.Ctrl+Alt+M을 눌러 여러 줄 모드를 설정하거나 해제할 수 있습니다.여러 줄 모드에서 스크립트를 실행하려면 Ctrl+Enter를 누르거나 창의 오른쪽 아래 모퉁이에 있는 화살표 기호를 클릭합니다.

프롬프트에서 push 함수 호출을 수정하여 pages.push를 Data.items.setAt으로 바꾼 다음, 화살표 기호를 클릭하여 스크립트를 실행합니다.수정된 코드는 다음과 같이 나타납니다.

Data.items.setAt.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
Data.items.setAt.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
Data.items.setAt.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });

Ctrl+Alt+M을 눌러 콘솔 입력 프롬프트를 한 줄 모드로 전환한 다음 이전 입력을 제거할 수 있도록 Ctrl+A를 눌러 선택합니다.
프롬프트에서 Data.items.length = 3를 입력한 다음 Enter 키를 누릅니다.그러면 데이터에서 불필요한 요소가 제거됩니다.
시뮬레이터를 다시 확인해 보면 올바른 FlipView 페이지에 올바른 이미지가 있음을 알 수 있습니다.
DOM 탐색기에서 업데이트된 DIV 요소를 확인할 수 있으므로 하위 트리로 이동하여 예상 IMG 요소를 찾을 수 있습니다.
디버그 > 디버깅 중지를 클릭하거나 Shift+F5를 클릭하여 디버깅을 중지한 다음 소스 코드를 수정합니다.

수정된 샘플 코드가 들어 있는 전체 default.html 페이지를 보려면 앱 샘플 코드 디버깅(JavaScript)를 참조하십시오.

대화형 디버깅 및 중단 모드

JavaScript 콘솔 창과 같은 JavaScript 디버깅 도구를 사용하고 있는 동안 중단점을 사용하고 코드를 한 단계씩 실행할 수 있습니다.디버거에서 실행 중인 프로그램이 중단점에 도달하면 디버거가 일시적으로 프로그램의 실행을 중단합니다.실행이 일시 중단되면 프로그램은 실행 모드에서 중단 모드로 전환됩니다.언제든지 실행을 다시 시작할 수 있습니다.

프로그램이 중단 모드에 있는 경우 JavaScript 콘솔 창을 사용하여 현재 응용 프로그램 상태에서 유효한 스크립트 및 명령을 실행할 수 있습니다.이 절차에서는 이전 절차에서 중단 모드의 사용 방법을 보여 주기 위해 만든 FlipView 응용 프로그램을 사용합니다.

중단점을 설정하고 응용 프로그램을 디버깅하려면

이전에 만든 FlipView 응용 프로그램의 default.html 파일에서 updateImages() 함수를 마우스 오른쪽 단추로 클릭하고 중단점 > 중단점 삽입을 클릭합니다.
표준 도구 모음의 디버깅 시작 단추 옆에 있는 드롭다운 목록에서 로컬 컴퓨터를 선택합니다.
디버그 > 디버깅 시작을 클릭하거나 F5 키를 누릅니다.

실행이 updateImages() 함수에 도달하면 응용 프로그램이 중단 모드로 들어가며, 현재 프로그램 실행 줄은 노란색으로 강조 표시됩니다.

현재 디버깅 세션을 끝내지 않고 프로그램 상태에 바로 영향을 주도록 변수 값을 변경할 수 있습니다.
명령 프롬프트에서 updateImages를 입력하고 Enter 키를 누릅니다.콘솔 창에 함수 구현이 나타납니다.
함수의 한 줄을 프롬프트에 복사하고 인덱스 값을 3으로 변경합니다.
```
pages.setAt(3, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
```
Enter 키를 눌러 코드 줄을 실행합니다.

한 줄씩 코드를 단계별로 실행하는 경우 F11 또는 F5 키를 눌러 프로그램 실행을 계속합니다.
F5 키를 눌러 프로그램 실행을 계속합니다.FlipView 응용 프로그램이 나타나고 이제 네 페이지 모두에 기본 이미지가 아닌 이미지 중 하나가 표시됩니다.

다시 Visual Studio로 전환하려면 F12 또는 Alt+Tab을 누릅니다.

JavaScript 콘솔 창의 한 줄 모드 및 여러 줄 모드

JavaScript 콘솔 창의 입력 프롬프트는 한 줄 모드와 여러 줄 모드 모두를 지원합니다.이 항목의 대화형 디버깅 절차에서는 이 두 모드를 사용하는 예제를 제공합니다.Ctrl+Alt+M을 눌러 모드 간에 전환할 수 있습니다.

한 줄 모드는 입력 기록을 제공합니다.위쪽 화살표 및 아래쪽 화살표 키를 사용하여 입력 기록을 탐색할 수 있습니다.한 줄 모드에서는 스크립트를 실행하면 입력 프롬프트가 지워집니다.한 줄 모드에서 스크립트를 실행하려면 Enter 키를 누릅니다.

여러 줄 모드에서는 스크립트를 실행해도 입력 프롬프트가 지워지지 않습니다.여러 줄 모드에서 한 줄 모드로 전환하는 경우 Ctrl+A를 누른 다음 문자를 입력하여 입력 줄을 지울 수 있습니다.여러 줄 모드에서 스크립트를 실행하려면 Ctrl+Enter를 누르거나 창의 오른쪽 아래 모퉁이에 있는 화살표 기호를 클릭합니다.

요소 선택

응용 프로그램을 디버깅할 때와는 다른 세 가지 방법으로 DOM 요소를 선택할 수 있습니다.

DOM 탐색기 창에서 직접 요소를 클릭하거나 화살표 키 사용
요소 선택 단추 사용
JavaScript 콘솔 명령 중 하나인 select 명령 사용

DOM 탐색기 창을 사용하여 요소를 선택하고 요소에 마우스 포인터를 놓으면 해당 요소가 시뮬레이터 또는 장치에서 강조 표시됩니다.DOM 탐색기에서 요소를 클릭하여 선택해야 합니다. 또는 화살표 키를 사용하여 요소를 강조 표시하고 선택할 수 있습니다. 요소 선택 단추를 사용하여 DOM 탐색기에서 요소를 선택할 수도 있습니다.다음 그림에서는 요소 선택 단추를 보여 줍니다.

DOM 탐색기의 요소 선택 단추

요소 선택을 클릭하거나 Ctrl + B를 누르면 응용 프로그램 또는 시뮬레이터에서 항목을 클릭하여 DOM 탐색기에서 항목을 선택할 수 있도록 선택 모드가 변경됩니다.이 모드는 한 번 클릭 후에 다시 일반 선택 모드로 변경됩니다.요소 선택을 클릭하면 응용 프로그램은 전경으로 돌아가고 커서는 새 선택 모드를 반영하도록 변경됩니다.이 모드에서는 시뮬레이터 또는 장치에서 요소에 마우스 포인터를 놓을 때 컬러 윤곽선이 나타납니다.윤곽선이 그려진 요소를 클릭하면 지정된 요소가 선택된 상태로 DOM 탐색기가 전경으로 돌아갑니다.요소 선택 단추를 사용하여 요소를 선택하는 방법을 보여 주는 예제를 보려면 CSS 규칙을 검사하는 방법를 참조하십시오.

Windows 런타임 구성 요소를 사용하는 응용 프로그램 디버깅

C# 또는 Visual Basic WinMD 파일을 참조하거나 C++ Windows 런타임 구성 요소(WinMD 파일 및 DLL)가 포함된, JavaScript로 작성된 Windows 스토어 앱을 디버깅하는 경우 사용할 디버거를 지정할 수 있습니다.JavaScript와 관리 코드 또는 네이티브 코드를 동시에 디버깅할 수는 없습니다.

프로젝트의 디버깅 속성 페이지에서 실행할 디버거를 지정할 수 있습니다.자세한 내용은 디버깅 세션을 시작하는 방법(JavaScript)을 참조하십시오.

응용 프로그램 배포

JavaScript를 사용하여 Windows용으로 빌드된 Windows 스토어 앱에 대한 일부 디버깅 시나리오에서는 해당 앱을 Visual Studio에서 시작하지 않고 배포해야 할 수 있습니다.예를 들어 공유 콘텐츠를 받기 위한 응용 프로그램은 공유 UI에서 시작할 수 있으며 이 경우 콘텐츠를 공유하는 응용 프로그램에서 디버깅해야 합니다.공유 콘텐츠를 받는 응용 프로그램의 경우 프로젝트의 디버깅 속성 페이지에서 응용 프로그램 시작 속성을 아니요로 설정할 수 있습니다.응용 프로그램 배포 시나리오에 대한 자세한 내용은 디버깅 세션을 시작하는 방법(JavaScript)을 참조하십시오.

첫째 예외 사용

첫째 예외를 사용하여, 응용 프로그램에서 런타임 예외가 발생할 경우 중단 모드로 들어가도록 지정할 수 있습니다.이 기능을 사용하도록 설정한 경우에는 예외가 처리되었더라도 응용 프로그램이 중단 모드로 들어갑니다.따라서 디버깅하는 동안 일반적으로 확실하지 않은 일부 오류를 확인할 수 있습니다.일부 라이브러리에서는 예외를 광범위하게 사용하며, 이러한 라이브러리로 작업할 때는 첫째 예외를 해제된 상태로 두는 것이 가장 좋습니다.

첫째 예외를 사용하도록 설정하려면

Visual Studio에서 디버그 > 예외를 클릭합니다.
예외 대화 상자에서 JavaScript 런타임 예외 노드를 확장합니다.
디버거가 항상 중단하도록 할 예외의 Throw됨 확인란을 모두 선택하고 확인을 클릭합니다.

브라우저 및 플랫폼 지원

JavaScript용 Visual Studio 도구인 DOM 탐색기와 JavaScript 콘솔 창이 다음 플랫폼에서 지원됩니다.

JavaScript로 작성된 Windows 8용 Windows 스토어 응용 프로그램
Windows 8에서 실행되는 Internet Explorer 10

Windows 8 및 Visual Studio를 다운로드하려면 여기로 이동하십시오.

참고 항목

다음을 통해 공유