JavaScript의 콘솔 인터페이스 학습

javascript

 

반응형

우리는 우리의 코드에 특정한 명령어를 쓰는 것에 너무 익숙해져서 그것에 대해 생각하는 것을 멈춥니다. 이러한 명령어 중 하나는 자바스크립트의 console.log() 명령어이다. 콘솔 인터페이스가 제공하는 다른 기능이 무엇인지 궁금하지 않고 console.filename , console.infofilename , console.filename 및 console.error;와 함께 이 명령을 영원히 사용해 왔습니다.

TL; DR

여기에서 사용 가능한 콘솔 인터페이스의 설명서를 읽고 인터페이스에서 사용 가능한 기능 목록을 살펴보십시오.

로깅

물론 콘솔 인터페이스의 주 용도는 로깅입니다. 시작되지 않은 로그의 경우 JavaScript 응용프로그램 디버깅에 사용할 수 있는 여러 단계의 로그가 있습니다. 다음은 코드 예제입니다.

 

console.debug("Hello, Debug!");
console.log("Hello, World!");
console.info("Hello, Info!");
console.warn("Hello, Warning!");
console.error("Hello, Error!");

NodeJS에서 경고와 오류를 제외한 모든 내용은 STDERR로 인쇄되는 반면 경고와 오류는 STDERR로 인쇄됩니다. 그러나 웹브라우저에서 자바스크립트 코드를 실행한다면 더 세밀한 제어가 가능하다.

빈 HTML 파일로 이 스크립트(이 예에서는 demo.js)를 가져오는 경우 브라우저의 콘솔에 표시되는 내용은 다음과 같습니다.

거의 모든 인기 있는 브라우저에서 표시되는 로그 수준을 변경하는 옵션이 표시됩니다. 이 글의 스크린샷은 Microsoft Edge를 사용하고 있습니다. 아래 이미지에서 강조 표시된 지점에서 옵션을 볼 수 있습니다.

 

이 드롭다운에서 보려는 로깅 수준을 선택할 수 있습니다. 다음은 사용되는 콘솔 기능에 대한 로깅 수준의 매핑입니다.

다음 이미지를 참조하여 참조하십시오.

 

주장.

또한 일부 조건이 충족되는지 확인하고 싶을 때 if 블록을 작성하는 것을 막고, 그렇지 않을 경우 오류 로그를 인쇄하는 전용 어설션 기능도 있습니다.

console.assert(1==2, "Obvious Failed Assertion");
console.assert(1==1, "Obvious Passing Assertion");

위의 코드는 콘솔에 다음과 같은 로그를 생성합니다.

 

스택 추적

대규모 응용 프로그램의 디버깅 중에 가장 유용한 정보 중 하나는 스택 추적입니다. 응용 프로그램의 정보 흐름을 이해하는 데 도움이 됩니다. 콘솔에 추적 기능이 있어서 정확히 출력합니다! 경고 및 오류 함수는 브라우저 콘솔에 추적을 표시하지만 NodeJS에는 표시되지 않습니다.

function getObj() {
          return {key: "value"};
}
const printObj = (obj) => {
          console.trace("Printing this object: ", obj);
}
const main = () => {
          var obj = getObj();
          printObj(obj);
}
main();

이렇게 하면 브라우저 콘솔에 다음과 같은 출력이 생성됩니다.

 

그리고 이 출력은 노드(Node)에서 사용할 경우 명령줄 콘솔로 출력됩니다.JS:

그룹 로그

로그가 논리적으로 그룹화된 경우 로그를 더 잘 살펴볼 수 있습니다. 이 결과는 group() groupCollvented() 및 groupEnd() 함수를 사용하여 얻을 수 있습니다. 다음은 함수 호출 간에 이 작업을 수행하는 방법을 보여주는 예입니다.

 

function getObj() {
          console.log("[getObj] this goes inside the group");
          var obj = {key: "value"};
          console.groupCollapsed("getObj");
          console.table(obj);
          console.groupEnd();
          return obj;
}
const printObj = (obj) => {
          console.log("[printObj] this is also in the group itself");
          console.warn("Printing this object: ", obj);
}
const main = () => {
          console.group("obj");
          console.log("[main] inside the obj group");
          var obj = getObj();
          printObj(obj);
          console.groupEnd();
}
main();

다음은 명령줄에 대한 위의 출력입니다(그룹 및 groupCollared 작업은 명령줄에서도 동일하게 수행됨).

브라우저 콘솔에 기본적으로 표시되는 위의 출력은 다음과 같습니다.

 

처음에 접힌 그룹(groupCollvented() 방법을 사용하여 인스턴스화된 getObj 그룹)에서 접힌 로그를 확장하도록 선택할 수 있습니다.

또는 확장된 그룹을 축소하고 표시하지 않을 로그를 정리할 수도 있습니다.

개체를 더 잘 읽어보기

 

이것은 콘솔의 특징 중 하나이며, 저는 이것이 매우 유용할 것이라는 것을 깨달았습니다! 다음은 JavaScript 객체를 쉽게 읽을 수 있도록 특별히 만들어진 함수입니다.

console.dirs

이 기능은 내가 사용하는 브라우저(Google Chrome)에는 쓸모가 없다고 생각합니다.

obj = {
          first_name: "Leonel",
          last_name: "Messi",
          club: "PSG",
          jersey_number: 30,
}
console.log(obj);
console.dir(obj);
console.log("Some string: ", obj);
console.dir("Some string: ", obj);

마이크로소프트 엣지에서 생성되는 출력과 함께:

 

console.tables

키가 많은 개체를 사용할 경우 매우 유용할 수 있습니다. 다음 코드에 대한 출력은 다음과 같습니다.

obj = {
          first_name: "Leonel",
          last_name: "Messi",
          clubs: "PSG",
          jersey_number: 30,
}
console.log(obj);
console.dir(obj);
console.table(obj);
console.log("Some string: ", obj);
console.dir("Some string: ", obj);
console.table("Some string: ", obj);

 

console.table() 함수는 테이블과 함께 트리 형식 객체도 인쇄합니다. 그리고 다른 매개 변수와 함께 전달될 때 console.log()와 정확히 비슷하게 동작한다.

하지만 shallow가 아닌 객체에 대해서는 console.table()이 조금 덜 유용하게 될 것 같습니다. 다음은 배열과 객체를 포함하는 객체를 표시하는 방법입니다.

코드 분석

 

console.countines

코드의 흐름을 이해하기 위해, 특히 반복 함수와 재귀 함수의 경우, 코드가 특정 블록에 들어가는 횟수를 세는 것이 유용할 수 있다. 이러한 경우 콘솔은 호출 횟수를 세는 즉시 실행 기록 기능을 제공합니다.
다양한 기능(라벨 및 리셋)을 갖추고 있어 코드에서 다양한 종류의 이벤트를 쉽게 셀 수 있다. 다음은 재귀 요인 함수에 이 함수를 사용하는 예입니다.

function getFactorial(num) {
          if ((num % 1 != 0) || (num < 0)) {
                            console.count("invalid input");
                            console.error(num + " is not a valid input for `factorial` function");
                            return;
          }
          console.count("factorial recursions");
          if (num == 0) {
                            return 1;
          }
          return num * getFactorial(num-1);
}
function factorial(num) {
          getFactorial(num);
          console.count();
          console.countReset("factorial recursions");
}
factorial(2);
factorial(2.5);
factorial(-3);
factorial(4);

그러면 다음과 같은 출력이 생성됩니다.

 

console.timespec

소프트웨어의 성능을 최적화하려고 할 때 코드에 있는 각 기능과 모듈의 성능을 측정하는 것은 필수적이다. 노드로 작성된 백엔드 소프트웨어 둘 다와 관련이 있습니다.JS와 클라이언트 측 자바스크립트로 작성된 사용자 인터페이스 코드(인기있는 다양한 프레임워크를 통해): ReactJS, VueJS, 각도JS 등) 콘솔 인터페이스는 time() timeEnd() 및 timeLog()와 같은 다양한 메소드를 제공하여 코드에 있는 두 체크포인트 사이의 시간 양을 측정할 수 있습니다.

아래는 하나의 시간 로그의 처리 시간과 다른 시간 로그의 사용자 작업에 걸리는 시간을 측정하는 코드 예입니다.

function getFactorial(num) {
          if ((num % 1 != 0) || (num < 0)) {
                            console.error(num + " is not a valid input for `factorial` function");
                            return;
          }
          if (num == 0) {
                            return 1;
          }
          return num * getFactorial(num-1);
}
function factorial(num) {
          console.time("factorial of " + num );
          var factorialVal = getFactorial(num);
          console.timeLog("factorial of " + num);
          alert("Factorial of " + num + " = " + factorialVal);
          console.timeEnd("factorial of " + num);
}
factorial(2);
factorial(2.5);
factorial(-3);
factorial(4000);

그러면 다음과 같은 출력이 생성됩니다.

 

이게 좀 상쾌했으면 좋겠어요.