sitateru tech blog: 開発環境

sitateru tech blog

シタテルの技術やエンジニアの取り組みを紹介するテックブログです。

ラベル 開発環境 の投稿を表示しています。 すべての投稿を表示
ラベル 開発環境 の投稿を表示しています。 すべての投稿を表示

2018年11月21日水曜日

Visual Studio CodeでNuxt.jsにデバッガをかける

11月 21, 2018

こんにちは!
シタテル株式会社CTOの和泉です。

シタテルではフロントエンドの開発にNuxt.jsを使っています。

デバッガをかけてたいときはどうしたらいいんだろうと思って調べていたら良さそうなやり方を見つけたので自分の記録がてら書いておきます。

参考:
https://codeburst.io/debugging-nuxt-js-with-visual-studio-code-724920140b8f

手順

Nuxt.jsのプロジェクトを作る部分は割愛します。

1. package.json に コマンド追加

"scripts": {
  "debug": "node --inspect node_modules/.bin/nuxt",

2. デバッガの設定

デバッガを開く
画像左下の虫マークをクリック

実行の設定
図中「Launch Program」右の歯車をクリックして実行設定を開く

実行の追加
右下「Add Configuration」をクリックして「Launch via NPM」を選択すると実行設定が追加されます。追加後はlaunch.jsonファイルを保存してください。

3. デバッガの実行

デバッガの実行
追加された「Launch via NPM」を選択して再生ボタンを押すとデバッガが実行されます。

デバッガの実行
ブレークポイントは debuggerと記述

デバッガの実行
ブレークしたところで変数などを確認できます。

以上、簡単ですがNuxt.jsにデバッガをかけられるようになりました。