JavaScript 콘솔 명령
.png "Windows 및 Windows Phone에 적용")
명령을 사용하여 Visual Studio의 JavaScript 콘솔 창에서 메시지를 보내고 다른 작업을 수행할 수 있습니다. 해당 창을 사용하는 방법을 보여주는 예제는 다음 항목을 참조하세요. 퀵 스타트: 콘솔을 사용하여 Debug JavaScript 디버깅. 이 항목의 내용은 JavaScript로 작성된 Windows 스토어 및 Windows Phone 스토어 앱에 적용됩니다. 다중 장치 하이브리드 앱에서 지원되는 콘솔 명령에 대한 자세한 내용은 앱 디버그를 참조하세요. Internet Explorer F12 도구에서 콘솔을 사용하는 방법에 대한 자세한 내용은 이 항목을 참조하세요.
JavaScript 콘솔 창이 닫혀 있는 경우 Visual Studio에서 디버그하는 동안 디버그 > 창 > JavaScript 콘솔을 선택하여 콘솔 창을 열 수 있습니다.
참고
디버깅 세션 중에 창을 사용할 수 없는 경우 프로젝트의 디버그 속성에서 디버거 형식이 Script로 설정되었는지 확인하세요.
콘솔 개체 명령
다음 표는 JavaScript 콘솔 창에서 사용할 수 있거나 코드에서 콘솔로 메시지를 보내는 데 사용할 수 있는 console 개체 명령에 대한 구문을 보여줍니다. 이 개체는 여러 폼을 제공하므로 원하는 경우 정보 메시지와 오류 메시지를 구분할 수 있습니다.
참고
로컬 개체의 명명된 콘솔과 혼동되지 않도록 해야 하는 경우 window.console.[command]에서 긴 명령을 사용하면 됩니다.
명령 |
설명 |
예제 |
|---|---|---|
assert(expression, message) |
expression이 false가 되면 메시지를 보냅니다. |
console.assert((x == 1), "assert message: x != 1"); |
clear() |
콘솔 창에서 스크립트 오류 메시지를 비롯한 메시지를 지우고 콘솔 창에 나타나는 스크립트도 지웁니다. 콘솔 입력 프롬프트에 입력한 스크립트는 지우지 않습니다. |
console.clear(); |
count(title) |
count 명령이 콘솔 창에 호출된 횟수를 보냅니다. 계산되는 각 호출은 title(선택 사항)으로 고유하게 식별됩니다. 콘솔 창의 기존 항목은 title 매개 변수(있는 경우)로 식별되고 count 명령으로 업데이트됩니다. 새 항목이 만들어지지 않습니다. 요구 사항: Visual Studio 2013 |
console.count(); console.count("inner loop"); |
debug(message) |
콘솔 창에 message를 보냅니다. 이 명령은 console.log와 동일합니다. 명령을 사용하여 전달된 개체는 문자열 값으로 전환됩니다. 요구 사항: Visual Studio 2013 |
console.debug("logging message"); |
dir(object) |
지정한 개체를 콘솔 창에 보내고 개체 시각화 도우미에 표시합니다. 시각화 도우미를 사용하여 콘솔 창에서 속성을 검사할 수 있습니다. |
console.dir(obj); |
dirxml(object) |
지정한 XML 노드 object를 콘솔 창에 보내고 XML 노드 트리로 표시합니다. 요구 사항: Visual Studio 2013 |
console.dirxaml(xmlNode); |
error(message) |
콘솔 창에 message를 보냅니다. 메시지 텍스트는 빨간색이며 이 텍스트 앞에 오류 기호가 옵니다. 명령을 사용하여 전달된 개체는 문자열 값으로 전환됩니다. |
console.error("error message"); |
group(title) |
콘솔 창에 전송된 메시지의 그룹화를 시작하고 title(선택 사항)을 그룹 레이블로 보냅니다. 그룹은 중첩될 수 있고 콘솔 창이 트리 뷰에 나타납니다. 그룹* 명령을 사용하면 구성 요소 모델이 사용 중인 경우와 같은 일부 시나리오에서 콘솔 창 출력을 더욱 쉽게 볼 수 있습니다. 요구 사항: Visual Studio 2013 |
|
groupCollapsed(title) |
콘솔 창에 전송된 메시지의 그룹화를 시작하고 title(선택 사항)을 그룹 레이블로 보냅니다. groupCollapsed를 사용하여 전송된 그룹은 기본적으로 축소된 뷰에 나타납니다. 그룹은 중첩될 수 있고 콘솔 창이 트리 뷰에 나타납니다. 요구 사항: Visual Studio 2013 |
사용 방법은 group 명령과 동일합니다. group 명령의 예를 참조하세요. |
groupEnd() |
현재 그룹을 종료합니다. 요구 사항: Visual Studio 2013 |
group 명령의 예를 참조하세요. |
info(message) |
콘솔 창에 message를 보냅니다. 메시지 앞에 정보 기호가 옵니다. |
console.info("info message"); 추가 예제는 이 항목의 뒷부분에 나오는 console.log 출력 서식 지정을 참조하세요. |
log(message) |
콘솔 창에 message를 보냅니다. 개체를 전달하는 경우 이 명령은 해당 개체를 콘솔 창으로 보내고 개체 시각화 도우미에 표시합니다. 시각화 도우미를 사용하여 콘솔 창에서 속성을 검사할 수 있습니다. |
console.log("logging message"); |
msIsIndependentlyComposed(element) |
웹 앱에서 사용됩니다. JavaScript를 사용하는 스토어 앱에서는 지원되지 않습니다. |
지원되지 않음 |
profile(reportName) |
웹 앱에서 사용됩니다. JavaScript를 사용하는 스토어 앱에서는 지원되지 않습니다. |
지원되지 않음 |
profileEnd() |
웹 앱에서 사용됩니다. JavaScript를 사용하는 스토어 앱에서는 지원되지 않습니다. |
지원되지 않음 |
select(element) |
DOM 탐색기에서 지정한 HTML element를 선택합니다. 요구 사항: Visual Studio 2013 |
console.select(요소); |
time (name) |
선택적 name 매개 변수에서 식별하는 타이머를 시작합니다. console.timeEnd와 함께 사용할 경우 time과 timeEnd 사이에 경과된 시간을 계산하고 name 문자열을 접두사로 사용하여 결과(단위: ms)를 콘솔에 보냅니다. 성능을 측정하기 위한 앱 코드 계측을 활성화하는 데 사용됩니다. 요구 사항: Visual Studio 2013 |
console.time("app start"); app.start(); console.timeEnd("app start"); |
timeEnd(name) |
선택적 name 매개 변수에서 식별하는 타이머를 중지합니다. time 콘솔 명령을 참조하세요. 요구 사항: Visual Studio 2013 |
console.time("app start"); app.start(); console.timeEnd("app start"); |
trace() |
스택 추적을 콘솔 창에 보냅니다. 추적에는 파일 이름, 줄 번호 및 열 번호 등의 정보와 완전한 호출 스택이 포함됩니다. 요구 사항: Visual Studio 2013 |
console.trace(); |
warn(message) |
앞에 경고 기호가 오는 message를 콘솔 창에 보냅니다. 명령을 사용하여 전달된 개체는 문자열 값으로 전환됩니다. |
console.warn("warning message"); |
기타 명령
다음 명령은 JavaScript 콘솔 창에서도 사용할 수 있습니다.
명령 |
설명 |
예제 |
|---|---|---|
$0, $1, $2, $3, $4 |
콘솔 창에 지정된 요소를 반환합니다. $0은 DOM 탐색기에서 현재 선택한 요소를 반환하고 $1은 DOM 탐색기에서 이전에 선택한 요소를 반환하며 이전에 선택한 네 번째 요소까지 이런 식으로 반환됩니다. |
$3 |
$(id) |
ID별로 요소를 반환합니다. document.getElementById(id)에 대한 바로 가기 명령입니다. 여기서 id는 요소 ID를 나타내는 문자열입니다. |
$("contenthost") |
$$(selector) |
CSS 선택기 구문을 사용하여 지정된 선택기와 일치하는 요소의 배열을 반환합니다. document.querySelectorAll()에 대한 바로 가기 명령입니다. |
$$(".itemlist") |
cd() cd(window) |
식 계산 컨텍스트를 페이지의 기본 최상위 창에서 지정된 프레임의 창으로 변경할 수 있습니다. 매개 변수 없이 cd()를 호출하면 컨텍스트가 최상위 창에 반환됩니다. |
cd(); cd(myframe); |
select(element) |
DOM 탐색기에서 지정된 요소를 선택합니다. |
select(document.getElementById("element")); select($("element")); select($1); |
dir(object) |
지정된 개체에 대한 시각화 도우미를 반환합니다. 시각화 도우미를 사용하여 콘솔 창에서 속성을 검사할 수 있습니다. |
dir(obj); |
콘솔 명령이 있는지 여부 확인
특정 명령을 사용하기 전에 이 명령이 있는지 여부를 확인할 수 있습니다. 이 예에서는 console.log 명령의 존재 유무를 확인합니다. console.log가 있는 경우 코드에서 호출합니다.
if (console && console.log) {
console.log("msg");
}
JavaScript 콘솔 창에서 개체 검사
JavaScript 콘솔 창을 사용하면 범위 내에 있는 개체와 상호 작용할 수 있습니다. 콘솔 창에서 범위 외부의 개체를 검토하려면 코드에서 console.log , console.dir 또는 기타 명령을 사용하세요. 또는 개체가 범위 내에 있는 경우 코드에 중단점을 설정(중단점 > 중단점 삽입)하여 콘솔 창에서 이 개체와 상호 작용할 수 있습니다.
console.log 출력 서식 지정
여러 인수를 console.log에 전달하는 경우 콘솔은 인수를 배열로 처리하고 출력을 연결합니다.
var user = new Object();
user.first = "Fred";
user.last = "Smith";
console.log(user.first, user.last);
// Output:
// Fred Smith
console.log는 출력 서식을 지정하기 위한 "printf" 대체 패턴도 지원합니다. 첫 번째 인수에 대체 패턴을 사용하는 경우 추가 인수는 사용되는 순서로 지정된 패턴을 바꾸는 데 사용됩니다.
다음과 같은 대체 패턴이 지원됩니다.
- %s - 문자열
%i - 정수
%d - 정수
%f - 부동
%o - 개체
%b - 이진
%x - 16진수
%e - 지수
다음은 console.log에 대체 패턴을 사용하는 몇 가지 예제입니다.
var user = new Object();
user.first = "Fred";
user.last = "Smith";
user.age = 10.01;
console.log("Hi, %s %s!", user.first, user.last);
console.log("%s is %i years old!", user.first, user.age);
console.log("%s is %f years old!", user.first, user.age);
// Output:
// Hi, Fred Smith!
// Fred is 10 years old!
// Fred is 10.01 years old!