최근 VS Code 개발 환경에서 디버깅 경험을 혁신할 수 있는 새로운 확장 프로그램 'Inline Logs'가 공개되었습니다. 이 도구는 개발자가 `console.log`로 출력하는 값은 물론, 발생한 오류나 네트워크 요청(fetch, WebSocket) 결과까지 해당 코드가 있는 줄 바로 옆에 표시해 줍니다. 별도의 설정 없이 VS Code 터미널에서 앱을 실행하기만 하면 작동하며, 무료로 제공되는 오픈소스 솔루션입니다.
Inline Logs는 단순히 값을 보여주는 것을 넘어 다양한 고급 기능을 제공합니다. 여러 번 실행된 라인의 로그는 실행 횟수를 표시하고, 마우스를 올리면 각 실행 시간과 값을 확인할 수 있습니다. `console.table`, `console.dir`, `console.trace` 같은 복합적인 로그도 시각적으로 지원하며, Pino, Winston, Consola 등 인기 로깅 라이브러리와도 연동됩니다. 또한, 파일 내 모든 `console` 호출을 주석 처리하거나 제거하는 기능, 로그 뷰어에서 검색 및 필터링, 값 비교(diff), 심지어 AI 도구가 로그를 읽을 수 있도록 MCP 서버를 제공하는 기능까지 포함하고 있습니다. Node.js, Next.js, Vite, Bun, Deno 등 광범위한 자바스크립트(JavaScript) 및 타입스크립트(TypeScript) 개발 환경에서 작동하며, 브라우저 개발 서버와도 연동되어 클라이언트 측 로그까지 통합 관리할 수 있습니다.
이 확장 프로그램은 개발자들이 디버깅에 소요되는 시간을 크게 줄여줄 잠재력을 가지고 있습니다. 기존에는 `console.log` 결과를 보기 위해 터미널이나 개발자 도구를 오가며 맥락을 전환해야 했지만, Inline Logs는 코드와 로그를 한 화면에 통합하여 흐름을 끊김 없이 유지할 수 있도록 돕습니다. 이는 특히 복잡한 비동기 로직이나 여러 모듈이 얽힌 대규모 프로젝트에서 문제의 원인을 빠르게 파악하고 해결하는 데 큰 도움이 될 것입니다. 개발 생산성 향상과 더불어, 오픈소스 생태계에 기여하고 개발자 경험을 개선하려는 노력의 좋은 예시로 평가할 수 있습니다.