ホームページ >開発ツール >VSCode >VSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。

VSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。

青灯夜游
青灯夜游転載
2023-04-18 17:22:394128ブラウズ

VSCode でデバッグ環境を構成するにはどうすればよいですか?次の記事では、VSCode を使用して JavaScript ベースの Node.js デバッグ環境を構成する方法を紹介します。

VSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。

1. VSCode と Node.js をインストールする

序文: 科学的研究を行った後は、まれにまとめたり積み重ねたりすることで、科学研究で生じる問題の解決策はより多様で柔軟になるかもしれません。フロントエンド作業を行った後に環境構成を記録するためにブログを書く必要はもうありません。さて、くだらない話はやめて、テキストを始めましょう。

この記事で構成されている環境は、主に個々のJSファイルのブレークポイントデバッグ用で、主にLeetCodeのコードをデバッグするためです。

私の環境:

  • Visual Studio Code 1.66.0
  • Node.js 16.14.2
  • Windows10 64 ビット

VScode のダウンロードについては詳しく説明しませんが、主に Node のインストールを記録します (実際、これまでに何度もインストールしています)。 [推奨学習: vscode チュートリアル プログラミング教育 ]

  1. まず、公式 Web サイトにアクセスして、対応するバージョンをダウンロードします: https:// nodejs.org/ en/
    VSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。
  2. #インストールを開始すると、インストール パスをカスタマイズできます。
    VSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。
  3. ここで [パスの追加] を選択すると、システム変数は自動的に設定されますが、ユーザー変数は自動的に設定されず、必要に応じて手動で追加できます。
    VSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。
  4. インストールが成功したかどうかをテストします。コマンド ラインに node -vnpm -v を入力します。バージョン番号が表示された場合は、 、インストールは成功し、すでに正しい環境変数が設定されています。
    VSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。
    ユーザー変数を追加したことがないため、手動で追加する方が安全です。再起動すると問題は解決しますが、時々、node.js が VSCode でパスを見つけることができません。ただし、2 回再生した後, 常々違和感を感じていたので追加しましたが、インストール時に事前に追加しておくと良いでしょう。
    VSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。
  5. ##これで、Node.js のインストールは完了です

##2. VSCode の設定 #まず 2 つのプラグインを VSCode にインストールします。1 つは

Code Runner
    の実行を担当し、もう 1 つは JS 構文プロンプト
  1. JavaScript(ES6) コード スニペット を実行します。
    構成ファイルを作成し、コード フォルダーを開き、最初に test.js を作成し、いくつかのテスト コードを記述します。次に、左側のサイドバーにあるデバッグ ツールをクリックし、launch.json ファイルの作成を選択します。 VSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。

  2. node.js デバッグ環境を選択すると、画像内でテスト コードも使用できます。 VSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。

  3. このとき、設定ファイルが自動生成されますので、変更箇所に注意して、ここには書かないでください。現在デバッグされているファイルを識別できるように、VSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。program
  4. 属性を
  5. ${file} に変更します。ここでファイル名を毎回変更する必要はありません。デバッグするには、F5 キーを押すだけです。ファイル。
    この時点で、実際の設定は完了です。このときのファイル構造は次のようになります。test.js ファイルに直接ブレークポイントを置き、F5 キーを押してデバッグすることができますVSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。

  6. VSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。
    VSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。

3. 考えられる問題 構成後に VSCode のデバッグを開始した場合実行が完了すると、次のエラーが報告されます: Unable パス上に実行可能なノードが見つかった場合、VSCode を再起動してデバッグしても問題ありません。

ちょっとした感動: 今年の秋の採用活動に向けて、フロントエンドの学習の旅が再び始まりました。仕事をうまくやりたいなら、まずツールを磨く必要があるので、環境の構成に関するブログを書き始めなければなりません。予想通り、次の記事は VSCode での Vue の構成に関する記事になります。インターンシップ中に書いたバンラケジの記事はあまり良くなかったので、もう一度見直して完成させなければなりません。テクノロジーの分野で働くことを選んだからには、それを地道に続けなければなりません。一つの仕事を愛せないなら、一つの仕事をし、一つの仕事をできるだけ愛さなければなりません、そしてラッシュ!

VSCode の詳細については、vscode 基本チュートリアル をご覧ください。

以上がVSCode の Node.js に基づいて JS デバッグ環境を構成する方法について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。