콘솔 API의 힘

콘솔 API의 힘

자바스크립트 프로젝트로 작업할 때 우리가 사용하는 가장 일반적인 디버깅 방법은 console.log("Something here", {some_variable})를 코드 줄 사이에 넣고 문제가 발생한 장소와 시기를 식별하기 위한 매개 변수로 각각 몇 가지 관련 없는 정보를 전달하는 것이다.

console.log()를 제외한 콘솔에서 지원하는 다른 메서드는 무엇인지 생각해 본 적이 있습니까? 이 블로그에서 그 환상적인 방법들 중 몇 가지를 살펴봅시다.

콘솔 API는 무엇에 사용됩니까?

콘솔 API는 사용자가 코드의 다른 설정 지점에서 실행 시간을 추적하는 변수 값 로깅과 같은 디버깅 수준 작업을 수행할 수 있는 기능을 제공합니다.

전역 범위 액세스로 어디서나 액세스할 수 있는 콘솔 개체를 사용하여 액세스할 수 있는 가장 일반적인 방법입니다. 또한 웹 작업자의 지원을 받기 때문에 동시성에 대한 작업 없이 검색 범위에서 쉽게 사용할 수 있습니다.

이제, 그것에서 제공하는 몇 가지 방법을 살펴봅시다.

(참고: Chrome 콘솔을 사용할 예정이며 브라우저마다 출력 형식이 다를 수 있습니다.)

콘솔에서 값 출력:

기본적으로 콘솔에서 텍스트를 인쇄하기 위해 액세스할 수 있는 네 가지 표준 방법이 있습니다.

console.log() - 가장 널리 사용되는 메서드는 메시지를 콘솔에 출력합니다.

console.infocomment - 이 메서드는 console.logcomment와 동일한 방법으로 값을 출력합니다. 일부 브라우저는 정보 아이콘을 추가하거나 출력을 다르게 포맷할 수 있습니다. 예를 들어, 아래 이미지에서 console.log()가 내 React Devools 확장자로 식별되어 재정의되는 것을 볼 수 있지만, console.info()은 이를 인식하지 못하므로 네이티브 브라우저 환경에서 실행됩니다.

console.warn() - 이 메서드는 웹 콘솔에 경고 메시지를 출력합니다.

console.error() - 이 메서드는 웹 콘솔에 오류 메시지를 출력합니다.

이 네 가지 방법 외에도 다음과 같은 다른 출력 방법이 있습니다.

console.dir() - 지정된 JavaScript 개체의 속성을 대화형 목록으로 표시합니다. 이 목록을 통해 공개 삼각형을 사용하여 하위 개체의 내용을 검사할 수 있습니다.

console.log()와 console.dir() 사이의 키 차이입니다.

여기서 console.log()는 HTML 유사 트리를 인쇄하지만 console.dir()는 JSON 유사 트리로 인쇄합니다.

또 다른 유사한 방법은 console.dirxml()로, 가능한 경우 지정된 개체의 XML/HTML 요소 표현 또는 불가능한 경우 자바스크립트 개체 보기를 표시합니다.

표 형식으로 데이터 인쇄:

SQL 쿼리 또는 API 응답에서 응답으로 얻은 표 형식의 데이터가 종종 있습니다. 동일한 경우 console.table(${data}, ${column}) 메서드를 사용하는 것이 좋습니다. 예:

비밀 소스: 열 제목을 클릭하여 정렬된 값이 표시되는 경우에도 놀라지 마십시오.

출력 값에 CSS 적용:

%c 지시어를 사용하여 인쇄할 텍스트를 포맷할 수 있다는 것은 매우 멋진 일입니다. 아래 예제를 자세히 살펴보도록 하겠습니다.

대단해! 그렇지 않아요?

동일한 출력에 다른 스타일링이 있는 다른 예를 살펴보겠습니다.

중첩된 그룹 수준에서 인쇄:

console.group(), console.groupCollaps() 및 console.groupEnd() 메소드를 사용하여 값을 중첩 형식으로 기록할 수 있습니다.

위의 예에서는 console.warn() 및 console.error()가 사용되었습니다. 이것이 최종 출력 형식이 지정되는 이유입니다. 또한 2차 이너 레벨은 접힌 형태입니다.

프로세스의 시간 추적:

함수를 실행하는 데 걸리는 시간을 추적하려고 하면 외부 함수를 사용하는 대신 console.time(), console.timeLog() 및 console.timeEnd()를 사용할 수 있습니다.

예를 들어:

여기서 console.time("작업 1")은 task 1과 console.timeEnd("작업 1") 사이의 시간을 기록하여 타이머를 종료하고 마지막에 최종 값을 인쇄합니다. 타이머가 중지되면 다시 액세스할 수 없습니다.

스택 추적 및 함수 실행에 대한 조건부 추적:

console.contains 및 console.contains는 실행 스택을 추적하는 데 도움이 되는 실용적인 방법입니다. 이러한 메서드의 차이점은 console.assert()가 첫 번째 매개 변수가 거짓일 경우에만 스택 추적을 인쇄하고 console.error() 메서드와 동일한 방식으로 인쇄한다는 것입니다.

예:

회선이 실행되는 횟수를 계산합니다.

어떤 함수가 호출된 횟수를 추적한다고 가정하면, 어떤 재귀 함수든 console.count() 및 console.countReset()이 큰 도움이 됩니다. 예를 들어.

위의 예에서는 레이블 a가 호출된 횟수의 값을 출력하고 다시 호출한 후 다음 호출 시 1로 되돌아가는 것을 볼 수 있습니다.

지시사항을 사용하여 문자열 대체:

%s, %o 또는 %O, %d 또는 %i 지시어를 사용하여 문자열을 포맷하고 대체할 수 있습니다. (몇 가지 예를 보려면 크롬 콘솔이 정밀 포맷을 지원하지 않으므로 파이어폭스 콘솔을 사용하고 있습니다.)

이러한 방법은 Console API가 생활을 편리하게 하기 위해 제공한 방법이었지만, 마무리하기 전에 브라우저와 브라우저에서 콘솔 API가 어떻게 작동하는지 주목할 필요가 있습니다. 노드에서의 작동 방식JS 스트림.

브라우저에서는 동기적이지만 노드에서는 동기식입니다.JS 스트림은 다른 모든 Node.js 스트림처럼 동기화되거나 비동기식으로 일관되지 않습니다. NodeJS에서, 그들은 내부적으로 process.stdout과 process.stderr를 사용하며, 이 두 스트림은 스트림이 무엇에 연결되어 있고 시스템이 Windows인지 POSIX인지에 따라 동기식으로 쓰거나 비동기식으로 쓰입니다. 다음은 이 두 NodeJS 프로세스 스트림의 쓰기 작업 동작입니다.

파일: Windows 및 POSIX에서 동기화

TTY (단어): Windows에서는 비동기식, POSIX에서는 동기

파이프(및 소켓): Windows에서는 동기식, POSIX에서는 비동기식

그것은 끝났어요!

참조:

MDN

NodeJS API 참조

from http://gong-tech.tistory.com/35 by ccl(A) rewrite - 2021-09-24 09:26:46