vscode 디 버 깅 node.js 의 실현 방법

개발 과정 에서 빈틈 이 없 는 프로그램 을 한꺼번에 쓸 수 없 을 정도 로 단점 디 버 깅 코드 는 보편적 인 수요 이다.
전단 개발 엔지니어 로 서 이전에 우리 가 개발 한 자바 스 크 립 트 프로그램 은 모두 브 라 우 저 에서 실행 되 었 으 며 크롬 이 제공 하 는 개발 자 도 구 를 이용 하여 소스 인 터 럽 트 디 버 깅 을 편리 하 게 할 수 있 습 니 다.그 절 차 는 네 가지 가 있 는데 상세 한 상황 은 나타 내지 않 고 대략 다음 과 같다.
Chrome 개발 자 도구 열기;Sources 탭 에 들 어가 면 페이지 왼쪽 에 JS 코드 의 디 렉 터 리 를 볼 수 있 습 니 다.정지점 을 설정 해 야 할 원본 파일 을 찾 습 니 다.중단 해 야 할 줄 코드 왼쪽 에 마우스 왼쪽 단 추 를 누 르 면 정지점 을 설정 할 수 있 습 니 다.코드 가 uglify 였 다 면 소스-map 를 가 져 와 서 원본 코드 를 매 핑 해 야 합 니 다.페이지 새로 고침(정지점 의 위 치 를 이벤트 처리 함수 로 설정 하면 이 이 벤트 를 직접 터치 하면 됩 니 다)코드 가 정지점 으로 실 행 될 때 프로그램 이 걸 립 니 다.이때 마우스 hover 를 사용 하면 현재 변수의 수 치 를 보고 절차 가 정상적으로 작 동 하 는 지 판단 할 수 있 습 니 다.

그러나 서버 에서 실행 되 는 Node.js 프로그램 을 자 바스 크 립 트 로 개발 할 때 크롬 개발 자 도 구 는 당분간 쓸모 가 없습니다.크롬 에서 디 버 깅 하 는 방법 도 있 지만 오늘 우리 가 토론 할 범위 가 아니다.
그리고 콘 솔 로 그 친구 말 하지 마 세 요.
실제로 많은 IDE 들 이 Debug 의 기능 을 통합 시 켰 는데,비교적 새로운 버 전의 WebStorm 을 포함 하여 Node.js 디 버 깅 에 잘 지원 되 었 다.
그러나 많은 개발 자 들 은 IDE 가 너무 무겁다 고 생각 할 것 이다.좀 더 경량급 의 도구 로 정지점 디 버 깅 을 실현 할 수 있 을 까?오늘 은 앤 리 에 게 VScode 에서 인 터 럽 트 디 버 깅 을 하 는 방법 을 알려 드 리 겠 습 니 다.

VScode 는 out-of-box 가 JavaScript 와 TypeScript 를 지원 하 는 것 외 에 Node.js 디 버 깅 도 지원 합 니 다.그야말로 전단 엔 지 니 어 를 위해 태 어 난 것 입 니 다.그 렇 죠?
Node.js 를 디 버 깅 하려 면 컴퓨터 에 Node.js 환경 이 설치 되 어 있 습 니 다.
뭐?Node.js 를 어떻게 설치 합 니까?작은 힌트 를 드 리 겠 습 니 다.바 이 두 를 열 고[Node.js 설치]를 검색 하 세 요.자,더 이상 힌트 를 줄 수 없습니다.
본 고 는 express 응용 을 디 버 깅 하 는 것 을 예 로 들 어 Node.js 운영 환경 이 설치 되 어 있다 고 가정 합 니 다.
express 응용 프로그램 만 들 기
우 리 는 express-generator 를 사용 하여 새로운 express 응용 프로그램 을 만 듭 니 다.
1.전역 에 express-generator 설치
a.터미널 을 열 고 입력:npm install express-generator -gMacBook 사용자 가 전체적으로 설치 할 때 앞 에 sudo 를 추가 하 는 것 을 기억 합 니 다.
b.설치 가 완 료 된 후에 터미널 에 입력express -v하면 다음 그림 에서 보 여 준 정 보 를 보면 설치 에 성공 했다 는 것 을 의미한다.

2.express 응용 디 렉 터 리 를 생 성 합 니 다.이 응용 프로그램의 이름 이 my app 이 터미널 에 입력express myapp하면 현재 디 렉 터 리 에 my app 디 렉 터 리 를 생 성 합 니 다.디 렉 터 리 구 조 는 다음 과 같 습 니 다.

이 작은 애플 리 케 이 션 은 이미 오장 이 완비 되 어 있 으 며,Node 서버 설정,공공 자원 폴 더,사제 폴 더,경로 설정 이 있 습 니 다.
3.express 응용 프로그램 실행
a.터미널 에 명령 을 입력 합 니 다.

cd myapp && npm install

프로젝트 디 렉 터 리 에 들 어가 모든 의존 도 를 설치 할 수 있 습 니 다.이 단 계 는 설치 가 완료 되 기 를 기다 리 는 데 시간 이 오래 걸 릴 수 있 습 니 다.
b.그리고 명령 을 입력 합 니 다.

npm start

애플 리 케 이 션 을 시작 할 수 있 습 니 다.
이때 우 리 는 브 라 우 저 에서 localhost:3000 을 방문 하면 다음 페이지 를 볼 수 있 습 니 다.

이것 은 express 응용 이 정상적으로 실 행 될 수 있다 는 것 을 설명 한다.그 다음 에 우 리 는 VScode 디 버 깅 코드 를 사용 할 수 있다.
알림:디 버 깅 할 때의 포트 충돌 을 피하 기 위해 서,우 리 는 먼저 express 응용 프로그램 을 실행 한 터미널 로 돌아 가,ctrl+c 는 실행 중인 express 응용 프로그램 을 닫 습 니 다.
디버그 express 응용
1.VScode 인터페이스 에 들 어가 면 화면 왼쪽 에 있 는 네 번 째 벌레 와 비슷 한 단 추 를 누 르 고 디 버 깅 인터페이스 에 들 어 갑 니 다.

2.페이지 상단'설정 없 음'드 롭 다운 메뉴 를 클릭 하고'설정 추가'를 선택 합 니 다.

3.Node.js 환경 을 선택 하 십시오.

4.선택 이 완료 되면 프로젝트 의 루트 디 렉 터 리 에'vscode'디 렉 터 리 를 생 성 합 니 다.이 디 렉 터 리 에는 다양한 VScode 편집기 의 설정 이 저 장 됩 니 다.현재 이 디 렉 터 리 에는 lanuch.json 이라는 파일 이 포함 되 어 있 습 니 다.프로필 의 내용 은 다음 과 같 습 니 다.

그 중에서 가장 중요 한 설정 항목 은'Program'필드 입 니 다.이 필드 는 전체 응용 프로그램의 입 구 를 정의 하고 디 버 거 를 열 때 이 입구 에서 응용 프로그램 을 시작 합 니 다.
현재 이 필드 에 값 이 있 음 을 발 견 했 습 니 다.당황 하지 마 세 요.VScode 가 이 프로필 을 초기 화 할 때 package.json 에 start 라 는 키 가 포 함 된 scripts 가 있 는 지 확인 하기 때 문 입 니 다.있 으 면 start 설정 내용 을"program"필드 의 값 으로 사용 합 니 다.
5.디 버 깅 시작 버튼(녹색 삼각형)을 누 르 면 디 버 깅 을 시작 할 수 있 습 니 다.이때 화면 위 에 디 버 깅 제어 판 넬 이 나타 납 니 다.페이지 오른쪽 아래 에 디 버 깅 콘 솔 이 나타 납 니 다.출력 정 보 를 볼 수 있 습 니 다.화면 아래 에 놓 으 면 상태 표시 줄 이 나타 납 니 다.현재 주황색 은 정상적으로 실행 되 고 있 음 을 표시 합 니 다.아래 그림 과 같 습 니 다.

6.우 리 는 다시 탐색 에서 localhost:3000 을 방문 하면 페이지 를 열 수 있 고 응용 프로그램 이 정상적으로 시작 되 었 음 을 발견 할 수 있 습 니 다.
7.다음 에 우 리 는 응용 프로그램 에 정지점 을 설정 하기 시작한다.저 희 는 my app/routes/index.js 파일 을 열 었 습 니 다.이 파일 은 루트 경 로 를 사용 하 는 경 로 를 설정 하 였 습 니 다.현재 처 리 는 한 페이지 로 돌아 가 문자열'Express'를 보기 의 매개 변수 로 전달 하 는 것 입 니 다.

8.우 리 는 마우스 로 줄 번호 6 의 왼쪽 단 추 를 누 르 면 정지점 을 설정 할 수 있다.정지점 을 추가 하기 전에 디 버 깅 을 닫 아야 합 니 다.닫 는 방법 은 인터페이스 위의 디 버 깅 제어 판 의 정지 버튼(빨간색 정사각형)을 누 르 는 것 입 니 다.

9.정지점 을 설정 한 후에 디 버 깅 을 다시 시작 한 다음 에 브 라 우 저 에서 localhost:3000 을 방문 합 니 다.이때 정지점 의 모양 이 바 뀌 었 습 니 다.프로그램 은 정지점 에 머 물 렀 고 디 버 깅 제어 판 의 버튼 도 변화 가 생 겼 습 니 다.왼쪽 에서 오른쪽으로 한 걸음 씩 건 너 뛰 고 한 걸음 으로 디 버 깅 을 하고 한 걸음 에 뛰 고 다시 시작 하 며 디 버 깅 을 중단 합 니 다.이 몇 개 는 모두 흔히 볼 수 있 는 정지점 디 버 깅 명령 이다.정지점 을 설정 한 후에 디 버 깅 을 다시 시작 한 다음 에 브 라 우 저 에서 localhost:3000 을 방문 합 니 다.이때 정지점 의 모양 이 변화 가 생 겼 습 니 다.프로그램 은 정지점 에 머 물 렀 고 디 버 깅 제어 판 의 버튼 도 변화 가 생 겼 습 니 다.왼쪽 에서 오른쪽으로 한 걸음 씩 건 너 뛰 고 한 걸음 으로 뛰 며 다시 시작 하고 디 버 깅 을 중단 합 니 다.이 몇 개 는 모두 흔히 볼 수 있 는 정지점 디 버 깅 명령 이다.


10.인터페이스의 왼쪽 에서 현재 상하 문 환경 을 볼 수 있 고 변수 감청 도 설정 할 수 있다.

11.마 우 스 를 정지점 앞의 변수 나 매개 변수 에 방지 하고 이 변수의 현재 수 치 를 볼 수 있 으 며 Chrome 개발 자 도구 의 디 버 깅 과 일치 하 는 것 을 체험 할 수 있 습 니 다.

vscode 디 버 깅 node.js 의 실현 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vscode 디 버 깅 node.js 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!