cs09g 블로그

웹 개발을 하다보면 브라우저에 디버깅의 대부분은 브라우저에서 이루어 진다. 프론트엔드의 경우 99% 비율로 브라우저에서 디버깅을 하게 된다. 좀 더 손쉬운 디버깅을 위해 라인 넘버를 클릭해 중단점을 걸어 디버깅을 진행하는 방법이 있다. 하지만 반복문의 특정 인덱스에 대한 디버깅이나 비동기로 실행되는 코드가 특정 값을 반환하는 경우에만 디버깅을 하는 것은 위 방식으로는 상당히 번거롭다. 좀 더 나은 방법으로는 코드에 debugger 키워드를 활용하여 원하는 조건과 함께 작성하는 것이다. 다음과 같이 사용해 볼 수 있다. // 1. 반복문 for (let i = 0; i < 100; i++) { if (debuggingCondition) { debugger; } ...someLogicHere... } // ..

크롬 개발자 도구로 디버깅을 하던 도중, 작성한 파일명이 아닌 VM으로 시작하는 파일이 열리며 하이라이팅이 잘못 표시되는 현상이 발생했다. VM으로 시작하는 파일은 블랙박스로 간주되는 것으로 eval, iframe 등을 사용하면 나타난다고 하는데, 내 코드에는 그런 부분이 없었다. 같은 이름의 파일이 여러번 로드되면 그런 경우가 발생할 수도 있다고 하는데, 코드에서 여러번 같은 파일을 로드하지도 않았다. 중단점과 관련한 이슈가 많았는데 그런 경우에는 debugger라는 키워드를 코드에 삽입하여 코드를 중단시키면 된다는 것이었는데 나의 경우에는 중단점이 걸리긴 하나 중단점과 무관한 위치에서 코드가 멈추어 있었다. 개발자도구를 껐다가 다시 켜고, 캐시도 제거해보았으나 현상은 계속 발생하였다. 그러던 중 UR..