目標
webpack-dev-server上で実行したReactをVSCodeでデバックできるようにする。
環境
- OS
- macOS Catalina 10.15.6
- Windows 10
- VSCode: 1.49.2
- Debugger for Chrome: 4.12.11
- React: 16.13.1
- webpack: 4.43.0
- webpack-dev-server: 3.11.0
Webpackの設定
ソースマップの設定が必要になります。
ソースマップはバンドルする前と後のコードを関連付けてくれるものです。
webpackのconfigにdevtoolsを設定するとソースマップが利用できるようになります。
例として自分が設定した値を載せます。
webpack.config.js
module.exports = {
...略
devtool: 'inline-source-map',
devServer: {
...他のパラメータに関しては以下を参考にしてください。
https://webpack.js.org/configuration/devtool/
上記config設定後、実行時の引数として -dを付与すると、VSCodeでデバック可能なwebpack-dev-serverが立ち上がります。
webpack-dev-server -d
VSCodeの設定
以下デバックに必要なExtensionsのインストールと、launch.jsonの編集が必要になります。
Debugger for Chrome
[Deprecated] Debugger for Chrome – Visual Studio Marketplacehttps://marketplace.visualstudio.com
launch.json
{
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8080", //ポート番号は環境ごとによしなに
"webRoot": "${workspaceFolder}"
}
]
}
デバック方法
- webpack-dev-serverを起動
- デバック画面からlaunchを起動
- 起動したChromeで画面操作
- ブレークで止まった際にデバック画面を操作
おわりに
以上でVSCodeでwebpack-dev-server上で動く、Reactがデバックできるようになります。
バンドル化する前のコードで追いかけることが可能になりますので、かなり楽になるのではないでしょうか。