더 스마트한 코드; 디버거 사용

어제 친구가 문제를 디버깅하는 것을 돕고 있었습니다. 그는 막 PHP를 배우기 시작했고 HTML/CSS/JS로 인증 로그인 페이지를 만들고 있었습니다.

버그는 이상했습니다. 그의 클라이언트 측 자바스크립트에는 항상 false로 확인되는 if 문이 있었습니다.

if (response.html == "OK") {
  // Response Success
  console.log("This Print Statement Never Executes")
} else {
  // Error Occurred
  console.log("This Print Statement Always Executes")
}

response.html가 "OK"와 같지 않은 이유에 대한 표시가 없었습니다. 백엔드 로그는 괜찮아 보였고 클라이언트 네트워크 로그는 응답에서 "OK"를 표시했습니다.

내 친구는 도대체 무슨 일이 일어나고 있는지 알아내려고 하루 종일을 보냈다. 그는 결국 나에게 전화를 걸어 볼 수 있는지 물었습니다.

순간

초기 검사에서 모든 것이 괜찮아 보였습니다. 이것이 작동하지 않는 이유를 즉시 말할 수 없었습니다. 그래서 디버거를 시작하기 위해 chrome devtools에 뛰어 들었습니다.

몇 가지 중단점을 설정하고 1분 만에 문제를 발견했습니다. 백엔드 응답은 "\nOK"였습니다. 하나의 미미한newline이 문제였습니다.



내 친구는 console.log()를 사용하여 디버깅하는 대안이 있다는 것을 믿을 수 없었습니다. 나는 그에게 코드에 중단점을 배치하고, 코드 실행 중간에 일시 중지하고, 프로그램 상태를 확인하고, 이 정보를 사용하여 작동하지 않는 이유를 파악하는 방법을 보여주었습니다.

그가 얼마나 기뻐했는지를 보고 이 이야기를 나누도록 동기를 부여했습니다. 버그에 걸리고 문제를 해결하기 위해 모든 곳에서 인쇄 문을 작성하기 시작하면 디버거를 사용하는 것이 좋습니다.

웹 개발을 하고 있다면 Chrome에는 브라우저에 내장된 환상적인 개발 도구가 있습니다. Here are their docs 클라이언트 측 자바스크립트 앱에서 디버깅 중단점을 설정하는 방법에 대해 설명합니다.

결론

내 목표는 현재 디버거를 사용하지 않는 사람들이 마침내 디버거를 사용하도록 영감을 주는 것입니다. 참고로 저는 전문 개발자로서 제 시간의 30% 이상을 디버거에서 보냅니다. 그만큼 유용합니다.

독학으로 길을 가고 있다면 시간과 에너지를 충분히 활용해야 합니다. 디버거를 사용하여 더 어렵지 않고 더 똑똑하게 코딩하십시오. 여행이 훨씬 쉬워질 것이라고 장담합니다.

더 많은 웹 개발 팁을 원하십니까? 나를 팔로우하고 내 웹 개발 뉴스레터를 구독하세요.

게시물Code Smarter; Use a Debugger은 💻 Web Dev With Seb에 처음 등장했습니다.