쿠...sal: [컴] vscode debugger를 사용해서 client nuxtjs 의 debugging

nuxtjs debugging tip /

vscode debugger를 사용해서 client nuxtjs 의 debugging

nuxtjs 를 debugging 할 때

nuxt -H 0.0.0.0 를 이용해서 local server 를 띄워서 작업을 많이 했다.

이 경우 chrome developer tools 에 있는 debugger 를 많이 사용한다. 그런데 이 경우에 source code 에 보이는 variable 이름과 실제 실행되고 있는 코드의 변수명이 틀려서 variable 값을 console 에서 입력해서 확인하기가 어려웠다. 개인적으로 현재상황에선 firefox 의 debugger 가 console 에서 변수를 확인하는 작업은 좀 더 편하게 잘됐던 것 같다.

그리고 요새 아래와 같은 화면이 나오고 소스코드가 제대로 보이지 않았다. 원인찾기가 귀찮아서 일단 그냥 뒀다. 추측은 page 쪽으로 들어간 component 와 관련돼 보이긴 한다.

import { render, staticRenderFns } from "./MyView2.vue?vue&type=template&id=98b14e8e&"
import script from "./MyView2.vue?vue&type=script&lang=js&"
export * from "./MyView2.vue?vue&type=script&lang=js&"
import style0 from "./MyView2.vue?vue&type=style&index=0&lang=css&"


/* normalize component */
import normalizer from "!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js"
var component = normalizer(
  script,
  render,
  staticRenderFns,
  false,
  null,
  null,
  null
  
)

/* hot reload */
if (module.hot) {
  var api = require("D:\\a\\prog\\nodejs\\vue\\myproj\\node_modules\\vue-hot-reload-api\\dist\\index.js")
  api.install(require('vue'))
  if (api.compatible) {
    module.hot.accept()
    if (!api.isRecorded('98b14e8e')) {
      api.createRecord('98b14e8e', component.options)
    } else {
      api.reload('98b14e8e', component.options)
    }
    module.hot.accept("./MyView2.vue?vue&type=template&id=98b14e8e&", function () {
      api.rerender('98b14e8e', {
        render: render,
        staticRenderFns: staticRenderFns
      })
    })
  }
}
component.options.__file = "pages/Test/MyView2.vue"
export default component.exports

여하튼 그래서 chrome 에서 직접 debugger 를 사용하는 것보다는 성능이 별로인 것 같아서 묻어두었던 vscode 를 debugger 를 사용하기로 했다.

사용법

사용법은 간단하다.

서버띄우기: nuxt -H 0.0.0.0
debugger configuration 만들기 vscode nuxt project 를 열고, F5(Start Debugging)을 하면 된다. 처음실행하면, 아래처럼 configuration 이 하나 만들어진다.
configuration 의 url 설정: 여기서 nuxt -H 0.0.0.0 로 띄운 서버의 ’포트’를 적어주자.
debugger 실행: 다시 F5 를 눌러야 debugger가 실행이 될 것이다.

그러면 이제 chrome 브라우저가 하나뜬다.

이 브라우저에서 동작을 하고, vscode 에서 breakpoint 를 잡으면 된다. 참고로 vscode debugger가 띄운 chrome 을 써야 한다. (debug port 가 그 chrome 하고만 연결되어 있다.) 다른 크롬을 띄우면 당연히 vscode 의 breakpoint 에 걸리지 않는다.

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

사용 후기

좀 더 vscode debugger 를 써보니, 크롬 디버거에서처럼 특정 line 에 break point 가 걸리지 않는 증상이 보인다. 그리고 code 에 있는 변수명과 달라서 console 창에서 variable 값을 보지 못하는 증상도 똑같이 보였다.

위처럼 hot reload 가 나오는 화면에 대한 breakpoint 도 걸리지 않았다. 다만 이시점에 code가 있는 부분에 새로운 symbol 이 추가되게, function 등을 추가하면, 다시 reload 하면서 이미 지정해 놓았던 breakpoint 가 걸리는 경우가 있었다. 새롭게 지정하는 breakpoint 는 여전히 안된다.( 이것은 npm run dev 등 hot reload 가 되는 서버를 사용할 때만 되는듯.)

하지만, vscode 를 debugger 로 쓰면서 debugger 화면, 소스 등이 확실히 편해지긴했다. 아직은 한가지만 쓸 수는 없을 듯 하다. 대체로 vscode 로 사용하다가 chrome debugger 가 필요하면 써야 할 것 같다.

쿠...sal

[컴] vscode debugger를 사용해서 client nuxtjs 의 debugging

vscode debugger를 사용해서 client nuxtjs 의 debugging

사용법

사용 후기

See Also

댓글 없음:

댓글 쓰기