JavaScript에서 디버깅

Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.

Benjamin Kernighan

디버깅은 소프트웨어를 공개하기 전에 소프트웨어의 오류를 찾아 수정하는 소프트웨어 테스트 프로세스의 일부입니다. 수정 코드를 삽입하는 것뿐만 아니라 결함 코드를 제거하는 작업도 수반됩니다.

또한 소프트웨어 개발자가 코드에서 일이 발생하는 이유와 방법을 이해하는 데 도움이 됩니다. 결과적으로 디버깅은 소프트웨어 개발자가 더 빠르고 더 잘 배울 수 있도록 도와줍니다.

디버깅할 오류 유형

1. 구문 오류

프로그래밍 규칙을 위반하면 구문 오류가 발생합니다. 예를 들어, 키워드 철자가 틀리거나, 선언되지 않은 변수를 사용하거나, 여는 괄호를 닫지 못하는 경우입니다.

구문 오류는 프로그래밍 언어의 구문 규칙에 따라 다릅니다.
구문 오류가 발생하고 오류가 발생하면 프로그램 실행이 중지됩니다. 따라서 구문 오류를 찾는 것이 상대적으로 쉽습니다.

2. 논리 오류

프로그램이 예기치 않은 출력을 생성할 때 논리 오류가 발생합니다. 이러한 오류는 일반적으로 다음과 같은 알고리즘 문제로 인해 발생합니다.

프로그램 설계가 잘못되었습니다. 순서도를 사용하여 코드 흐름 시각화

break 문 없이 무한 루프 생성

부울 또는 논리 연산자의 잘못된 사용

다른 개체에 대해 동일한 변수 이름을 사용함

The key difference between logic and syntax errors is that a program with logic error will run but produce an unexpected result. On the other hand, a program with logic error will not run.

3. 런타임 오류

장치의 코드와 상호 작용할 때 발생하는 다른 오류와 달리 런타임 오류는 사용자가 소프트웨어와 상호 작용할 때 발생합니다.

예를 들어 사용자가 단추를 클릭하여 정의되지 않은 메시지를 반환하는 5개 요소 배열의 여섯 번째 요소를 표시하는 경우입니다.

JavaScript에서 디버깅하는 방법

JavaScript 코드를 디버깅하는 일반적인 방법은 다음과 같습니다.

콘솔 사용

콘솔 개체는 Windows의 경우 ctrl + shift + I, Mac의 경우 command + option + k를 사용하여 브라우저 디버깅 콘솔에 대한 액세스를 제공합니다.

JavaScript 개발자로서 상호 작용해야 하는 console.log() 메서드 외에도 몇 가지 다른 콘솔 메서드가 있습니다.

JavaScript 콘솔 방법

console.log()

Console.log()는 콘솔에 출력을 출력합니다. 프로그램의 입력 또는 출력을 확인하는 데 사용할 수 있습니다.
예를 들어;

  const sum = function( x, y){
    return x + 'y'
  } 
  sum(2,'3')

우리는 위의 함수가 5를 반환할 것으로 예상하지만 23을 반환합니다. 인수가 정적이기 때문에 여기에서 오류를 발견하는 것은 매우 쉽지만 인수가 다른 함수에서 동적으로 수신된 경우 어려울 수 있습니다.

함수의 각 매개변수를 console.log하여 해당 유형을 확인할 수 있습니다.

  const sum = function( x, y){
    console.log(typeof x, y) // prints number string
    return x + 'y'
  } 
  sum(2,'3')

2.console.table()

console.table()은 배열 또는 객체를 테이블로 표시합니다. 다양한 객체 키와 해당 값을 시각화하는 데 도움이 됩니다. 예를 들어;

const user = [
  { name: "Erica", role: "Admin", department: "IT", },
  { name: "Wanja", role: "Hr", department: "IT", },
];
console.table(user);
//output 

┌─────────┬─────────┬─────────┬────────────┐
│ (index) │  name   │  role   │ department │
├─────────┼─────────┼─────────┼────────────┤
│    0    │ 'Erica' │ 'Admin' │    'IT'    │
│    1    │ 'Wanja' │  'Hr'   │    'IT'    │
└─────────┴─────────┴─────────┴────────────┘

3.콘솔.그룹()

구별하기 어렵다는 콘솔 메시지를 여러 번 받은 적이 있습니까? console.group()을 사용하면 콘솔 메시지를 들여쓰기된 블록으로 그룹화하는 데 도움이 됩니다. 더 좋은 방법은 라벨을 추가하여 식별하는 데 도움을 주는 것입니다.

콘솔 그룹을 종료하려면 아래와 같이 console.groupEnd()를 사용하십시오.

function userData(users_details){
  console.group('userData')
  console.log('first user', users_details[0].name )
  console.groupEnd()
}
userData(user) 
/*output
userData
  first user Erica
*/

콘솔.추적()
대규모 코드베이스와 상호 작용할 때 다양한 함수가 선언된 위치를 이해하기 어려울 수 있습니다. Console.trace()는 함수의 호출 경로를 추적하는 데 도움이 됩니다.

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

출력;

console.assert()

Console.assert는 표현식이 false로 평가되는 경우 콘솔에 메시지를 인쇄합니다.

구문: console.assert(expression, message)

 console.assert(x + y == 11, "Expression returned false");

 // prints the message if the sum is not equal to `11 

디버거

debugger 키워드는 코드 실행을 중지하고 사용 가능한 디버깅 기능을 호출합니다.

브라우저에서 아래 코드를 실행하고 debugger가 작동하는지 검사합니다. JavaScript 디버거 및 중단점을 이해하기 위해 이를 확인할 수 있습니다.

let a = 3;
let b = 5;

debugger;
console.log(a*b)

3. 마지막 말

날 따라와

디버깅에 대한 추가 리소스