目次

はじめに

今回はVS codeのchrome debuggerを使ってデバッグしてみたのでその記録を残しておく。

設定

最初にchrome debuggerをインストール

nuxt.config.js内のwebpackの拡張で以下のコードを追加

extend(config, { isDev, isClient }) {
  if (isDev && isClient) {
    config.module.rules.push({
      test: /\.ts$/,
      enforce: 'pre',
      loader: 'tslint-loader',
      options: {
        configFile: 'tslint.json',
        tsConfigFile: 'tsconfig.json'
      },
      devtool: 'source-map'
    })
  }
}

次に左側のデバッグアイコンでメニューをデバッグ画面に切り替え

左上にセレクトフォームがあるのでそこからadd configurationを押してchromeを選択する

launch.jsonに以下のコードを貼り付け

webrootに関しては各自環境に合わせておこう

これで設定は完了。実装に動かしてみよう。

ちなみにポート番号はNuxtなので3000番を使用。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

これで後はブレークポイントを指定してデバッグしてあげれば簡単に変数の中身を確認することができる。

まとめ

一応デバッグはできるようになったのだが、結局chromeのdev toolを使ったほうが簡単。

何よりもVS codeから使うと重くなってあまり良くなかった。

これからはchromeの拡張機能でdev toolを活用していきたいと思う。