vscode 디버그 사용 방법

Visual Studio Code(이하 vscode)는 매우 강력한 편집기이며 비교적 가볍습니다. vscode는 Windows, OS의 세 가지 환경을 지원합니다.

vscode 인터페이스

왼쪽 상단은 프로젝트 디렉토리, 검색, 버전 관리 Git 관련(왼쪽 하단은 현재 브랜치), 디버깅, 기타 확장 플러그인, 기타는 모두 표시되어 있습니다. 중국어로는 설명이 없습니다. 이 제안 사항을 호출해야 합니다. 그렇지 않은 경우 메뉴 표시줄로 이동하여 하나씩 호출할 수 있습니다.

디버깅 전제 조건: launch.json 구성

디버깅 중인 그림 왼쪽에서 네 번째 버튼을 클릭한 다음, 그림의 빨간색 상자를 클릭하면 launch.json이 열립니다

    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/src/extract-cli.js",
            "args": ["--output", "output.pot", "${workspaceFolder}/test/product_group.vm"],
            "outDir": "${workspaceFolder}/dist",
            "sourceMaps": true
        }
    ]

유형과 요청은 변경할 필요가 없습니다. 기본값은 괜찮습니다. 요청이 시작되면 F5를 눌러 직접 디버깅을 시작할 수 있습니다. 공식 웹사이트 설명에 따르면 요청이 첨부되고 이미 실행 중인 프로그램과 연결되어 있지만 여기서는 디버거를 사용하면 됩니다. 디버깅을 위해 vscode와 함께 제공됩니다.

프로그램 매개변수는 실행할 js 항목 파일을 지정합니다. 여기서 ${workspaceFolder}는 현재 열려 있는 프로젝트 디렉터리입니다. .vscode 디렉터리는 이 디렉터리에 자동으로 생성되며 launch.json도 이 디렉터리에 있습니다. args도 더 중요합니다. 예를 들어 이 예에서는 gettext-extract --output output.pot input.vm 명령을 실행했습니다. 그런 다음 args의 기능은 실제로 명령 뒤에 매개변수를 전달하는 것입니다.

sourceMaps 이 매개변수는 es5 코드 작성에는 거의 사용되지 않지만 es6, TypeScript 등을 작성하는 데는 매우 필요합니다. 이 매개변수의 값이 true인 경우 맵이 생성됩니다.

outDir은 컴파일된 코드의 생성된 디렉터리를 표시하여 vscode 검색을 돕기 위해 사용됩니다.

컴파일 전과 후의 대응에 대해 논의해보겠습니다.

저는 컴파일에 babel을 사용합니다. 시도해 본 후, 프로그램 매개변수가 컴파일된 파일을 직접 가리키면 vscode는 기적적으로 소스 코드 파일을 스스로 찾을 수 있습니다. 프로그램이 작성한 파일을 가리키는 경우 outDir 매개변수를 제공해야 합니다. 이를 컴파일 및 생성 디렉터리에 구성하면 됩니다. 기타: 시각적 검사에는 sourceMaps 및 .js.map으로의 컴파일이 필요하지 않습니다. 디버깅하는 동안 문제가 발생하면 sourceMaps를 true로 설정하고 컴파일 도구가 맵 파일을 생성하도록 하세요.

디버그 코드

디버깅 중인 코드의 왼쪽에서 빨간색이면 그림과 같이 여기서 중단점이 가능하다는 의미입니다. F5를 누르면 디버깅이 시작됩니다. -인터페이스에 크롬과 유사한 단계 건너뛰기가 나타납니다. 단일 단계 디버깅 등, 사용법은 크롬과 유사하지만 단축키가 약간 다릅니다

그런 다음 왼쪽에 위에서 소개한 디버그 버튼을 클릭하면 됩니다. 그림과 같이 특정 단계로 실행되는 변수와 호출 스택을 확인하세요

Others

이 기사에서 사용된 바벨에 대한 지식과 명령줄 항목에 대한 소개

패키지를 엽니다. json에서 bin 구성을 찾을 수 있으며, 이 구성은 npm 설치 시 사용됩니다. node_modules/.bin에 두 개의 명령을 추가한 다음 이를 명령줄로 사용할 수 있습니다.

  "bin": {
    "gettext-compile": "./dist/compile-cli.js",
    "gettext-extract": "./dist/extract-cli.js"
  }

babel 명령을 실행할 때 추가할 수 있습니다. --source-maps true 맵 파일을 생성하려면 위에서 언급한 문제가 발생하는 경우에만 발생합니다. 이를 사용하면 소스를 수정한 후 다른 컴파일 도구에도 해당 문제가 발생할 것으로 추정됩니다. 파일을 확인하기 위해 즉시 디버깅을 다시 시작하고 싶지만, Babel 자체에서 파일을 모니터링할 수 있는 --watch 매개변수를 지원하므로 간단한 자동화를 구현할 수 있습니다. 다른 명령줄 명령은 매우 길고 기억하기 어렵기 때문에 package.json에 작성할 수 있습니다. 다음은 그 안에 바벨 컴파일을 작성하는 방법입니다. npm run prepublish

  "scripts": {
    "prepublish": "babel  --watch --presets es2015 --plugins transform-object-assign --source-maps true src --out-dir dist/"
  }

관련 권장 사항: "

vscode 사용법 튜토리얼

"

위 내용은 vscode 디버그 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!