vscode を使用して JS コードをデバッグおよびコンパイルする方法

今回は、vscode を使用して js コードをデバッグおよびコンパイルする方法と、vscode を使用して js コードをデバッグおよびコンパイルするときの 注意事項 を​​説明します。以下は実際的なケースです。

はじめに

開発プロセスでは、コードのブレークポイント デバッグが一度に完璧なプログラムを作成することはほぼ不可能です。

vscode は、強力な組み込みデバッグ機能を備えた優れた

エディタ です。簡単な設定後、jsファイルをデバッグできるようになります。ただし、デバッグしたいコンテンツがコンパイルされている場合もあります。もちろん、コンパイルされたコードを直接デバッグすることもできます。ただし、コンパイルおよび圧縮後のコードの可読性は非常に低く、モジュールで表示できない場合があります。コンパイル前にコードをデバッグする方法はありますか?答えはもちろん「はい」です。

以下で言うことはあまりありません。詳細な紹介を見てみましょう。

vscode の一般的なデバッグ

vscode のデバッグ インターフェイスはウィンドウの左端にあります:

最新バージョンの vscode では、このオプションはデフォルトで非表示になっており、自分で開く必要があります。

初めてデバッグ インターフェイスを開いたとき、現在デバッグ構成はありません。歯車アイコンをクリックしてデバッグ構成を追加できます:

nodejs を選択すると、.vscode/launch.json ファイルが自動的に作成されます。このファイルは vscode のデバッグ

config ファイル です。

簡単な設定ファイルの内容は次のとおりです:

{
 // 使用 IntelliSense 了解相关属性。 
 // 悬停以查看现有属性的描述。
 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
 {
 "type": "node",
 "request": "launch",
 "name": "启动程序",
 "program": "${workspaceFolder}/index.js"
 }
 ]
}

上記の設定は、デバッグのために現在のディレクトリでindex.jsファイルを開始します。

F5 キーを押すたびに、現在開いているファイルを自動的にデバッグするように設定することもできます。プログラムを変更するだけです:

{
 "program": "${file}"
}

コンパイルされたファイルをデバッグする

コンパイルされたファイルをデバッグしたい場合は、設定するには.jsonファイルを起動する必要があります。

vscode コンパイルされたコードをデバッグするには、どのコードがコンパイルされたかを知る必要があり、コンパイルされたコードとプリコンパイルされたコードの間の対応関係を知る必要があります。

実際、理論的には、vscode は各ファイルをコンパイル済みファイルとして実行するとみなして、ソース ファイルを検索できますか?パフォーマンス上の理由から、どのファイルを自分でコンパイルするかを指定する必要があると思います。 launch.json では、outFiles 属性を使用してコンパイルされた出力ファイルを指定します:

{
 "version": "0.2.0",
 "configurations": [
 {
 // 省略其他设置...
 "outFiles": [
 "${workspaceFolder}/lib/*.js",
 ]
 // ...
 }
 ]
}

少し面倒ですが、幸いなことに

wildcard を使用できます。

コンパイルされたファイルができたので、vscode はソース ファイルと、コンパイルされたファイルとソース ファイル間の対応関係も知る必要があります。このプロセスはソースマップを通じて実装されます。

js ファイルをコンパイルするときに、対応する .map ファイルを生成し、出力 js ファイルの後に .map ファイルのアドレスを追加する必要があります:

//@ sourceMappingURL=./index.js.map

ok。vscode が js ファイルを実行するときに、それが正しいかどうかを確認します。コンパイルされたコードは、デバッグを容易にするために、sourcemap を通じてソース コードにマップされます。

コンパイルを自動的に実行します

これで、開発プロセスは次のようになります: ソースコードを変更 -> ソースコードをコンパイル -> デバッグ。

便宜上、preLaunchTask 属性を設定できます。この属性の機能は、各デバッグの前に事前起動タスクを実行することです。コンパイル プロセスを事前起動タスクに含めることができます。

まず、タスクを設定する必要があります。タスク設定ファイルは .vscode/tasks.json にあります。コマンド パレット (⇧⌘P (Windows、Linux では Ctrl+Shift+P)) を開き、[タスク: 設定] を選択します。 A:

{
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 "version": "2.0.0",
 "tasks": [
 {
 "label": "build",
 "type": "npm",
 "script": "build",
 "problemMatcher": []
 }
 ]
}

ここでは、npm run build をプレタスクとして設定し、デバッグが実行されるたびに最初にビルドが実行されます。

サンプル設定ファイル

{
 // 使用 IntelliSense 了解相关属性。 
 // 悬停以查看现有属性的描述。
 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
 {
 "type": "node",
 "request": "launch",
 "name": "example",
 "program": "${workspaceFolder}/index.js",
 "preLaunchTask": "build",
 "cwd": "${workspaceFolder}",
 "outFiles": [
 "${workspaceFolder}/lib/*.js"
 ]
 }

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSでの一般的な組み込み関数の使い方を詳しく解説

jsを使ってajax関数の関数をカプセル化する方法と使い方

以上がvscode を使用して JS コードをデバッグおよびコンパイルする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。