개발자 콘솔에 대해 알아야 할 모든 것

좋은 전문가는 도구를 알고 있습니다. WordPress 개발자가 마음대로 사용할 수 있는 주요 도구 중 하나는 브라우저에 포함된 JavaScript 개발자 콘솔입니다. 이 게시물에서 우리는 브라우저 개발자 콘솔에 대해 알아야 할 모든 것과 아마도 당신이 몰랐을 몇 가지 트릭과 호기심을 볼 것입니다.

개발자 콘솔에 액세스하는 방법

가장 먼저 해야 할 일: 브라우저의 개발자 콘솔을 여는 방법을 살펴보겠습니다. Firefox 사용자라면 메뉴(오른쪽 상단)를 클릭하고 아래와 같이 웹 개발자 옵션을 찾으세요.

그런 다음 웹 콘솔 을 선택합니다.

다음 스크린샷에서 볼 수 있듯이 콘솔이 브라우저에 표시됩니다. 패널을 정확히 표시할 위치를 구성할 수 있음을 기억하십시오. 별도의 창에 나타나도록 설정할 수도 있습니다(여러 모니터를 사용하는 경우 매우 편리함).

반면에 Chrome 사용자인 경우 절차는 매우 유사합니다. 메뉴에 액세스하여 추가 도구 를 선택한 다음 개발자 도구 를 선택하기만 하면 됩니다.

개발자 콘솔 사용 방법

브라우저의 JavaScript 콘솔은 코드를 디버그하고, 스크립트가 기록하는 내용을 확인하고, 작은 명령을 실행하고 웹에 미치는 영향을 실시간으로 확인하는 데 매우 유용합니다. WordPress용 플러그인 개발자로서 콘솔이 제공하는 주요 유틸리티는 분명히 디버그이므로 정확히 무엇을 제공하는지 자세히 살펴보겠습니다.

#1 다양한 로그 수준

개발자가 일반적으로 JavaScript 콘솔을 여는 첫 번째 이유는 코드를 디버그하기 위해서입니다. 오류가 발생하거나 무언가가 실패하면 콘솔에서 이에 대한 정보를 찾을 수 있습니다. 원할 때 정보 메시지, 경고 또는 오류를 직접 실행할 수도 있습니다!

예를 들어 이전 스크린샷에서 console 개체(코드 디버그를 돕는 것이 목표인 전역 개체)에는 콘솔에 메시지를 작성하는 다른 방법이 있습니다.

• debug 및 log 는 일반 메시지를 표시합니다.
• info 는 정보 메시지를 보여줍니다. Firefox에서는 메시지 옆에 "정보" 아이콘이 표시됩니다.
• warn 은 일반적으로 문제나 올바르지 않은 것을 지적하는 경고를 표시합니다. 일반적으로 경고 아이콘과 함께 노란색으로 강조 표시됩니다.
• error 는 일반적으로 가장 심각한 오류(즉, 실제로 실패한 것)에 대해 예약됩니다. 빨간색으로 표시되고 스택 추적(즉, 어떤 함수가 오류와 모든 호출자를 생성했는지)도 인쇄합니다.

다른 로그 수준 을 사용하는 이점은 언제든지 표시할 메시지를 선택할 수 있다는 것입니다. 예를 들어 다음 스크린샷에서는 정보 및 디버그 메시지를 비활성화했습니다.

#2 실행 시간 모니터링

애자일에서는 "작동시키세요, 잘 만드세요, 빠르게 만드세요"라는 말을 자주 듣게 될 것입니다. "작동하도록" 코드를 작성한 후에는 결과가 느리고 비효율적일 가능성이 없습니다. 이런 일이 발생하면 병목 현상이 있는 위치를 식별하고 해결하는 것이 중요합니다.

프로파일러와 같은 도구가 있어 범인을 찾고 내부에서 무슨 일이 일어나고 있는지 아주 자세하게 이해하지만 때로는 "빠르고 더러운" 솔루션이 필요합니다. 즉, 우리는 단순히 우리 코드에서 가장 느린 함수를 식별하기를 원합니다. 간단한 타이머 는 이 작업에 적합합니다!

특정 코드를 실행하는 데 걸리는 시간을 알고 싶다면 코드 시작 부분( console.time )에서 타이머를 시작하고 코드가 완료되면 타이머를 중지( console.timeEnd )하세요.

 console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' );

코드가 timeEnd 에 도달하면 실행에 걸린 시간이 표시됩니다.

 Timer: 655ms - timer ended

타이머를 시작하고 중지할 때 이름을 지정합니다(예: "Timer"). 각각 고유한 이름을 가진 카운터를 원하는 만큼 만들고 모두 한 번에 실행할 수 있기 때문입니다.

# 3 자동 카운터

코드에서 함수의 실행 횟수를 제어하는 ​​데 관심이 있거나 루프가 실행된 횟수를 기록하려면 console.count 를 사용하십시오. 함수가 실행될 때마다 카운터의 현재 값이 포함된 새 로그가 콘솔에 표시됩니다.

#4 로그 형식 지정 방법

로그는 코드에 무슨 일이 일어나고 있는지 이해하는 데 도움이 됩니다. 그러나 그것은 우리가 나중에 이해할 수 있는 로그를 작성하는 경우에만 가능합니다...

텍스트 문자열

이 게시물의 시작 부분에서 console 에 있는 모든 로그 메서드에 대해 간략하게 이야기했습니다. 내가 공유한 예제는 일부 일반 텍스트를 인쇄했습니다. 즉, 이 진술은 다음과 같습니다.

 console.log( 'Hello world!' );

이 텍스트를 인쇄했습니다:

 Hello world!

대신 객체를 인쇄하고 싶다면? 글쎄, 이것은:

 obj = { x: 1, y: { a: 'hola' } }; console.log( obj );

다음과 같이 됩니다.

그러나 여러 항목을 기록하려면 어떻게 해야 합니까? console.log 를 여러 번 호출해야 합니까? 답은 아니오입니다. 필요하지 않습니다. 한 번의 호출로 원하는 모든 것을 기록할 수 있습니다.

로그 그룹화 중…

코드에 많은 로그가 있기 시작하면(예: 여기):

모든 로그가 단일 텍스트 스트림으로 병합되기 때문에 결과가 약간 혼란스러울 수 있습니다.

 Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6

운 좋게도 console 객체는 이 문제를 해결하기 위한 몇 가지 방법을 제공합니다: group 및 groupEnd . 그것들을 사용하여 로그 메시지를 그룹화할 수 있습니다. 그룹을 생성하기만 하면 됩니다(예: 기능당 하나의 그룹).

그러면 다음과 같이 표시됩니다.

테이블

데이터 수집으로 작업할 때 데이터를 시각화하는 것이 항상 쉬운 것은 아닙니다. 예를 들어 다음과 같은 항목 목록이 있다고 가정합니다.

 data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ];

console.log 로 기록하면 다음과 같습니다.

각각 더 많은 필드가 있는 더 많은 개체가 있을 때까지는 어느 정도 괜찮습니다. 이러한 유형의 데이터 구조에 직면할 때 로깅을 위해 console.table 을 사용하는 것이 좋습니다.

#5 복잡한 유형(객체 및 배열)을 올바르게 표시하는 방법

마지막으로, 많은 개발자들이 알지 못하는 것으로 오늘의 포스트를 마무리하고 싶습니다. 예를 들어, 당신이 프로젝트를 진행하고 있는데 그것을 업데이트하기 전과 후에 객체의 값이 무엇인지 알고 싶다고 가정해 봅시다. 이렇게 하려면 다음 GIF에서 볼 수 있듯이 변경하기 전과 후에 변수를 console.log 할 수 있습니다.

이전 예에서는 1로 설정된 값을 포함하는 개체를 기록합니다. 그런 다음 값을 200으로 업데이트하고 개체를 다시 기록합니다. 첫 번째 로그에는 항상 원래 값(1)이 표시될 것으로 예상하지만 개체를 ​​확장할 때 실제로 새 값 200이 표시되는 방법에 주목하십시오. 무슨 일이 일어나고 있습니까?

기본적으로 로그 메시지에는 개체에 대한 참조가 있으므로 확장하면 개체가 로그가 만들어졌을 때가 아닌 있는 그대로 표시됩니다. 젠장 가변성!

이 문제를 해결하려면 로그에 복사본을 보내십시오(lodash 및 해당 cloneDeep 메서드와 같은 라이브러리를 사용하면 매우 쉽게 만들 수 있음). 이렇게 하면 기록된 첫 번째 개체는 변경할 수 없는 복사본이 됩니다(참조가 없기 때문에).

오늘은 여기까지입니다! 이 게시물이 마음에 드셨으면 합니다. console 로 할 수 있는 모든 것에 대한 더 많은 정보를 원하시면 MDN의 문서를 확인하십시오. 친구들과 공유하는 것을 잊지 마세요? 그리고 다른 일을 하거나 독자들과 공유할 조언이 있으면 의견을 남겨주세요.

Unsplash의 Tim van der Kuip 이미지.