잘못에 우롱당하지 마라

설령 오늘이 만우절이라 하더라도 나는 악작극을 하고 싶지 않다.반대로 나는 이 날의 정신으로 몇 가지 일을 써야 한다고 생각한다. 이런 일들은 항상 우리로 하여금 자신을 바보처럼 느끼게 하고 잘못을 일으킨다!모든 사람은 자신의 코드 디버깅 방법을 가지고 있다.그러나 나는 새로운 사물을 개발하는 데 가장 어려운 부분 중 하나가 이런 방법을 개발하는 것이라고 생각한다.이것은 내가 익숙하지 않은 코드 라이브러리에서 오류 원본을 찾을 때 따르려고 시도한 조작 순서이다.

컴파일할 때입니까 아니면 실행할 때입니까?

내가 디버깅을 깊이 있게 하기 전에, 당신이 만날 수 있는 두 가지 유형의 오류를 토론하는 것이 매우 중요하다.디버깅의 목표는 오류의 출처를 찾는 것이기 때문에 개발 과정에서 두 가지 다른 점이 오류를 일으킬 수 있다는 것을 기억하십시오.

컴파일 시간

컴파일할 때 오류가 미리 포착됩니다.일반적으로 구문 오류나 파일에서 오류를 찾을 수 없습니다. 강한 형식의 언어라면 형식이 일치하지 않는 오류일 수 있습니다.

error There was a problem parsing "/Users/laurie/Personal/practice/src/pages/index.js"; any GraphQL fragments or queries in this file were not processed.
This may indicate a syntax error in the code, or it may be a file type that Gatsby does not know how to parse.
 ERROR  Failed to compile with 1 errors                              12:39:25 PM

 error  in ./src/pages/index.js

Syntax Error: SyntaxError: /Users/laurie/Personal/practice/src/pages/index.js: Unterminated regular expression (14:30)

  12 |             {node.title}
  13 |             <ul>
> 14 |               <li>{node.year</li>
     |                               ^
  15 |               <li>
  16 |                 {"Characters"}
  17 |                 <ul>

이것은 괄호를 삭제함으로써 촉발된 문법 오류의 예이다
프로젝트를 구축하려고 시도할 때, 컴파일을 볼 때 오류가 발생할 때까지 기다릴 수 있습니다.그러나 코드를 작성할 때 구문 강조 표시가 있는 IDE나 다른 텍스트 편집기를 사용하면 일반적으로 컴파일 오류가 발생합니다.IDE에서 작성하고 있는 언어에 집중할 플러그인을 찾으려면 linter를 실행해 보십시오.이 모든 것은 관련 오류를 일으키기 전에 문제를 발견하는 데 도움을 줄 수 있습니다.

런타임

실행 중 오류는 코드가 실제 실행 중 발생한 문제와 관련된 오류입니다.이것은 우리가 통상적으로 프로그래머라고 생각하는 오류 유형이다.

Objects are not valid as a React child (found: object with keys {allMarvelYaml}). If you meant to render a collection of children, use an array instead.
    in div (at pages/index.js:8)
    in main (created by Context.Consumer)
    in div (created by Context.Consumer)
    in StaticQuery (created by Layout)
    in Layout (at pages/index.js:7)

이것은 내가 React에서 촉발한 오류의 예이다
이 글의 대부분 내용은 운행 시 오류의 근원을 찾아내는 데 집중될 것이다.

오류 메시지 및 스택 추적

실행 중 오류가 발생하는 첫 번째 단서는 보통 메시지와 보기 싫은 창고 추적의 조합입니다.이 글은 브라우저 콘솔, 터미널, IDE, 로그에 넣을 수 있습니다. 여러 가지 옵션이 있습니다!첫 번째 도전은 그것을 찾는 것이다.
알림: 실행 코드 명령을 실행하는 원본 코드 찾기
일단 이렇게 하면 오류 메시지의 내용과 창고 추적이 자원이다.때때로 이 기계들의 응답 중 가장 유용한 부분은 숨겨져 있다는 것을 기억하세요.과거의 인성화된 정보를 읽고 몇 줄을 내려다보면 무슨 소용이 있습니까?
식별할 수 있는 모든 것을 찾거나 코드에 비추는 것을 돕고 있다.변수 이름이나 줄 번호를 포함하는 것이 유용합니다.만약 네가 이런 것을 볼 수 없고, 또한 네가 천성적으로 잘못된 소식이 무슨 말을 하는지 이해하지 못한다면, 그것은 상관없다.

Objects are not valid as a React child (found: object with keys {allMarvelYaml}). If you meant to render a collection of children, use an array instead.
    in div (at pages/index.js:8)
    in main (created by Context.Consumer)
    in div (created by Context.Consumer)
    in StaticQuery (created by Layout)
    in Layout (at pages/index.js:7)

내 위에 포함된 이 잘못된 소식 기억나?우리의 오류가 색인에서 왔다는 것을 보여 줍니다.js 파일과 여덟 번째 줄은 매우 유용하다.이 예에서, 이것은 내가 대상을 사용할 수 없고, 문자열이나 다른 기본체를 사용해야 한다고 지적한다.
기억해야 할 또 다른 것은 오류 메시지가 코드의 결과일 수도 있다는 것이다.창고 추적에서 언급한 세부 사항은 사실상 근본적인 원인을 가리키지 않을 수도 있다.이것이 바로 촉발 오류가 이렇게 복잡하게 복구되는 원인이다!

이 오류는 바로 우리에게 원본 코드를 보여 주었다!불행하게도, 원본 코드는 우리가 작성한 것이 아니라,

구글 기계를 깰 때가 됐어요.

불행하게도, 오류 메시지가 종종 모호하거나, 창고 추적이 너무 깊어서, 우리는 코드와 관련된 어떤 부분을 확정할 수 없다.이것은 네가 이전에 의지했던 프로그래머의 세계다.
구글의 오류는 대략 프로그래머가 생계를 꾸리는 75퍼센트에 달한다.나는 농담하는 것을 좋아하지만, 늘 이런 느낌이 든다.구글을 잘 사용하는 것은 합법적인 기술로 당신의 생산력에 큰 영향을 미친다.구글로 특정 오류의 복구를 검색할 때 기억해야 할 것이 몇 가지 있다.

오류 메시지를 복사할 때 간단명료하게 유지하고 기본 코드에서 제공한 문자만 사용하십시오.가능한 한 많은 답을 포착하고 특정 코드의 변수 이름을 사용하면 이 오류를 발표한 다른 사람과 일치하지 않습니다.

기술을 포함한다.프로그램의 어느 층이 이 오류를 일으켰는지 알고 있다면, 구글 검색어에 포함시켜라.일반적으로 서로 다른 기술로 인해 발생하는 동일한 오류를 발견할 수 있으며, 이러한 방식으로 이러한 검색 결과를 제거할 수 있습니다.

구글에서 검색할 때 당신이 사용하는 구체적인 단어는 매우 중요합니다!
누군가가 잘못을 저질렀고, 그들이 어떻게 해결했는지를 발견하더라도, 이것은 항상 알고 있는 문제가 아니라, 그것을 이해할 수 없을 수도 있다는 것을 명심하세요.새 프로그래머 (심지어 이 기술의 초보 프로그래머) 는 이 응답 라인의 답안을 이해하기 어려울 수도 있다.문제의 배경에 대해 더 투철한 이해가 없다면 기술에 특정한 어휘표를 사용하기 어렵다.시간이 지날수록 해결책을 찾을 수 있는 다른 방법이 있다는 것을 명심해라.
사실 당신이 얼마나 멀리 갔는지 보고 싶다면 한 달 전까지 알지 못했던 구글 자원으로 돌아갈 수 있다.나는 네가 지금 할 수 있을 것이라고 내기한다.

반환 코드

위의 디버깅 절차는 규정적인 것이 아니다.때로는 특히 공부할 때 여기서부터 코드를 사용하는 것이 도움이 된다.상술한 절차를 마쳤든지 말든지 코드를 보는 것은 오류가 발생하는 원인을 밝히는 가장 좋은 방법이다.
최근에 추가된 코드 줄을 보기 시작합니다.마지막 2-3행 코드를 추가하기 전에 작업 중인 프로젝트가 있다는 것을 알면 잠재적인 원흉을 쉽게 찾을 수 있습니다.
만약 불행하게도 테스트되지 않은 코드를 대량으로 작성했다면, 변경 사항을 숨기거나 역작업을 시도하십시오.목표는 문제를 일으키는 코드 세션을 찾아서 복구하는 것입니다.주석은 오류 코드를 분리하는 또 다른 방법입니다. 나중에 추가할 진도를 삭제하지 않습니다.

디버거는 당신의 친구입니다...단점도 마찬가지다

코드가 실행될 때 한 걸음씩 실행해 보십시오.변수가 원하는 값에 할당됩니까?당신은 예상한 순서에 따라 조작을 진행했습니까?

이 정도는 할 수 있는 방법이 다르다.자바스크립트를 실행하고 있다면, 관리자를 사용하고 코드가 브라우저에서 실행될 때 인터럽트를 설정할 수 있습니다.IDE에서 코드를 직접 실행하는 경우 IDE 자체에서 중단점을 설정할 수 있습니다.
항목에 따라 변수의 결과를 인쇄하는 것이 더 쉽거나 코드의 어느 점에 인쇄할 수 있습니다.

getResults(searchString: string): void {
   this.githubSearchService.getUsers(searchString) // pull results
      .subscribe(result => {
        this.result = result;
        console.log("I AM HERE!")
        if (this.result) {
          this.items = this.result.items;
        }
   });
}

컨트롤러 로그 기록이나 인쇄 문장은 코드를 디버깅하는 매우 효과적인 방법이다.

렉 걸렸어요?

기억해라, 너는 언제든지 도움을 구할 수 있다.질문을 할 때 가능한 한 많은 정보를 제공하는 것이 중요하다.사용 중인 기술, 버전 번호, 오류, 스택 추적 등입니다. 코드를 JSFIDLE와 같은 공공 접근 가능한 환경에서 실행할 수 있도록 설정할 수 있다면 더욱 좋습니다!
디버깅은 오류를 해결하는 데 시간이 많이 걸릴 뿐만 아니라 사람을 낙담하게 할 수도 있는 기술이다.그러나 당신이 이 점을 알게 되면, 이것도 업무에서 가장 만족스러운 부분 중의 하나입니다!