기본적으로 다음 자료를 따라 진행하는 메모입니다.

VS Code로 디버깅 — Vue.js

사전 조건

Debugger for Chrome

다음 Debugger for Chrome이 포함되어 있습니다. 들어가지 않으면 들어가기.

Debugger for Chrome - Visual Studio Marketplace



edge의 경우 다음
Debugger for Edge

vue-cli

Vue-CLI에 따라 프로젝트 만들기

Vue CLI Guide의 단계를 따라 vue-cli을 사용하여 프로젝트를 설치하고 만듭니다. 새로 만든 응용 프로그램 디렉터리로 이동하여 VS Code를 엽니다.

create project

vue create hello-world

vue.config.js

vue.config.js를 만듭니다.



내용을 이하로 한다.

vue.config.js

// vue.config.js
module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

설정 파일

Activity Bar의 Debugging 아이콘을 클릭하여 Debug 뷰를 표시합니다.
톱니바퀴 아이콘을 클릭하여 launch.json 파일을 만듭니다.

그림에서 다음 순서.



launch.json이 표시되므로 다음과 같이 webRoot 이하를 추가한다.

launch.json

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

firefox 설정은 다음과 같습니다.

    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }

edge 설정은 다음과 같습니다.

        {
            "name": "Launch localhost",
            "type": "edge",
            "request": "launch",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
        },
        {
            "name": "Launch index.html (disable sourcemaps)",
            "type": "edge",
            "request": "launch",
            "sourceMaps": false,
            "file": "${workspaceFolder}/index.html"
        },

덧붙여서, launch.json는 .vscode의 밑에 창조된다.

브레이크 포인트 설정

브레이크 포인트는 코드행수의 좌측을 클릭하는 것으로 ON/OFF 전환한다.
아카마루가 붙어 있으면 브레이크 포인트가 설정되어 있다.


위의 이미지에서 src/components/HelloWorld.vue에 data ()를 추가하여 중단 점을 설정했습니다.

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      counter: 0
    };
  }
};

디버깅 시작

시작

디버깅 전에 앱을 시작합니다.

yarn run serve

디버깅

메뉴에서 디버그 → 디버그 시작을 선택하거나,
Debug 보기로 이동하여 녹색 재생 버튼을 클릭합니다.

브라우저가 열리고 중단점에 히트

대체

Vue Devtools

그 밖에도 디버깅 방법이 있지만 가장 인기 있고 간단한 것은 Chrome용 및 Firefox용의 우수한 Vue.js devtools를 사용하는 것입니다.

Vuetron

Vuetron은 vue-devtools가 수행 한 작업 중 일부를 확장 한 훌륭한 프로젝트입니다.

간단한 디버그 문

위의 예는 훌륭한 워크플로우를 가지고 있습니다. 그러나 native debugger statement 을 코드 내에서 직접 사용할 수 있는 대체 옵션이 있습니다. 이 방법을 사용하기로 선택한 경우 완료되면 명령문을 삭제하는 것을 기억하는 것이 중요합니다.

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    const hello = 'Hello World!'
    debugger
    this.message = hello
  }
};
</script>

이상