Ionic Visual Studio Code 디버깅 방법

2017.08.04 in Ionic

Ionic에서 Vs Code의 디버깅 방법을 알아본다.

VS code에서 Chrome 확장 프로그램을 다운 받는다.

Debugger for Chrome 을 검색 및 설치 후, VS code를 재실행 시킨다.

package.json에 source map 설정 추가

 ...
  "description": "설명",
  // description 아래에 config 항목을 추가한다.
  "config": {
    "ionic_bundler": "webpack",
    "ionic_source_map": "source-map"
  }
... 
}

launch.json 설정

디버그 탭에서 다음과 같이 설정 한다.

{
    "version": "0.2.0",
    "configurations": [
        ...
        {
            "type": "chrome",
            "trace": true,
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/www",
            "url": "http://localhost:8100/"
        }
      ...
    ]
}