JavaScript
콘솔

소개

통사론

• void console.log (obj1 [, obj2, ..., objN]);
• void console.log (msg [, sub1, ..., subN]);

매개 변수

비고

if (typeof window.console !== 'undefined')
{
   console.log("Hello World");
}

if (!window.console)
{ 
    console = {log: function() {}}; 
}

값 표 - console.table ()

대부분의 환경에서 console.table() 은 객체와 배열을 표 형식으로 표시하는 데 사용할 수 있습니다.

예 :

console.table(['Hello', 'world']);

다음과 같이 표시됩니다.

console.table({foo: 'bar', bar: 'baz'});

다음과 같이 표시됩니다.

"personId": 124, "name": "Amelia"var personArr = [{personId ": 123,"name ":"Jhon ","city ":"Melbourne ","phoneNo ":"1234567890 " , "City": "Sydney", "phoneNo": "1234567890"}, { "personId": 125, "name": "Emily", "city": "퍼스", "phoneNo": "1234567890"}, { "personId": 126, "name": "아브라함", "도시": "퍼스", "phoneNo": "1234567890"}];

console.table (personArr, [ 'name', 'personId']);

다음과 같이 표시됩니다.

로깅 할 때 스택 추적 포함 - console.trace ()

function foo() {
  console.trace('My log statement');
}

foo();

콘솔에 다음을 표시합니다.

My log statement       VM696:1
  foo                  @ VM696:1
  (anonymous function) @ (program):1

참고 : 사용 가능한 경우 동일한 스택 추적이 Error 객체의 속성으로 액세스 가능하다는 것을 아는 것도 유용합니다. 이것은 후 처리 및 자동 피드백 수집에 유용 할 수 있습니다.

var e = new Error('foo');
console.log(e.stack);

브라우저의 디버깅 콘솔에 인쇄하기

간단한 메시지를 인쇄하기 위해 브라우저의 디버깅 콘솔을 사용할 수 있습니다. 이 디버깅 또는 웹 콘솔은 직접 (대부분의 브라우저에서 F12 키 - 자세한 내용은 아래 설명 참조) 브라우저에서 열 수와 log 의 방법 console 객체가 다음을 입력하여 호출 할 수 있습니다 자바 스크립트를 :

console.log('My message');

그런 다음 Enter 키 를 누르면 My message 가 디버깅 콘솔에 표시됩니다.

console.log() 는 현재 범위에서 사용할 수있는 인수 및 변수를 원하는 수만큼 호출 할 수 있습니다. 여러 개의 인수가 한 줄에 작은 간격으로 인쇄됩니다.

var obj = { test: 1 };
console.log(['string'], 1, obj, window);

log 메소드는 디버깅 콘솔에 다음을 표시합니다.

['string']  1  Object { test: 1 }  Window { /* truncated */ }

일반 문자열 옆에 console.log() 는 배열, 객체, 날짜, 함수 등과 같은 다른 유형을 처리 할 수 ​​있습니다.

console.log([0, 3, 32, 'a string']);
console.log({ key1: 'value', key2: 'another value'});

디스플레이 :

Array [0, 3, 32, 'a string']
Object { key1: 'value', key2: 'another value'}

중첩 된 객체가 축소 될 수 있습니다.

console.log({ key1: 'val', key2: ['one', 'two'], key3: { a: 1, b: 2 } });

디스플레이 :

Object { key1: 'val', key2: Array[2], key3: Object }

Date 객체 및 function 와 같은 특정 유형은 다르게 표시 될 수 있습니다.

console.log(new Date(0));
console.log(function test(a, b) { return c; });

디스플레이 :

Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
function test(a, b) { return c; }

기타 인쇄 방법

log 메소드 외에도 최신 브라우저는 비슷한 방법을 지원합니다.

• console.info - 작은 유익한 아이콘 (ⓘ)이 인쇄 된 문자열 또는 객체의 왼쪽에 나타납니다.

• console.warn - 왼쪽에 작은 경고 아이콘 (!)이 나타납니다. 일부 브라우저에서는 로그의 배경이 노란색입니다.

• console.error - 작은 시간 아이콘 (⊗)이 왼쪽에 나타납니다. 일부 브라우저에서는 로그의 배경이 빨간색입니다.

• console.timeStamp - 현재 시간과 지정된 문자열을 출력하지만 비표준 임 :

  console.timeStamp('msg');
  

  디스플레이 :

  00:00:00.001 msg
  

• console.trace - 현재 스택 추적을 출력하거나 전역 범위에서 호출 된 경우 log 메소드와 동일한 출력을 표시합니다.

  function sec() {
     first();
  }
  function first() {
     console.trace();
  }
  sec();
  

  디스플레이 :

  first
  sec
  (anonymous function)
  

위 이미지는 Chrome 버전 56에서 timeStamp 제외한 모든 기능을 보여줍니다.

이러한 메서드는 log 메서드와 비슷하게 동작하며 여러 가지 디버깅 콘솔에서 서로 다른 색이나 형식으로 렌더링 할 수 있습니다.

특정 디버거에서는 인쇄 된 텍스트 나 각 개체 속성을 나타내는 작은 삼각형 (►)을 클릭하여 개별 개체 정보를 더 확장 할 수 있습니다. 이 축소 오브젝트 속성은 로그에서 열거 나 닫을 수 있습니다. 이에 대한 추가 정보는 console.dir 을 참조하십시오.

측정 시간 - console.time ()

console.time() 은 코드에서 작업이 실행되는 데 걸리는 시간을 측정하는 데 사용할 수 있습니다.

console.time([label]) 호출하면 새 타이머가 시작됩니다. console.timeEnd([label]) 가 호출되면 원래 .time() 호출이 계산되고 기록 된 이후의 경과 시간 (밀리 초 .time() 입니다. 이 동작 때문에 같은 레이블을 사용하여 .timeEnd() 여러 번 호출하여 원래 .time() 호출 이후의 경과 시간을 기록 할 수 있습니다.

예제 1 :

console.time('response in');

alert('Click to continue');
console.timeEnd('response in');

alert('One more time');
console.timeEnd('response in');

출력됩니다 :

response in: 774.967ms
response in: 1402.199ms

예 2 :

var elms = document.getElementsByTagName('*'); //select all elements on the page

console.time('Loop time');

for (var i = 0; i < 5000; i++) {
    for (var j = 0, length = elms.length; j < length; j++) {
        // nothing to do ...
    }
}

console.timeEnd('Loop time');

출력됩니다 :

Loop time: 40.716ms

계산 - console.count ()

console.count([obj]) 는 인수로 제공된 객체 값에 카운터를 배치합니다. 이 메서드가 호출 될 때마다 카운터가 증가합니다 (빈 문자열 '' 제외). 숫자와 함께 레이블은 다음 형식에 따라 디버깅 콘솔에 표시됩니다.

[label]: X

label 는 인수로 전달 된 객체의 값을 나타내고 X 는 카운터의 값을 나타냅니다.

변수가 인수로 제공 되더라도 객체의 값은 항상 고려됩니다.

var o1 = 1, o2 = '2', o3 = "";
console.count(o1);
console.count(o2);
console.count(o3);

console.count(1);
console.count('2');
console.count('');

디스플레이 :

1: 1
2: 1
: 1
1: 2
2: 2
: 1

숫자가있는 문자열은 Number 객체로 변환됩니다.

console.count(42.3);
console.count(Number('42.3'));
console.count('42.3');

디스플레이 :

42.3: 1
42.3: 2
42.3: 3

함수는 항상 전역 Function 객체를 가리 킵니다.

console.count(console.constructor);
console.count(function(){});
console.count(Object);
var fn1 = function myfn(){};
console.count(fn1);
console.count(Number);

디스플레이 :

[object Function]: 1
[object Function]: 2
[object Function]: 3
[object Function]: 4
[object Function]: 5

특정 개체는 참조하는 개체 유형과 관련된 특정 카운터를 가져옵니다.

console.count(undefined);
console.count(document.Batman);
var obj;
console.count(obj);
console.count(Number(undefined));
console.count(NaN);
console.count(NaN+3);
console.count(1/0);
console.count(String(1/0));
console.count(window);
console.count(document);
console.count(console);
console.count(console.__proto__);
console.count(console.constructor.prototype);
console.count(console.__proto__.constructor.prototype);
console.count(Object.getPrototypeOf(console));
console.count(null);

디스플레이 :

undefined: 1
undefined: 2
undefined: 3
NaN: 1
NaN: 2
NaN: 3
Infinity: 1
Infinity: 2
[object Window]: 1
[object HTMLDocument]: 1
[object Object]: 1
[object Object]: 2
[object Object]: 3
[object Object]: 4
[object Object]: 5
null: 1

빈 문자열 또는 인수가 없음

디버깅 콘솔에 count 메소드 를 순차적으로 입력하는 동안 인수가 제공되지 않으면 빈 문자열이 매개 변수로 간주됩니다. 예 :

> console.count();
  : 1
> console.count('');
  : 2
> console.count("");
  : 3

어설 션으로 디버깅 - console.assert ()

어설 션이 false 이면 오류 메시지를 콘솔에 씁니다. 그렇지 않으면 어설 션이 true 아무 것도 수행하지 않습니다.

console.assert('one' === 1);

어설 션이 false 경우에만 인쇄 될 어설 션 뒤에 여러 개의 인수를 제공 할 수 있습니다.이 인수는 문자열이나 다른 객체가 될 수 있습니다.

console.assert 는 Node.js를 제외하고 AssertionError throw하지 않습니다. 이 메서드는 대부분의 테스트 프레임 워크와 호환되지 않으며 해당 코드 실행이 실패한 어설 션에서 중단되지 않습니다.

콘솔 출력 형식화

콘솔의 많은 인쇄 메소드 는 % 토큰을 사용하여 C와 같은 문자열 형식을 처리 할 수 ​​있습니다.

console.log('%s has %d points', 'Sam', 100);

디스플레이 Sam has 100 points 있습니다.

Javascript의 형식 지정자의 전체 목록은 다음과 같습니다.

고급 스타일링

CSS 형식 지정자 ( %c )가 문자열의 왼쪽에 배치되면 print 메서드는 해당 문자열의 서식을 세부적으로 제어 할 수있는 CSS 규칙이있는 두 번째 매개 변수를 사용합니다.

console.log('%cHello world!', 'color: blue; font-size: xx-large');

디스플레이 :

여러 개의 %c 형식 지정자를 사용할 수 있습니다.

• %c 의 오른쪽에있는 부분 문자열은 print 메소드에서 해당 매개 변수를가집니다.
• 이 매개 변수는 같은 하위 문자열에 CSS 규칙을 적용 할 필요가없는 경우 emtpy 문자열 일 수 있습니다.
• 두 개의 %c 형식 지정자가있는 경우 1 ^번째 ( %c 포함됨) 및 2 ^번째 하위 문자열은 각각 print 메소드의 2 ^번째 및 3 ^번째 매개 변수에 정의 된 규칙을 갖습니다.
• 세 경우 %c 포맷 지시자가 발견 한 후 1 ^{일 2 차} 및 ^{3 차} 문자열은 규칙 등 각각 2 ^번째, 3 ^번째 및 4 ^번째 파라미터에 정의되어있는 것이다 ..

console.log("%cHello %cWorld%c!!", // string to be printed
            "color: blue;", // applies color formatting to the 1st substring
            "font-size: xx-large;", // applies font formatting to the 2nd substring
            "/* no CSS rule*/" // does not apply any rule to the remaing substring
);

디스플레이 :

그룹을 사용하여 들여 쓰기 출력

출력은 다음과 같은 방법으로 디버깅 콘솔의 접을 수있는 그룹으로 식별하고 묶을 수 있습니다.

• console.groupCollapsed() :이 메소드가 호출 된 후 수행 된 모든 항목을 표시하기 위해 공개 버튼을 통해 확장 할 수있는 접힌 항목 그룹을 작성합니다.
• console.group() :이 메소드가 호출 된 후 엔트리를 숨기기 위해 접을 수있는 확장 된 항목 그룹을 작성합니다.

다음 방법을 사용하여 후방 항목에 대한 식별자를 제거 할 수 있습니다.

• console.groupEnd () : 현재의 그룹을 종료 해,이 메소드의 호출 후에 새로운 그룹에 친 항목을 표시 할 수 있도록 (듯이)합니다.

그룹을 연쇄 적으로 연결하면 서로간에 여러 식별 된 출력 또는 접을 수있는 레이어를 허용 할 수 있습니다.

= Collapsed group expanded =>

콘솔 지우기 - console.clear ()

console.clear() 메소드를 사용하여 콘솔 창을 지울 수 있습니다. 이렇게하면 이전에 인쇄 된 모든 메시지가 콘솔에서 제거되고 일부 환경에서는 "콘솔이 지워졌습니다"와 같은 메시지가 인쇄 될 수 있습니다.

대화 형으로 객체 및 XML 표시 - console.dir (), console.dirxml ()

console.dir(object) 는 지정된 JavaScript 객체의 속성에 대한 대화 형 목록을 표시합니다. 출력은 자식 객체의 내용을 볼 수있는 공개 삼각형이있는 계층 적 목록으로 제공됩니다.

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dir(myObject);

표시 :

console.dirxml(object) 는 가능한 경우 object의 자손 요소의 XML 표현을 인쇄하고 그렇지 않은 경우 JavaScript 표현을 인쇄합니다. 호출 console.dirxml() HTML 및 XML 요소에 대한 것은 호출하는 것과 같습니다 console.log() .

예제 1 :

console.dirxml(document)

표시 :

예 2 :

console.log(document)

표시 :

예 3 :

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dirxml(myObject);

표시 :