개요
버그를 찾기 위해 크롬 디버거를 활용하던 중 로컬스코프의 특정 변수의 값이 실재함에도 불구하고 디버거에서는undefined로 표기되어 삽질을 하게되었고 이에대한 경위를 기록하려고하려고 한다.
크롬 개발자도구
크롬 개발자도구는에 source탭에서는 로드된 소스를 볼 수 있고 break point를 지정하여 특정 라인에서 퍼즈를 걸어 여러 스코프의 변수 및 객체의 값을 확인할 수 있고 특정 변수를 watch 할 수도 있으며 이 외에도 다양한 기능을 제공하여 개발에 많은 도움을 준다.
빌드된 소스를 디버깅
리액트 프로젝트를 실행하면 웹팩으로 js코드를 번들링하고 바벨로 타겟 es버전에 맞게 트랜스파일링 하는 과정을 거쳐 실제 브라우저에서 실행 되는 소스는 개발했던 코드와 다르다. 하지만 빌드 과정에서 원본 js파일을 소스맵(*.js.map) 형태로 제공하기 때문에 브라우저에서도 원본 소스를 확인할 수 있고 디버깅도 할 수 있다.
이슈
개발 서버에서 크롬으로 디버깅을 하던 도중 특정 변수에 값이 존재할 수 밖에 없는데 undefined라고 표기되는 이슈가 있었다. 로컬에서 실행시켰을 때는 정상으로 표기되었지만 개발서버에서만 그렇게 표기되어서 처음엔 빌드이슈로 착각해 소스를 이래 저래 바꿔가면서 다시 개발서버에 배포하는 과정을 여러번 거치면서 삽질을 하게 되었다. 하지만 계속 파고들다 보니 빌드 이슈가 아닌 코드에 버그가 있었고 버그를 해결하니 개발서버에서도 잘 동작 했다. 개인적인 추측으로는 크롬 디버거가 소스맵을 통해 디버깅을 하는 과정에서 발생하는 버그같다. 개발서버에서 디버깅을 할 때는 크롬 디버거를 완벽하게 믿으면 낭패를 볼 수도 있음을 기억해야겠다.
