브라우저 콘솔에서 데이터를 테이블로 표시하는 방법

콘솔은 웹사이트에서 발생하는 오류를 기록하는 브라우저에 내장된 도구입니다. 깨진 링크, 불완전한 JavaScript 기능 또는 알 수 없는 CSS 속성 과 같은 오류가 있는 경우 브라우저는 콘솔에 오류 메시지를 표시합니다.

특정 기능과 출력 데이터를 테스트하는 데 유용한 셸 및 콘솔 API를 통해 콘솔과 상호 작용할 수도 있습니다. 여기에서는 Console API 사용에 대한 유용한 팁을 보여줍니다.

브라우저에서 콘솔에 액세스

Chrome에서는 보기 > 개발자 > JavaScript 콘솔을 선택하여 콘솔을 표시할 수 있습니다. 또한 OS X에서는 Cmd+ Option+ , Windows에서는 + + 키보드 단축키를 사용할 수도 있습니다 .JCtrlShiftJ

아래는 오류가 없는 Chrome 콘솔입니다.

여기에서 콘솔 API에 제공된 명령을 사용할 수 있습니다.

콘솔과 상호작용

콘솔 자체를 통해 그리고 JavaScript를 추가하여 브라우저의 콘솔과 상호 작용할 수 있습니다. 예를 들어 여기서는 "Good Morning!" 이라는 결과를 출력하도록 콘솔에 요청합니다. 콘솔에 console.log() 명령을 직접 입력하여 :

언급한 대로 console.log()를 적용할 수도 있습니다 . Console.log()를 사용하여 JavaScript 조건문을 테스트할 수 있습니다. console.log() 를 사용하면 결과가 true 또는 false (true 또는 false)를 반환하는 경우를 더 명확하게 확인할 수 있습니다 .

예는 다음과 같습니다.

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

위 코드는 변수에 숫자 1 이 포함되어 있으므로 true를 반환합니다 . 콘솔에서 브라우저가 "true"라는 내용의 텍스트를 출력하는 것을 볼 수 있습니다.

테이블 형식으로 데이터 출력

때로는 아래와 같이 데이터 배열이나 개체 목록을 처리해야 할 수도 있습니다.

var data = [

{ name: "Andi", age: "21", city: "Tuban" },

{ name: "Ani", age: "25", city: "Trenggalek" },

{ name: "Adi", age: "30", city: "Kediri" }

];

console.table(data);

console.log() 메소드를 사용하면 이 데이터를 읽기가 어렵습니다 . console.log() 메소드는 아래와 같이 축소 가능한 트리 보기에 배열을 표시합니다.

이러한 배열을 처리해야 할 경우 console.table()을 사용하는 것이 데이터를 출력하는 더 좋은 방법입니다. 이 방법은 데이터를 테이블 형식으로 표시합니다. 위와 동일한 데이터를 취하면 다음과 같은 결과가 나타납니다.

브라우저 콘솔은 웹 개발자가 웹 사이트의 오류를 처리하는 데 도움이 됩니다. 사용자는 console.log() 메서드와 마찬가지로 이를 사용하여 데이터 출력을 검사할 수도 있습니다 . 데이터 배열이 있는 경우, 읽기 쉬운 테이블 형식으로 배열을 표시하므로 console.table() 명령이 더 유용합니다. console.table()은 Chrome , Safari 및 최신 버전의 Opera와 같은 Webkit 기반 브라우저에서만 적용 가능합니다.

당신이 성공하기를 바랍니다.