PRO처럼 디버그(VsCode의 디버거) - 시리즈 1

디버깅은 소프트웨어 개발과 관련하여 일상적인 작업입니다. 팀에서 작업하든, 혼자 작업하든, 오픈 소스 프로젝트에 기여하든, 우리 모두는 버그에 직면합니다. 이러한 버그는 구문 오류, 잘못된 알고리즘, 종료되지 않은 루프 등으로 인해 발생할 수 있습니다. 이러한 버그를 수정하려면 먼저 버그를 찾아야 하며 이 전체 프로세스를 디버깅이라고 합니다.

이 문서에서는 Visual Studio Code에서 직접 코드를 디버깅하는 방법을 알아봅니다. 예제에서는 JavaScript 애플리케이션을 사용합니다.

전제 조건

Visual Studio Code

Node.js

nodemon (선택 사항이지만 이 튜토리얼에서 사용됨)

비주얼 스튜디오 코드

Visual Studio Code에는 편집기에서 직접 애플리케이션을 디버깅하는 데 도움이 되는 내장 도구가 있습니다.


Visual Studio Code의 디버거 아이콘을 사용하면 실행 중인 앱을 시작하거나 연결하고 중단점, 호출 스택 및 대화형 콘솔을 사용하여 디버그할 수 있습니다.

시작하고 실행해 보겠습니다.

구성

방법 1 - 실행 및 디버그

이미지 a)

Visual Studio Code에서 열린 탭이 디버그 가능한 파일이 아닌 경우 파일 열기를 클릭하고 디버그할 파일을 선택합니다.

이미지 b)

열린 탭은 디버깅 가능한 파일입니다. 진행 중인 캠페인 목록에서 만료 날짜가 있는 캠페인을 제거하는 JavaScript 파일을 디버깅할 것입니다. 코드here를 찾을 수 있습니다. 자유롭게 복제하고 따라해 보세요.

중단점을 추가하고 위의 이미지에 표시된 대로 실행 및 디버그를 클릭하면 응용 프로그램을 실행할 방법을 선택할 수 있는 팝업 창이 나타납니다.


아래 이미지는 애플리케이션을 디버깅하는 방법을 설명합니다. 디버거를 실행할 때 중단점을 사용하여 코드에서 발생하는 상황을 탐색할 수 있습니다. 또한 응용 프로그램의 변수 위로 마우스를 가져가 의도한 값을 유지하는지 확인할 수 있습니다.

이 방법을 사용하면 항상 실행 및 디버그를 클릭하여 디버깅을 시작해야 합니다.

방법 2 - launch.json 파일 구성

launch.json 파일을 생성하고 Visual Studio Code에서 응용 프로그램을 디버깅하는 방법을 알려주도록 구성하는 방법을 보여 주므로 따라 하십시오. launch.json 파일은 .vscode라는 폴더에 저장됩니다. 이 파일을 직접 만들거나 아래 단계에 따라 자동으로 만들 수 있습니다.

아래 단계 중 하나를 사용하십시오.

launch.json 파일 만들기를 클릭합니다.

메뉴 모음에서 실행을 선택한 다음 구성 추가를 선택합니다.

위의 방법을 사용하면 팝업 창이 나타납니다. Chrome을 열지 않고 Visual Studio Code에서 직접 애플리케이션을 디버그하려면 Node.js를 선택합니다.


launch.json 파일은 아래 이미지와 같아야 합니다. 구성 추가를 클릭합니다.


파일을 변경할 때마다 디버그 아이콘을 클릭할 필요가 없도록 nodemon 구성을 추가해 보겠습니다.



또는 아래 코드를 launch.json 파일에 복사하기만 하면 됩니다.

    {
      "version": "0.2.0",
        "configurations": [
            {
                "console": "integratedTerminal",
                "internalConsoleOptions": "neverOpen",
                "name": "nodemon",
                "program": "${workspaceFolder}/index.js",
                "request": "launch",
                "restart": true,
                "runtimeExecutable": "nodemon",
                "skipFiles": [
                    "<node_internals>/**"
                ],
                "type": "pwa-node"
            },
            {
                "type": "node",
                "request": "launch",
                "name": "Launch Program",
                "skipFiles": [
                    "<node_internals>/**"
                ],
                "program": "${workspaceFolder}/index.js"
            }
        ]
    }

디버거를 시작하려면 디버거 아이콘을 클릭하고 디버거 시작 방법을 선택합니다. 이 자습서에서는 nodemon를 선택합니다.



터미널이 아래 이미지와 같으면 디버거를 성공적으로 시작한 것입니다. 자유롭게 중단점, console.log 등을 추가하고 디버깅을 시작하십시오. 코드를 변경하면 디버거가 자동으로 다시 시작됩니다.

살짝 엿보기

node.index.js 또는 nodemon index.js를 입력하여 디버깅된 파일에서 변경 사항이 감지되면 자동 재시작을 활성화하여 애플리케이션에서 발생하는 상황에 대한 로그를 볼 수 있습니다.

참고: console.log를 사용한 경우에만 변경 사항을 터미널에 기록합니다. 중단점, 감시 등과 같은 전체 디버깅 기능을 사용할 수 없습니다.

결론

디버거가 실행 중입니다. 다음 시리즈에서는 코드를 쉽게 디버깅하는 다른 방법을 살펴보겠습니다.

이 게시물을 즐겼기를 바랍니다. 에서 나를 찾을 수 있습니다. 연결합시다.