素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【VSCoe】VisualStudioCodeでDockerのNode.jsにリモートデバッグしてみよう【Nust.js/Vue.js】

投稿日: 2019年6月18日
最終更新日:

スポンサーリンク

336×280




Dockerコンテナ内のNuxt.jsをデバッグしてみよう

先日、Docker環境を用いたNuxt.jsの開発環境構築についてご紹介しました。

今回はVSCodeを用いたデバッグ方法についてご紹介したいと思います。

手順

前提

今回やりたいことは以下の通りです。

要件

  • VSCodeはホスト側のディレクトリを参照
  • Nuxt.jsはコンテナ側でデバッグ起動しているところにアタッチする
  • デバッガーを仕込み、ホスト側のChromeブラウザでアクセスした際にVSCode側で引っかかる

docker-compose.ymlにデバッグ用ポートの追加

まずは、docker-compose.ymlにデバッグで使用するポートを指定しましょう。

launch.jsonの作成

次にVSCodeのデバッグ起動用設定ファイルを用意しましょう。

package.jsonにデバッグ起動のタスクを追加

次は、package.jsonデバッグ起動するためのタスクを追加しましょう。

ポイントは、--inspect=0.0.0.0:9229の部分です。
ここを他の方の記事にあるように-inspect=9229だけでは、ホスト側からデバッグ接続出来ないので注意です。

確認

では、実際にデバッグしてみましょう。

まずは、コンテナ側でNuxt.jsをデバッグ起動しておきましょう。

正常にデバッグモードで起動出来ました!

Debugger listening on ws://0.0.0.0:9229/2a53a25c-c810-45f2-8f8c-06eb0a807023

この状態でChromeでchrome://inspect/#devices にアクセスすると、Remote TargetNuxt.jsが表示されていると思います。

これでデバッグ接続の準備は出来ました。

VSCodeからコンテナ内のNuxt.jsにアタッチ

では、実際にVSCodeからデバッグ接続してみましょう。

左のデバッグメニューから、先ほど作成した設定を選択して実行ボタンをクリックしましょう。

正常にアタッチ出来るとデバッグ用のツールバーが表示されます。

また、Nuxt.js側のサーバーログにもDebugger attached.と出力されます。

確認

では実際にデバッグをしてみましょう。

デバッグしたい行にdebuggerを埋め込みます。

この状態でブラウザからアクセスしてみましょう。

正常に仕込んだポイントで引っかかりました!!!

変数なども参照出来ます♪

もちろん、変数の値を変えて処理を続ける事も出来ます。

課題

一応、それっぽい事が出来るようになりましたが、いくつか課題が残っています。

未確認のブレークポイント(unverified breakpoint)

今回はdebuggerを仕込む事でデバッグする事が可能になりましたが、VSCodeのブレイクポイントではうまく動作しません。

どうやら、実行時のソースと編集時のソースの関連性がうまく設定出来ていないためブレイクポイントがうまく動作しないようです。

一応、next.config.jsconfig.devtool = '#source-map' を追加したりはしてみましたが、ダメでした。。。

debuggerを仕込む=ソースに手を加える事になるのであまりオススメはしない方法ですのでなんとか解決したいですね。orz

解決方法がわかったら追記か別記事にまとめます!!!

本日のおすすめ商品

Docker/Kubernetes 実践コンテナ開発入門

チャオ (CIAO) 猫用おやつ ちゅ~る まぐろ

日清 カップヌードル

終わりに

以上のように、VSCode上でデバッグを行えるようになりました。

Dockerコンテナを使った開発をしている関係か、ちょっと特殊だったり動きが怪しい部分もあったりしますが、取り急ぎこれでデバッグは出来るので、お困りの方は試してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , ,

blogenist

Author: blogenist