HTML CSS JS Debugging in Visual Studio Code 비쥬얼스튜디어코드 디버깅

#HTML CSS Debugging in Visual Studio Code #자바스크립트 디버깅 #HTML 디버깅 #비쥬얼스튜디오코드 디버깅 #HTML 비쥬얼스튜디오코드 디버깅 #비쥬얼스튜디오코드 로컬 디버깅 #HTML 자바스크립트 #Debugger for Chrome #Visual Studio Code 디버깅

안녕하세요 오늘은 비쥬얼스튜디어 코드에서 HTML / CSS / JAVASCRIPT 로 작성한 코드 디버깅 방법에 

대해서 알아보겠습니다.

우선 웹서버 방식이 아니라 로컬에서 HTML 파일만 있어도 디버깅이 가능한 방법입니다.

비쥬얼스튜디어 코드는 기본적으로 Chrome에서 디버깅이 가능 합니다. 아래와 같이 Extension (Ctrl + shift + X)을 통해 Debugger for Chrome을 설치합니다. 

이후 디버깅(F5)를 누르면 아래와 같이 Create a launch.json 파일을 생성해줍니다. 

여기서 생성된 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": "chrome",

            "request": "launch",

            "name": "Launch Chrome against localhost",

            "url": "http://localhost:8080",

            "webRoot": "${workspaceFolder}"

        }

    ]

}

고쳐줄 부분은 바로 url 부분과 webRoot 부분입니다. 아래와 같이 변경해줍니다. webRoot는 file로 변경해주시고, url은 주석처리 해주시고, name도 간단히 바꿔보겠습니다.(중요)

{

    // 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": "chrome",

            "request": "launch",

            "name": "Launch Chrome from file system",

            //"url": "http://localhost:8080",

            "file": "${workspaceFolder}"

        }

    ]

}

이후 디버깅(F5)를 눌러보시면 디버깅이 되는것을 확인할 수 있습니다. 참 쉽지만 설명해주는 곳이 없어서 글을 남겨봅니다. 

이후 디버깅이 필요한 html파일을 클릭해주시고 디버깅을 실행하시면 됩니다.

처음 HTML / CSS / 자바스크립트를 공부하는 분이라면 필수적인 기능입니다.