JavaScript 콘솔의 추가 기능

개요

자바스크립트 프로젝트에서 콘솔을 사용했을 수도 있습니다.log.이것은 변수의 값이나 프로그램 실행 중 발생하는 일을 보는 편리한 방법이다.그러나 JavaScriptconsole 객체에는 프로젝트를 처리할 때 도움을 줄 수 있는 다른 기능이 많이 있습니다.본고는 내가 가장 좋아하는 것들을 소개할 것이니, 당신이 일할 때 그것들을 사용하는 것을 잊지 않기를 바랍니다.
이 예는 브라우저에서 실행되는 JavaScript에 적용됩니다.이것은 노드에 있는 것과 같다.js에서 실행되는 JavaScript는 비슷하지만 Node에서 실행됩니다.js의 행위는 약간 다를 수 있습니다.

console.log

다른 옵션에 들어가기 전에, 우리 먼저 콘솔을 되돌아봅시다.log의 기능.console.log는 메시지를 컨트롤러로 출력합니다.하나의 대상, 하나의 그룹, 하나의 대상 그룹, 하나의 문자열, 하나의 볼 값을 입력할 수 있으며, 기본적으로 컨트롤러에 출력하고 싶은 모든 내용을 입력할 수 있다.이것은 콘솔을 사용하는 것입니다.log 및 출력의 예:

console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

이것은 JavaScript에서 가장 자주 사용하는 디버그 방법이자 가장 자주 사용하는 컨트롤러 방법이다.이제 다른 선택에 대해 이야기합시다!

console.info

console.info와 console.log는 거의 같습니다.정보 메시지를 콘솔에 인쇄합니다.내가 알기로log와 info 사이에는 진정한 차이가 없다. 단지 당신이 어떻게 정보를 분류하느냐에 달려 있다.그러나 브라우저 컨트롤러에서'info'단계의 메시지를 숨기기로 선택하면'log'와'info'메시지가 모두 숨겨집니다.콘솔을 사용하려면info는 다음과 같이 할 수 있습니다.

console.log({ restaurantName: 'Pizza Planet' }); // { restaurantName: 'Pizza Planet' };

마찬가지로 출력은 거의 같다.

console.warn

console.warn에서 경고 메시지를 콘솔에 인쇄합니다.본질적으로 말하자면, 이것은 앞의 기능과 같지만, 이 메시지는 컨트롤러에 노란색 배경과 경고 아이콘을 가지고 있다. (적어도 Chrome Dev Tools에서는 이렇다.)어떤 조작을 실행하면 프로그램의 오류를 초래할 수 있지만, 현재 아무런 문제가 발생하지 않을 때,console를 사용하십시오.warn.그것은 당신과 당신의 사용자나 다른 개발자로 하여금 그곳에 문제가 발생할 수 있다는 것을 알게 한다.

console.warn({ restaurantName: 'Pizza Planet' }); //  { restaurantName: 'Pizza Planet' };

앞과 같이 같은 값을 전달해서 경고를 컨트롤러에 출력할 수 있습니다.

console.error

console.error에서 오류 정보를 콘솔에 출력합니다.본질적으로 이것은 앞의 기능과 같지만, 이 메시지는 콘솔에 빨간색 배경과 흰색'x'오류 아이콘이 있는 빨간색 동그라미 (적어도 Chrome Dev Tools에서) 를 가지고 있습니다.프로그램에 문제가 생기면 console를 사용하십시오.error.그것은 다른 개발자들에게 문제의 원인을 찾아내고 해결하는 간편한 방법을 제공했다.오류를 찾을 수 있도록 잘못된 창고 추적 정보를 제공할 수 있습니다.

console.error({ restaurantName: 'Pizza Planet' }); //  { restaurantName: 'Pizza Planet' };

앞과 같이 같은 값을 전달해서 컨트롤러에 오류를 출력할 수 있습니다.

console.table

비록 나는 자주 그것을 잊어버리지만, 이것은 내가 가장 좋아하는 컨트롤러 옵션 중의 하나이다.console.테이블은 표 형식으로 보여줄 수 있는 데이터를 받아들여 출력합니다.우리 몇 가지 예를 봅시다.우리는 우선 대상의 콘솔에서table 시작:

console.table({ restaurantName: 'Pizza Planet', streetAddress: '123 Maple' });

dev tools의 출력은 다음과 유사합니다.
(index)
Value
restaurantName
Pizza Planet
streetAddress
123 Maple
이것은 대상의 모든 속성 이름을 가져와 index 열에 놓고 속성의 값을 값 열에 넣습니다.이것은 그룹의 모든 속성에서 발생한다.그렇다면, 만약 우리가 대상 그룹을 출력한다면 어떻게 될까요?결과는 다음과 같습니다.
(index)
restaurantName
streetAddress
0
Pizza Planet
123 Maple
일
Pizza Palace
123 Elm
나는 내가 통상적으로 콘솔을 사용한다는 것을 발견했다.log, 나는 이미 익숙해졌기 때문에, 그러나 나는 많은 때console라고 생각한다.테이블은 더 잘 작동하고 아름답고 깨끗하며 읽기 쉬운 방식으로 나를 위해 출력할 수 있다.

console.assert

console.assert는 당신이 정한 조건을 충족시키지 못한 메시지를 컨트롤러에 출력하는 방법입니다.이 함수는 두 개의 매개 변수가 있습니다. 요구 값의 표현식과 표시해야 할 오류 메시지입니다.이것은 하나의 예입니다.

const obj = { restaurantName: 'Pizza Planet' };
console.assert(obj.restaurantName === 'Pizza Palace', 'The name of the restaurant is not "Pizza Palace"');
//  Assertion Failed; 'The name of the restaurant is not "Pizza Palace"'

이것은 아마도 또 다른 아주 좋은 디버깅 프로그램의 방법일 것이다.단언이 실패했을 때만 이 메시지가 표시되므로 메시지가 표시되지 않으면 표현식이 정확하게 평가되고 있다고 가정할 수 있습니다.

console.그룹과 콘솔.groupEnd

console.그룹과 콘솔.groupEnd는 많은 콘솔을log 논리적으로 그룹을 나누는 방식.그리고 필요할 때 그룹을 축소해서 숨길 수 있습니다.사용 편의성:

console.group();
console.log({ restaurantName: 'Pizza Palace' });
console.groupEnd();

이 그룹은 전체적으로 축소될 수 있습니다.만약 당신이 컨트롤러에 많은 내용을 기록해야 한다면, 이것은 매우 유용할 것이다.

결론

JavaScript에서는 console 객체에 사용할 수 있는 여러 가지 방법이 있습니다.유형에 따라 메시지를 필터할 수 있도록 개발을 도와줄 수 있다.표의 하나 또는 여러 개 보기;필요할 때 숨길 수 있도록 조합하거나 축소합니다.그것은 너의 업무 절차를 개선할 것이다.
다음은 JavaScript 콘솔의 더 많은 기능에 대한 상세한 내용입니다. JavaScript 콘솔에 대한 더 많은 자료는 저희의 다른 관련 글을 주목해 주십시오!