Debbuger in VSCode(Chrome)

점점 복잡한 개발을 진행하면서 debugger의 사용이 필수적입니다. 그래서 VSCode를 이용한 쉬운 Debugger방식이 있어 쉽게 설명을 하려고 합니다.

필요 Program

• Chrome
• VSCode
• Open Browser Preview (VSCode Extension)
• Debugger for Chrome (VSCode Extension)

 

1. Setting 준비

VSCode에서 확장자를 설치한 후에 Debug를 실행하기 위해 launch.json을 설정을 해야 합니다.

 

 

 

2. Launch.json 설정

우선 launch 와 attach의 차이점을 보고 잘 결정해주기 바랍니다.

 

 

launch	attach
실행 전에 Debugger 모드에서 App, Process에서 앱을 시작하는 방법	이미 실행중인 App, Process에 연결하는 방법

 

 

Add Configuration 기능을 사용해도 좋지만 내용을 알고 직접 작성하는 것이 좋습니다.

{
    "version": "0.2.0",
    "configurations": [
        {
        	"name": "Launch Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080" <= 추후 수정,
            "webRoot": "${workspaceFolder}"
        },
        {
            "name": "attach Chrome Debug",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "http://localhost:8080" <= 추후 수정,
            "webRoot": "${workspaceFolder}"
        }

    ]
}

 

 

3. "url" 설정

url을 특정 값으로 설정하여 chrome과 VSCode를 연결하여 사용하면 됩니다.

특정 사용방법등은 밑 Reference를 이용하면 좋습니다. 그리고 그냥 Chrome내부에서 Debug하는 방법도 있어 편하신 방법대로 사용하시면 됩니다. :)

 

 

 

Reference

https://www.youtube.com/watch?v=4v_Fhq2E1Oo

https://code.visualstudio.com/docs/editor/debugging

https://developer.chrome.com/docs/devtools/javascript/