Chrome DevTools 환경
Client Side 디버깅
크롬 DevTools의 Sources 탭에서 에러의 원인을 추적 할 수 있습니다.
API에서 network Error가 일어나는 상황을 예시로 들어보겠습니다.
Network Tab에서 에러가 발생한 요청이 기록되고 있고,
Console Tab에 console.error 가 출력되고 있습니다.
Sources Tab에서 BreakPoints 옵션에 체크를 해주면 console.error가 코드의 어디에서 출력되었고, 해당 코드까지 어떤 데이터가 전달되었는지 또한 확인 할 수 있습니다.
Server Side 디버깅
next 명령어를 실행 할 때, prefix로 NODE_OPTIONS='--inspect'를 추가합니다.
추가 후 서버를 실행하면, 터미널에서 Debugger가 켜졌다는 것을 확인 할 수 있습니다. 그 후 크롬브라우저에서 "chrome://inspect"로 이동합니다.
크롬 브라우저에서 Remote Target에 Inspect 대상으로 프로젝트가 잡힌 것을 확인 할 수 있습니다. 여기서 Inspect를 누르면, Remote Target에 대한 크롬 DevTools가 뜨게 됩니다.
새로 생성된 DevTools 창에서는 Server-Side-Code를 마치 Client-Side의 환경과 같이 디버깅 할 수 있습니다.
빛나는 개발자