VScode + Google Chrome로 React 디버깅

의 목적

VScode에서 React 디버깅을 수행할 수 있습니다.

컨텐트

create-react-app에서 React App의 템플릿을 만들고 VScode에서 디버깅을 진행한다.
VScode에서 인터럽트와 시계식으로 효율적으로 디버깅하는 것이 목적이다.
이 단계는 설치VSCode, Node.js 및 GoogleChrome를 전제로 합니다.

작업 확인 환경

이 글은 다음 환경에서 동작을 확인했습니다.

VSCode 1.52.1

GoogleChrome 87.0.4280.88

Node.js v12.19.0

npm 6.14.8

react 17.0.1

메서드

템플릿 응용의 창설

launch.json의 제작

task.json의 생성

.env의 제작

디버그 시작

1. React 템플릿 적용 만들기

먼저 create-react-app 템플릿 응용 프로그램을 만듭니다.
다음 명령의 {workspace}을 항목을 저장할 경로로 바꾸십시오.
React 템플릿 만들기

mkdir {workspace}
cd {workspace}
npx create-react-app ./

또한 추가--template typescript 작업을 통해 Type Script를 사용하여 템플릿을 만듭니다.
React 템플릿 제작(TypeScript)

mkdir {workspace}
cd {workspace}
npx create-react-app ./ --template typescript

이 단계는 Type Script에 따라 수행되므로 파일 구성 등은 다소 다르지만 어떤 단계의 내용도 변경되지 않습니다.

2. task.json 만들기

다음은 VScode의 설정입니다.
디버깅 시작 전 사전 실행react-scripts start을 위해 구성タスク (task.json).
사전에 시작하지 않으려면 (수동으로 시작할 때 문제가 없을 때) 이 프로그램의 순서가 필요하지 않습니다.
VS코드{workspace}를 열고 터미널(T) 메뉴에서 작업 구성...을 수행합니다.

화면 위쪽 중앙에 다음 목록이 표시됩니다.

여기에서 'npm: start' 를 선택하십시오.
그리고 나중에 수동으로 다시 쓰기 때문에 뭘 선택할 수 있어요.
"npm: start"를 선택하면 다음 그림의 템플릿을 자동으로 만들 것입니다 task.json.
위에서 만든 템플릿을 아래의 내용으로 고쳐 주십시오.
task.json

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "npm",
            "script": "start",
            "label": "npm: start",
            "detail": "react-scripts start",
            "group": {
                "kind": "test",
                "isDefault": true
            },
            "isBackground": true,
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": "ˆ$"
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "Compiling...",
                    "endsPattern": "Compiled .*"
                }
            }
        }
    ]
}

2-1. .env 만들기

이렇게 작업을 수행할 수 있지만 처음 시작할 때 디버깅과 무관한 브라우저가 자동으로 표시됩니다.
이곳의 조작은 디버깅에 영향을 주지 않으며, 단점과 손목시계식은 작용하지 않으니 주의해야 한다.
따라서 react-scripts start 실행 시 브라우저의 자동 표시를 억제하는 설정을 수행합니다.{workspace} 폴더 바로 아래에 .env 파일을 작성하십시오. 내용은 다음과 같습니다.
.env

BROWSER=none

이렇게 하면 디버그와 무관한 브라우저가 표시되지 않습니다.

3. launch.json 만들기

다음에 디버깅에 사용할 프로필 launch.json 을 만듭니다.
실행(R) 메뉴에서 추가 구성...을 실행합니다.

화면 위쪽 중앙에 다음 목록이 표시됩니다.

여기서 Chrome(preview)을 선택합니다.
그리고 나중에 수동으로 다시 쓰기 때문에 뭘 선택할 수 있어요.
[Chrome(preview)]을 선택하면 아래 그림처럼 템플릿이 자동으로 만들어집니다launch.json.
위에서 만든 템플릿을 아래의 내용으로 고쳐 주십시오.preLaunchTask에는 위에서 설정한 작업을 미리 수행하도록 설정되어 있습니다.
"2.task.json의 제작"을 생략하면 preLaunchTask 줄을 삭제하십시오.
이때 npm start 또는 react-scripts start가 수동으로 시작해야 합니다.
launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "preLaunchTask": "npm: start",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/src/*"
            }
        },
    ]
}

이상 설정이 완료되었습니다.
여기까지 완성되면 다음과 같은 구성이어야 한다.

4. 디버그 시작

디버깅을 시작하는 것은 매우 간단하다.
VScode에서 F5 키를 누르면 디버깅이 시작됩니다.
또한 launch.json에서 여러 구조를 정의했을 때 디버깅 화면에서 왼쪽 상단의 하단 목록Launch Chrome against localhost을 선택한 후 디버깅을 시작하십시오.

디버깅이 시작되면 터미널에서 preLaunchTask 지정한 npm: start 작업을 먼저 실행합니다.
이 임무는 실질적으로 집행된다react-scripts start.

그러면 Google Chrome이 자동으로 시작됩니다.
여기서 시작하는 브라우저는 디버그 대상입니다. 여기서 실제 프로그램을 조작하는 동시에 VS코드에 인터럽트를 설정할 수도 있고 시계식으로 변수를 감시할 수도 있습니다.

디버그의 정지는 브라우저를 닫거나 디버그 제어의 "□"단추로 정지할 수 있습니다.
또한 이때preLaunchTask 수행된 작업은 멈추지 않고 재사용되기 때문에 다음 디버깅을 시작하기 전의 시간이 단축됩니다.
이 작업을 중지하려면 '터미널 메뉴 (T)' 의 '작업 종료...' 에서 해당 작업을 선택하거나, 작업 실행 중인 터미널 창에서 'Ctrl + C' 또는 '스팸박스 아이콘' 을 누르면 작업을 중지할 수 있습니다.

끝말

React+Type Script 학습에서는 좌우를 몰랐는데, 어쨌든 콘솔 로그에서 변수의 변환을 필사적으로 추적했다.
나는 안정된 곳에 디버깅 환경을 구축해 보았지만 launch.json만 설정하면 간단하게 디버깅할 수 있었다.
좀 일찍 했으면 좋겠는데..