🐞

Debugging with Browser

디버깅을 알아야 하는 이유

에러가 발생했을 때 멘탈을 부여잡고 빠르게 해결하고 싶다면 주먹 구구식으로 문제를 해결하기 보다는, 체계적인 프로세스를 만들고 싶다면

이 문서를 보고 나면

디버깅 하는 단계를 스스로 정할 수 있다.

브라우저에서 디버깅을 할 수 있다.

디버깅

디버깅(debugging)은 스크립트 내 에러를 검출해 제거하는 일련의 과정을 의미합니다. 모던 브라우저와 호스트 환경 대부분은 개발자 도구 안에 UI 형태로 디버깅 툴이 있습니다. 이 디버깅 툴을 사용하면 코드 실행 단계마다 어떤 일이 일어나는지를 코드 단위로 추적할 수 있습니다. 주로 많이 사용하는 도구는 Chrome 브라우저에서 제공하는 디버깅 툴입니다. 기능이 다양하고, Chrome에 익숙해지면 다른 브라우저에서 지원하는 디버깅 툴은 쉽게 익힐 수 있기 때문입니다.

디버깅의 단계

정상 시스템의 동작, 그러니까 기대하는 동작을 정의한다.

원인을 섣불리 추측하지 않고, 일단은 "모른다"고 생각하고 출발한다.

근본적인 원인을 알 때까지 최대한 많은 데이터를 모으며 현상을 관찰한다.

증상이 아닌 원인을 수정한다.

이걸 프론트엔드 개발의 관점에서 버그를 정의할 때는 크게 세가지가 필요합니다.

1. 재현 과정

보통 백엔드의 경우 어떤 데이터가 입력되고, 출력이 되었는지 로그를 보면 됩니다. 하지만 프론트엔드의 경우 사용자의 행동이 있어야 발생하는 버그가 대부분이고, 버그가 발생하는 경우가 사용자의 환경에 따라 달라집니다. 그러한 환경에 따른 버그들을 해결하려면 구체적인 재현 과정이 필요한데요. 그래서 자세한 재현 과정을 기록해두고 해결해 나가는 과정이 필요합니다.

2. 기대 동작

어떤 경우 기술적으로는 정상 동작이지만, 사용자 경험에 있어서는 에러라고 표현할 수 있는 것들도 있습니다. 예를 들어 수강신청 버튼을 클릭했는데 수강 신청이 잘 되었다는 페이지가 뜨기까지 5초가 걸렸다고 해봅시다. 이건 에러일수도 아닐 수도 있습니다. 에러가 되려면 '수강 신청은 최대 3초안에 완료되어야 한다'와 같은 기대동작이 있어야 합니다. .

3. 에러 메시지

브라우저 콘솔에 에러 메시지가 나타나는 버그는 상대적으로 원인을 발견하기 쉬운 편입니다. 하지만 에러가 나타나는 버그 중 많은 부분들이 오타. 변수나 함수 이름을 잘못 쓰는 경우들입니다. 컴파일을 하지 않는 JS는 실행해보기 전에는 에러를 알 수 없는 언어라서 이런 에러를 흔하게 만나게 만나게 됩니다.

요즘 브라우저나 프레임워크는 에러 메시지를 굉장히 친절하게 보여주는 편이고 이걸로 검색하면 어지간한 문제는 다 확인할 수 있 있습니다. 그래서 단순히 동작이 안된다라고 생각하기 보다는 에러 메세지를 꼼꼼히 읽는 습관을 들여주세요.

그런데 에러 메시지가 나타나지 않는 문제라면 조금 더 복잡해집니다. 백엔드와 다르게 프론트엔드에는 보통 개발용 로그를 수집하지 않습니다. 수많은 사용자의 로그를 다 보관하는 게 사실상 불가능할 뿐더러 비효율적이고 자칫하면 프라이버시 관련해서 법적인 문제가 될 수도 있기 때문인데요. 이럴 때는 결국 역순으로 찾아가는 수 밖에 없습니다. 버튼을 클릭하면 안내 메시지가 나타났어야 하는데 나타나지 않는다면 버튼을 클릭하는 순간부터 안내 메시지를 표시하는 순간까지 존재하는 모든 과정을 다 점검해봐야 합니다. 그래도 다행히 이런 과정은 기록하고 남기는걸 Cypress와 같은 도구들을 통해 보다 편리하게 체크할 수 있으니 테스트 도구와 더 친해지면 좋을 것 같습니다.

브라우저에서의 디버깅

사용자가 직접 만나고 보게 되는 브라우저에 환경에서 우리는 디버깅을 할 수 있어야 에러를 보다 빨리 해결할 수 있는데요. 브라우저에 있는 개발자 도구들에서 테스트해볼 수 있는 기능들에 대한 영상을 통해 함께 확인해볼게요! 이번에 다 알지 못하더라도 이런 도구들이 있구나 정도로 알아주시면 좋을 것 같아요!

vscode에서의 chrome Debugging과 Debugger 아키텍처

vscode에서도 편리하기 크롬 디버거를 사용할 수 있는데요. vscode에서 크롬 디버거에 직접적으로 사용가능한 이유는 무엇일까요? 디버거의 아키텍처가 궁금하다면 아래 영상을 통해 추가 궁금증을 해결해보세요!

참고 링크

•

https://en.wikipedia.org/wiki/Debugging

•

https://ko.javascript.info/debugging-chrome