안녕하세요. 엔지엠소프트웨어입니다. 개발자가 꼭~ 알아야 하는 디버깅입니다. 대부분은 IDE(통합 개발 환경, Integrated Development Environment)에서 개발, 컴파일, 디버깅등등... 모두 할 수 있습니다. 그런데~ Visual Studio Code의 Typescript 환경은 디버깅하기 위한 여러가지 셋팅이 필요합니다. 어쩔 수 없이 디버깅 정보를 담고 있는 설정 파일도 생성해야 하구요. 그래서, 대부분은 크롬 개발자 도구(DevTools)를 사용해서 디버깅하고 있습니다. 이건 개발자마다 개인차가 있는거라서 뭐가 좋다고 말하는건 아니구요^^; 일단, VSC에서 프로젝트를 실행(ng s, nx s)하면 터미널에 웹주소가 나옵니다. 콘트롤키를 누른 상태로 클릭하면 크롬이 실행됩니다. 크롬에서 F12를 누르면 개발자 도구가 열립니다.

개발할 때 주로 사용하는게 Elements, Console, sources 3개 탭입니다. 디자인 구조를 파악할 때 Elements를 사용하고, 값을 찍어보거나 로그를 확인할 때는 콘솔을 이용합니다. 타입스크립트를 디버깅할 때는 소스를 사용하는데요. 이 때 소스는 웹팩의 루트(.)에 들어 있습니다.

전체적인 파일 구조를 확인하려면 파일 시스템(Filesystem)에 작업 공간(Workspace)을 추가하세요.

개발자에게 후원하기

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~