vscodeデバッグnode.jsの方法ステップ

ことばを引く
フロントエンドエンジニアとしてよくお付き合いする開発ツールはIDEエディタとChromeだけではなく、Chromeでデバッグするのはとても便利です。直接開発者ツールのsource欄でブレークしてもいいです。それでは、もしnode関連のコードを書く必要があったら、例えばwebpackの配置項目はどうやって調整して私達の需要を実現しますか？
VSコードの配置
VSコードには単独でdebugのメニューがあり、launch.jsonファイルを指定する必要があり、このファイルはVS Codeにデバッグを開始するために必要な各種の構成を提供する。

// launch.json
//    IntelliSense       。
//             。
//        ，   : https://go.microsoft.com/fwlink/?linkid=830387

{
 "version": "0.2.0",
 "configurations": [
  {
   "type": "node",
   "request": "launch",
   "name": "Launch via NPM",
   "runtimeExecutable": "npm",
   "runtimeArgs": ["run-script", "debug"],
   "cwd": "${workspaceFolder}/envloader/mobile",
   "port": 9229
  }
 ]
}

上記は私達のプロジェクトのデバッグ構成で、runtimeExecutableはデバッグ方式を指定してnpm方式で、runtimeArgsはデバッグパスを実行するパラメータで、cwdはワークディレクトリを指定します。

// package.json

"scripts": {
  "debug": "node --max_old_space_size=12288 --inspect-brk node_modules/webpack/bin/webpack.js --config build/webpack.dev.js --watch"
 },

注意debugスクリプトは--inspect-brkに入力されてこそ、nodeのデバッグ機能が起動されます。
VS Codeデバッグメニューは実行ボタンをクリックして、私達は楽しくデバッグできます。

webpack内部のデータ構造が一目で見られます。
Chrome開発者のツールスタイル
先ほどのwebpack.dev.jsにはlaunch.jsonという属性があります。私たちはブラウザでport: 9229にアクセスできます。

締め括りをつける
デバッグプログラムはコードをより深く理解してくれます。実行時の実行コンテキスト、コールスタックなどの情報を提供できます。また、デバッグラインで混同されたコードの場合は、各種a、o、fなどの理解しにくい変数名パラメータ名も、運転時の変数データから容易にコードの基本論理を解析できます。
ここでvscodeデバッグnode.jsの方法手順についての記事を紹介します。vscodeデバッグnode.jsの内容については以前の文章を検索してください。または下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。