[Vue.js] Vue3 개발시 chrome source code 디버깅

Vue3 vue-cli로 기본 프로젝트 생성 후 코드에 debugger로 break를 넣었는데 chrome 브라우저에서 디버깅 동작을 안하는 경우가 있다.

 

그럴 경우에는 vue.config.js에 아래 내용을 추가해 주면 된다.

 

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map' => 추가
  }
})

 

devtool: 'source-map' 추가 후 npm run dev로 개발 서버를 띄운 후 크롬 개발자 tool에서 보면 debugger 키워드가 정상 도작함을 볼 수 있다.

 

-- The End --