[VS Code] Vue 디버깅 환경셋팅 - Chrome, Webpack

dhkim 10월 25, 2022

 


Vue CLI를 통해 생성된 프로젝트를 바탕으로 설정한 개발환경 디버깅 셋팅을 소개합니다.

webpack을 포함한 프로젝트로 구성되었으며, CLI 버전은 v5.0.8입니다.


1. 프로젝트 생성

1) Vue CLI 설치

npm install -g @vue/cli


2) Vue 프로젝트 생성 (Webpack)

vue init webpack-simple ['프로젝트명']


2. package.json

"scripts": {
	"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --port 8200",
	"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}

 ① NODE_ENV 설정 값 확인

 별도로 수정하지 않았다면, 
"dev"는 NODE_ENV=development, 
"build"는 NODE_ENV=production 으로 설정되어있습니다.

이 후 webpack.config.js에서 참조하는 값으로 개발환경과 빌드 실행에 대한 구분자 입니다.


 ② 개발환경(dev) 실행 포트 설정 및 확인

 "dev" 설정 문자열 뒤에 다음 문구를 추가합니다.

     --port [포트번호]



3. webpack.config.js

 원본의 Line::59 에서 설정된 조건문에서 위 package.json에 설정한 구분값을 확인합니다.

개발환경인 "dev" 구분이 없기 때문에 "dev"조건에 대한 값을 추가합니다.

1
2
3
4
// 개발환경 Custom Setting
else if (process.env.NODE_ENV === 'development') {
  module.exports.devtool = '#source-map'
}

[원본]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

[수정본]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

// 운영환경 Custom Setting
if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

// 개발환경 Custom Setting
else if (process.env.NODE_ENV === 'development') {
  module.exports.devtool = '#source-map'
}



4. Chrome Debugger (JavaScript Debugger) - launch.json

 마지막으로 VS Code에서 디버깅하기 위해 디버깅 확장자를 설치해줍니다.

디버거 설치 후 편집버튼을 누르면 생성되는 launch.json을 아래와 같이 설정해줍니다.

위 (2)에서 설정한 실행포트를 URL에 포함하며, Chrome을 디버깅모드로 실행해야합니다.

[launch.json]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
    // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
    // 기존 특성에 대한 설명을 보려면 가리킵니다.
    // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
    "version": "0.2.0",
    "configurations": [
		{
            "name": "[Attach] Chrome (Vue)",
            "type": "pwa-chrome",
            "request": "attach",
            "port": 9222,
            "urlFilter": "http://localhost:8200/*",
            // "url": "http://localhost:8200",
        }
    ]
}


① Chrome 디버깅모드 셋팅 ("[VS Code] Live Server 과 Debugger 함께 사용하는 법 - Attach Debugger To Chrome") : "3) Chrome 브라우저 디버깅 포트(9222) 지정" 

② Debugger 확장자 설치 ("[Visual Studio Code][Debugger For Chrome] VS Code의 Chrome Debugger 사용하기")

 ( 과거 Debugger for Chrome이 JavaScript Debugger로 변경되었습니다. )



5. 실행

 위 모든 셋팅이 완료되었다면, 아래와 같이 실행합니다.

1) Chrome 디버깅모드 실행 (port:9222)

2) Vue 프로젝트 Dev 실행 (npm run dev)

3) VS Code 디버거 실행 ("F5")

VS Code 에서 Chrome 디버거 실행 (Vue Project)


0 댓글