자바스크립트 소스에서 중단점이 안 되는 것 같을 때, pretty print

자바스크립트 소스에서 중단점이 안 되는 것 같을 때, 브레이크포인트에서 스코프를 보면, 실제로 잡혀있을 수도 있습니다. 이때에는 코드 최적화 덕분에 중단점이 상단에서 잡히는 경우가 있는데요~

디버깅을 하다 보면 브레이크포인트가 제대로 작동하지 않는 경우가 종종 있는데요, 이럴 때 'pretty print' 기능을 사용하면 큰 도움이 돼요. 특히, 최적화된 자바스크립트 코드를 디버깅할 때 문제가 많이 발생하죠. 코드를 압축하거나 난독화하면서 원래의 구조가 많이 변형되다 보니 중단점이 원하는 위치에 정확히 걸리지 않기도 하고, 코드 흐름을 파악하기 어려워지기도 해요. 이런 경우에 'pretty print'는 복잡한 코드를 깔끔하게 변환해 주는 중요한 기능이에요.

Pretty Print가 왜 필요할까요?

최적화된 자바스크립트 코드는 불필요한 공백이 제거되고, 변수가 축약되며, 코드가 한 줄로 압축되기 때문에 디버깅이 거의 불가능해 보여요. 이럴 때 'pretty print' 기능이 필요한 이유예요. 압축된 코드를 사람이 읽을 수 있는 형태로 재정렬해 주기 때문에, 코드 흐름을 쉽게 파악할 수 있고, 중단점도 정확한 위치에 설정할 수 있게 돼요.

Pretty Print 사용하는 방법

Chrome DevTools 열기: 먼저, 웹 브라우저에서 F12 키를 눌러 개발자 도구를 열어주세요. 그런 다음 'Sources' 탭으로 이동해요.
압축된 코드 선택: 압축되거나 난독화된 자바스크립트 파일을 찾아서 열면, 보통 코드가 한 줄로 길게 되어 있는 걸 확인할 수 있어요.
Pretty Print 버튼 클릭: 개발자 도구 하단에 있는 중괄호 모양 아이콘 {}(pretty print)을 클릭하면, 압축된 코드가 원래 구조로 변환돼요.
중단점 설정: 변환된 코드에서 중단점을 다시 설정해요. 이제 코드의 흐름이 더 명확해졌기 때문에 중단점이 정확한 위치에 걸리게 돼요.

Pretty Print의 장점

가독성 향상: 압축된 코드를 풀어줌으로써 가독성이 크게 향상돼요. 원래 코드 구조로 돌아가니 코드 흐름을 더 쉽게 이해할 수 있어요.
정확한 디버깅: 압축된 코드 상태에서는 중단점이 예상과 다르게 잡히는 경우가 많아요. 하지만 'pretty print'를 사용하면 중단점을 더 정확하게 설정할 수 있어서 디버깅이 훨씬 수월해져요.
빠른 문제 해결: 가독성이 높아진 덕분에 문제를 더 빨리 파악할 수 있어요. 최적화된 코드로 인해 발생한 중단점 문제도 쉽게 해결할 수 있어요.