코드 디버깅으로

console.log JavaScript 코드를 디버깅한 지 오래되었습니다.로컬 또는 생산, 프런트엔드 또는 백엔드, 그것은 단지 작업일 뿐이다.이 글에서, 나는 네가 로그 기록을 디버깅하는 다른 방법을 시도하도록 설득하려고 할 것이다. 이것은 너의 미래의 자랑이 될 것이다.
오해하지 마세요. 저를 좀 사랑해요.그것의 단순성과 이식성은 약간 우아하다.브라우저 컨트롤러나 노드 백엔드에 놓으면 코드의 운행 상태를 즉시 알 수 있습니다.

위로하다로그 문제

디버깅에 도움이 되지만 console.log 문장이 시끄럽다.
최근 몇 년 동안 내가 종사한 거의 모든 JS 프로젝트는 모종의 linting 규칙이 있어서 console.log 문장을 코드 라이브러리에 서명하는 것을 허락하지 않는다.일반적으로 이것은 매우 좋은 방법이다. 왜냐하면 생산 중에 어떤 비관건적인 메시지를 표시하면 로그 기록을 증가시키고 대량의 쓸모없는 소음을 도입하기 때문이다🔊.
예를 들어 다음은 ESPN의 작은 컨트롤러 발췌문이다.일반 도메인 이름 형식🤮:

개발자들의 울부짖음과 로그 서비스 예산의 범람을 거의 들을 수 있었다.
코드 라이브러리에 console.log 문장을 제출하는 것을 피해야 한다는 교훈이다.

🔴 끊길까요?

이 점에서 너는 아마 생각할 것이다.

Couldn't we open up the production code in Dev Tools and drop a breakpoint in there?

좀 그렇지만 사실은 아니에요.생산 코드는 거의 항상 파괴되고 축소된다.내 경험에 따르면 절반의 가능성 의 원시 코드를 사용할 수 있다.
만약 네가 운이 좋다고 가정한다면, 너는 지도를 가지고 있다.버그의 기원이라고 생각하는 곳에 단점을 두십시오.보통 이것은 빙산의 일각일 뿐이다.그리고 너는 좀 더 깊이 들어가서 다른 단점을 놓아라.잘못된 출처를 찾을 때까지 씻고 반복합니다.지금까지 당신은 자신의 단점에 걸려 넘어져서 부주의로 jQuery 내부로 들어갔고 도중에 상하문을 잃었습니다.
중단점은 브라우저에서만 사용할 수 있다는 것을 기억하십시오.백엔드 코드는 이런 방식으로 접근할 수 없습니다.따라서 설령 이것이 고객의 문제를 완전히 해결했다 하더라도 등식의 절반에 불과하다.
클라이언트와 서버에서 더 좋은 방법이 있어야 합니다.
로깅 패키지source maps를 입력합니다.

디버깅 👼 디버깅을 사용하여 디버깅

몇 년 전, 나는 우연히 debug은 이라는 것을 발견했다.debug 라이브러리는 전형적인 로그 기록 패키지가 아닙니다.로그를 표시하거나 기록하거나 추적하거나 보내지 않습니다.기본적으로 그것은 하나입니다.환경 변수를 통해 활성화해야 결과가 발생합니다.

신드레 소후스 ⛺ 설치 프로그램

import debug from 'debug';

const log = debug("apollo"); // an arbitrary namespace

log("✅ We're cleared for launch"); // log something

아마도 당신을 놀라게 할 것은 위의 코드는 어떤 내용도 기록하지 않을 것이다.앞서 언급한 바와 같이, 우리는 먼저 로그 기록을 열어야 한다.
이것은 당신의 환경에 달려 있습니다.
예:

서버에서: debug

브라우저에서: export DEBUG=apollo

간단하게 말하자면, 우리는 본문의 나머지 부분에 로그 기록을 사용했다고 가정할 수 있다.

👾 이름 공간

위의 코드를 계속하십시오. 우리는 다른 이름 공간을 가진 로그 실례를 추가했습니다.

import debug from 'debug';

const log = debug("apollo");
const logLaunch = debug("apollo:launch");

log("✅ We're cleared for launch");
logLaunch(`⏳ T-minus 10 seconds`);
// ...waits 10 seconds
logLaunch("🚀 We have lift-off");

그러면 다음과 같은 로그 메시지가 나타납니다.

곧 우리가 이곳에서 좋은 정보를 얻었다는 것을 알게 될 것이다.

네임스페이스의 색상은 구분하기 쉽도록 고유합니다

각 문장의 접두사는 로그 메시지 사이의 시간

특히 당신도 localStorage.debug = 'apollo' 같은 대상을 기록할 수 있습니다.

log("📨 Form values", { values });

...근데 잠깐만. 더 있어.

🧮 와일드카드 필터링

우리가 로그 기록을 사용하기 위해 설정한 환경 변수를 기억하십니까?이 변수의 값은 와일드카드 문자열일 수 있습니다.
몇 가지 예로 설명할게요.
브라우저에서 console.log 는 다음 값 중 하나로 설정됩니다.

localStorage.debug - 레코드만apollo 네임스페이스

apollo - 기록apollo:*으로 시작하는 모든 네임스페이스

apollo: - apollo:*,-*launch*로 시작하는 네임스페이스를 기록하며apollo: 네임스페이스를 포함하지 않음

이것은 상당히 강대하다는 것을 증명한다.

💼 하나의 진실한 용례

새 Reactlaunch 구성 요소를 만들고 있다고 가정하십시오.이 구성 요소 내부에서 로그 실례 AirScrubber 를 명명했습니다.그리고 구성 요소를 개발할 때 전체 과정에서 apollo:air-scrubber 메시지를 추가합니다.이것들은 구성 요소의 일종이다 .

const log = debug("apollo:air-scrubber");
const logInit = debug("apollo:air-scrubber:init");
const logScrub = debug("apollo:air-scrubber:scrub");

const init = (config) => {
  logInit("🗂️ Air scrubber initializing...", { config });
  // Do initialization work...
  logInit("👍 Air scrubber initialized");
};

const isAirQualityLow = () => { ... };

const scrub = () => {
  logScrub("🧽 Scrubbing air...");
  // Do scrub work
  logScrub("🏁 Air scrubbed.");
}

const AirScrubber = () => {
  init();

  if (isAirQualityLow()) {
    log("🚬 Air quality is low. Starting to scrub...");
    scrub();
  }
};

export { AirScrubber };

어서 미래로...💥 사용자가 생산 중 오류 debug 를 발견했습니다.
당황하지 마.우리는 이 구성 요소를 신속하고 정확하게 분류하는 방법이 있다.
방법은 다음과 같습니다.

개발 도구 콘솔 열기

다음 명령 실행

localStorage.debug = 'apollo:air-scrubber*';

구성 요소와 상호작용을 하면 로컬 개발 기간에 작성한 모든 디버깅 로그를 볼 수 있습니다. 원본 맵, 인터럽트, 심지어 우리의 오랜 친구AirScrubber

에 의존할 필요가 없습니다.

동갑내기와 미래의 자신에게서 5점

CliffNotes 회사 💻 서버 쪽은요?

개발 도구에서와 같이 서버의 console.log 환경 변수를 디버깅 로그 기록을 사용할 수 있는 모든 값 으로 설정합니다.완료되면 새 값을 가져오고 출력을 추적하기 위해 프로그램을 다시 시작해야 합니다.
디버그 메시지는 클라이언트에서 본 것과 같은 외관을 출력합니다.

입도 📘 총결산

사용DEBUG...

항상 모든 로그 메시지 생성

소음이 커서 잠재적인 문제를 덮었다

코드 라이브러리에 제출할 수 없음

사용console.log...

개발자가 생산 팽창을 걱정할 필요가 없는 상황에서 로그 기록을 할 수 있도록 허용

허용 조건 세부사항(필요한 내용만 기록)

이름 공간

을 통해 복잡한 시스템에 로그 입도 제공

읽기 쉬운 로그 메시지 표시

로컬 개발

과 같은 방식으로 디버깅 가능

코드 라이브러리에 주력해야 한다

👷‍♂️ 행동을 취하다

다음에 자신이 글을 쓰고 있다는 것을 알게 되면 정보의 가치를 고려하는 데 시간을 들여라.

이 소식이 장차 나를 도와 디버깅을 할 수 있을까?

이것은 신입 사원들이 미래의 시스템을 이해하는 데 도움이 됩니까?

만약 두 문제의 답이 모두 debug 이라면 console.log 로그로 바꾸는 것을 고려해 보십시오.
다음 버그를 추적할 때, 이 디버깅 소식들은 매우 귀중한 것으로 증명될 것이다.
내가 틀렸나?나의 관점에 동의하십니까?문제가 있습니까?평론에 나에게 한 줄을 쓰고, 나에게 큰 물렁이를 남겨 주시오♥️ 반짝반짝 빛나는 똥🦄.
오늘 게시물은 VSCode의 "브라우저에서 포커스 파일 열기"바로 가기에서 가져온 것입니다: 명령 + 아래쪽 화살표