정보실

웹학교

정보실

javascript Visual Studio 코드에서 JavaScript 디버깅 설정

본문

프로그래밍 학습의 일부는 코드가 실제로 작동하는 것을 감시하는 것입니다


저는 JavaScript가 초보자에게 놀랍도록 탄탄한 언어인 방법에 대해 이전에 글을 썼습니다. 그러나 캐치가 있습니다. 가능한 한 많은 시간을 배우고 가능한 한 적은 시간을 허비하려면 두 가지 필수 기능을 제공하는 프로그래밍 환경이 필요합니다.

  • 오류 점검. 작은 맞춤법 오류, 일관되지 않은 대문자 사용 및 기타 작은 오타가 큰 문제를 일으키는 경우에는 재미가 없습니다. 좋은 프로그래밍 환경은 이러한 문제가 발생하기 전에 이를 파악합니다.
  • 디버깅.일부 실수는 구문의 문제가 아닙니다. 이러한 문제를 해결하려면 코드를 파헤치고 실제로 수행 중인 작업을 확인하는 데 도움이 되는 도구가 필요합니다.

https://medium.com/young-coder/setting-up-javascript-debugging-in-visual-studio-code-6c5005529987 


내가 좋아하는 HTML 및 JavaScript 편집기인 무료 Visual Studio Code를 사용하는 경우 오류 검사가 무료입니다. JavaScript 파일 맨 위에 다음과 같이 특수 @ts-check 주석을 붙이기만 하면 됩니다.


// @ts-check
function init() {
var myNumber = 42;
myNumber = "Some text that is no number"; 


@ ts-check 주석은 VS Code에 JavaScript에 주의를 기울이고 잠재적 문제를 빨간색으로 강조 표시합니다.


1*_mlNZ4YgiANczRkOIe1CHQ.png 

빨간색 밑줄은 숫자 변수에 텍스트를 넣는 것과 같은 실수를 강조합니다. 


VS Code에서 전체 파일 그룹에 대해 오류 검사를 켜거나 끄는 다른 방법이 있지만 다른 날 주제입니다. 더 중요한 것은 방정식의 후반부인 디버깅입니다.


디버깅은 작업하기가 훨씬 까다롭습니다. VS Code는 간단한 실험과 대규모 웹 응용 프로그램 모두에서 작동하도록 설계되었으므로 디버깅을 설정하는 몇 가지 방법이 있습니다. 이 기사에서는 가장 쉬운 시작 방법을 배웁니다.


Chrome 디버거 설치 


가장 먼저 알아야 할 것은 JavaScript 디버깅은 Google Chrome에서만 작동한다는 것입니다. 다른 브라우저도 훌륭하지만 VS 코드로 새 페이지를 작성하는 경우 Chrome을 사용하여 테스트해야 합니다.


VS Code는 가능한 한 가볍게 설계되었으므로 기본 패키지에는 JavaScript 디버거가 포함되어 있지 않습니다. 기술적으로 VS Code에는 웹 서버의 Node.js 환경에서 코드를 실행하는 웹 사이트를 위한 JavaScript 디버거가 있지만 완전히 다른 기능입니다.


다행히 Chrome 디버거를 쉽게 설치할 수 있습니다. 수행 할 작업은 다음과 같습니다.

  1. VS 코드를 시작하십시오.
  2. VS Code 메뉴에서 File → Preferences → Extensions를 선택하십시오 (또는 서둘러 Ctrl + Shift + X를 누르십시오). VS 코드 창의 왼쪽에 있는 확장 패널이 열립니다.
  3. 검색 창에 'Chrome'을 입력합니다. 상단에 또는 근처에 'Debugger for Chrome' 확장자가 표시됩니다. 해당 확장 옆의 작은 녹색 설치 단추를 클릭하십시오.
    1*X9W4z1tEdL2tdUMG0oMQ6A.png
  4. 이제 VS 코드를 닫습니다. 다음에 실행할 때 모든 것이 최신 상태가 됩니다.

웹 사이트 폴더 열기 


이제 VS Code에 Chrome 디버거가 설치되었습니다. 그러나 필요할 때 VS Code가 디버거를 실행하도록 하려면 더 많은 작업을 수행해야 합니다.


오래된 HTML 또는 JavaScript 파일을 열고 디버거를 첨부 할 수 있다고 생각할 수도 있습니다. 슬프게도 VS 코드는 그런 식으로 구축되지 않았습니다. 대신 파일을 하나의 폴더에 넣고 VS Code에서 전체 폴더를 열어야 합니다. VS Code의 고급 구성 시스템은 폴더에서 작동하기 때문에 JavaScript 디버깅을 사용하려면 이 구성 시스템이 필요합니다.


VS Code에서 폴더를 열려면 파일 → 폴더 열기를 선택하고 웹 사이트 파일이 들어있는 폴더를 선택하십시오. 폴더에 다른 하위 폴더가 있으면 VS 코드에도 표시됩니다.


1*YzudRYGUaAoXDrr_XqGmuw.png 


웹 사이트 폴더가 비어 있으면 문제가 되지 않습니다. 폴더를 열면 파일 → 새 파일 명령을 사용하여 새 HTML 및 JavaScript 페이지를 폴더에 추가 할 수 있습니다.


폴더가 열리면 EXPLORER 패널에 해당 내용이 표시됩니다. EXPLORER 패널을 닫거나 다른 것으로 덮으면 편리한 키보드 단축키 Ctrl + Shift + E로 다시 표시 할 수 있습니다.


더 진행하기 전에 샘플 페이지를 가지고 작업하는 것이 좋습니다. JavaScript 청크가 포함 된 HTML 페이지 또는 개별 JavaScript 파일의 함수를 사용하는 HTML 페이지만 있으면 됩니다. 손에 없습니까? 다음은 편리한 ZIP 파일로 패키지화된 한 페이지 그림 앱이 포함 된 엄청나게 간단한 웹 사이트 폴더입니다. 다음 단계를 계속하기 전에 데스크탑으로 드래그 하여 VS Code에서 엽니다.


디버그 구성 추가 


지금 웹 페이지 디버깅을 시작하려고 하면 작동하지 않습니다. 문제는 VS Code가 웹 서버로 사이트를 호스팅한다고 가정하고 컴퓨터에서 해당 웹 서버가 실행되고 있음을 예상한다는 것입니다. 다른 VS 코드 확장과 더 많은 구성으로 이것을 설정할 수 있습니다. 하지만 이 예제에서는 너무 과잉입니다.


대신, 실제로 필요한 것은 새로운 디버그 구성입니다. 기본적으로 VS Code에 사이트를 실행하는 방법을 알려주는 일부 설치 지침이 있습니다. 이 경우 디버그 구성에서 웹 서버에 연결하지 않고 파일 시스템에서 직접 페이지를 열도록 VS Code에 지시하려고 합니다.


필요한 디버그 구성을 추가하는 방법은 다음과 같습니다.


1. Debug → Open Configurations를 선택하십시오.


2. 처음으로 이 작업을 수행하기 때문에 VS Code는 어떤 종류의 디버거를 원하는지 알아야 합니다. 옵션 목록에서 "Chrome"을 선택하십시오. VS 코드 창의 오른쪽 하단 모서리에 .NET Core 용 디버거가 없다는 경고 메시지가 표시 되어도 걱정하지 마십시오. 꼭 필요하지는 않습니다.


1*awERK-zIcmolx_vs2lsdgw.png 

Chrome 디버거는 원하는 것입니다


3. VS 코드는 launch.json이라는 구성 파일을 만들고 편집기 창에서 엽니다.


처음에 launch.json 파일은 다음과 같습니다.


{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}" }
]
} 



디버거가 제대로 작동하려면 이 세부 사항을 수정해야 합니다. 그러나 유형 또는 요청 설정을 건드리지 마십시오. 그들은 이미 가기에 좋습니다.


이름 설정은 영향을 미치지 않지만 실제로 파일 시스템에서 Chrome 시작 또는 "Launch Chrome"과 같이 실제로 수행 할 작업을 설명하는 단어로 바꾸는 것이 가장 좋습니다.


url 및 webRoot 설정은 VS Code가 컴퓨터의 웹 서버를 사용하도록 지시합니다. 이러한 설정을 삭제하고 대신 다음과 같은 파일 설정을 추가하십시오.


{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome from the file system",
"file": "${workspaceFolder}"
}
]
} 


${workspaceFolder} 부분은 현재 웹 사이트 폴더에 편리한 스탠드입니다. 이 바로 가기를 사용하면 웹 사이트 폴더의 이름을 바꾸거나 다른 곳으로 이동하더라도 프로젝트가 계속 작동합니다.


이제 빠른 Ctrl + S로 작업을 저장하십시오. 그렇게 하면 VS Code가 웹 사이트 폴더 안에 .vscode라는 폴더를 만들고 launch.json 파일을 그 곳에 둡니다. 해당 폴더를 그대로 두면 VS Code는 방금 설정 한 디버그 구성을 계속 사용하므로 .json 파일을 다시 열지 않아도 됩니다.


launch.json이 올바르게 배치된 단일 페이지 페인트 프로젝트입니다.


디버거 테스트 


이제 진실의 순간입니다! 웹 사이트를 실행하려면 디버그 → 디버깅 시작을 선택하십시오 (또는 F5를 누르십시오). VS Code는 Chrome을 시작하고 웹 사이트 폴더를 가리킵니다. 그러면 Chrome은 웹 사이트 폴더에 있는 다음과 같은 모든 파일 목록을 표시합니다.


1*200CZ_pBkZx1XgH9yibrPw.png 

"웹 사이트 프로젝트"폴더의 파일


페이지를 로드 하려면 목록에서 해당 페이지를 클릭하십시오.


${workspaceFolder} /Paint.html과 같은 특정 페이지를 가리 키도록 ${workspaceFolder} 설정을 변경할 수 있습니다. 그렇게 하면 Chrome이 VS 코드 프로젝트를 실행할 때 지정한 페이지로 바로 이동합니다. 그러나 폴더 목록 방식은 일반적으로 테스트에 더 편리합니다.


디버거가 작동합니까? 가장 쉬운 방법은 코드에 중단 점을 설정하는 것입니다. 코드가 중단 점에 도달하면 페이지 실행이 일시 중지되고 변수를 살펴보고 간단한 명령을 실행하며 VS 코드 창에서 한 번에 한 줄의 코드를 실행할 수 있습니다.


중단 점을 설정하려면 JavaScript 파일을 열고 사용할 행을 찾은 다음 왼쪽 여백 (행 번호 왼쪽)을 클릭하십시오. 중단 점을 표시하는 빨간색 원이 나타납니다.


다음은 Paint.html 페이지에서 isDrawing 변수를 설정하는 코드 줄에 중단 점을 두는 예입니다.


1*UfwQq521Faa-v2fe-Y7G1w.png 

중단 점을 추가하려면 여백을 클릭하십시오


이제 페이지를 다시 실행하십시오. VS 코드가 중단 점에 도달하면 모든 것이 브라우저에서 정지됩니다. VS 코드 창으로 다시 전환하면 선택한 지점에서 코드가 일시 중지 된 것을 확인할 수 있습니다. 이제 VS Code의 디버그 도구에 대해 자세히 알아 보거나 F5를 눌러 코드를 재개하고 계속 진행할 수 있습니다.


인라인 JavaScript 디버깅을 위한 마지막 트릭 


방금 배운 디버깅 방식은 모든 JavaScript 파일에서 작동합니다. 그러나 HTML 파일에 JavaScript 코드 블록이 있으면 더 제한적입니다. 일반적으로 Visual Studio에서는 HTML 파일에서 중단 점을 설정할 수 없습니다. 그런 식으로 까다롭습니다.


이 문제가 발생하면 간단한 해결 방법이 있습니다.

  1. File → Preferences → Settings를 선택하십시오.
  2. 검색 창에 "breakpoints"을 입력하십시오.
  3. "Allow setting breakpoints in any file"설정을 켜십시오.

1*gfamZHMfCpr7AaxzVP9RqA.png 


이 설정 프로세스를 마치면 JavaScript로 모든 VS 코드의 디버깅 기능을 사용할 수 있습니다. 노련한 프로그래머라면 놀이터에 오신 것을 환영합니다! 그러나 처음으로 설정 과정을 겪고 있는 새로운 프로그래머라면 고급 디버깅 기술에 익숙하지 않을 것입니다. 이 시리즈의 다음 기사를 읽고 VS Code의 기본 디버깅 도구를 살펴보십시오. 




  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 76회 ]  작성일19-08-21 20:14

웹학교