VSCode 디버거 세팅

자바스크립트 언어를 VSCode에서 세팅하는 방법을 알아보겠습니다.

 

크롬의 개발자 디버거와 VSCode 디버거를 연결하는 방법입니다.

 

1. VSCode에서 단축키 F1 또는 (Shift + Ctrl + P)를 누릅니다. 

2. Tasks: Configure Task를 고릅니다.

3. "Create tasks.json file from template" 클릭 -> 4가지 옵션 중에서 Others 를 고릅니다.

4. 사용언어에 맞게 설정하면 됩니다.

 

 

※주의: parcel로 애플리케이션을 실행을 가장한 설정 예시입니다.

.vscode 폴더 안에 tasks.json 설정

// 디버거 세팅 예시
{
	// See https://go.microsoft.com/fwlink/?linkId=733558
	// for the documentation about the tasks.json format
    
	"version": "2.0.0",
    "tasks": [
    	{
    		"label": "echo",
    		"type": "shell",
    		"command": "parcel index.html",
            "isBackground": true
    	}
    ]
}

tasks의 속성 (자세한 설명은 https://go.microsoft.com/fwlink/?linkId=733558 참조)

label: task의 명

type: command 속성에서 실제 애플리케이션의 종류를 type에 명시하면 됩니다.

command: 작업이 실행되는 실제 명령어를 기술합니다.

isBackground: true 시 vsCode에서 작업 중단 없이 번들링을 계속 켜놓은 상태에서 백그라운드에서 계속 작업할 수 있습니다.

 

 

launch.json 설정

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Program",
            "preLaunchTask": "parcel webapp",
            "url": "http://localhost:1234",
            "webRoot": "${workspaceFolder}/dist"
        }
    ]
}

디버깅하기 전에 번들링을 하기 위해 preLaunchTask에 "parcel webapp"를 기입합니다.

url은 parcel로 웹서버를 띄울 로컬 호스트를 기입하면 됩니다.

webRoot는 parcel이 번들링해서 dist 번들링 파일을 만듭니다.

에디터를 연 디렉토리를 찾기위해 ${workspaceFolder}를 기입합니다.

 

설정이 끝이 났으면 vsCode의 마켓플레이스에서 Debugger for Chrome을 설치합니다.

Debugger for Chrome은 vsCode의 디버거와 크롬 브라우저의 디버거를 동기화시켜주는 확장 프로그램입니다.

 

 

launch.json이 자동으로 생성되지 않았을 경우에 아래 글을 참조해주세요.
https://oysu.tistory.com/65

[VS code] Node.js 프로젝트에서 launch.json가 없을 경우 설정 방법

 

 

 

 

 

 

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": ["<node_internals>/**"],
            "program": "${workspaceFolder}/src/main/resources/static/js/app.ts",
            "outFiles": [
                "${workspaceFolder}/**/*.js",
                "${workspaceFolder}/**/*.ts",
                "${workspaceFolder}/src/main/resources/static/js/*.js",
                "${workspaceFolder}/src/main/resources/static/js/*.ts",
                "${workspaceFolder}/src/main/resources/static/js/**/*.js",
                "${workspaceFolder}/src/main/resources/static/js/**/*.ts",
            ]
        }
    ]
}

 

 

 

 

 

 

https://sosomemo.tistory.com/53

VSCode 소개와 언어 별 기본 tasks.json 모음