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 가 필요하면 써야 할 것 같다.
See Also
- 쿠…sal: [컴] nuxtjs 에서 sourcemap 생성방법
- Debugging Nuxt.js with VS Code. I have been using Nuxt.js recently for… | by Les Harris | Vue.js Developers | Medium : nustjs 서버파트에 대한 디버깅 이야기도 있다.
