vscode を使用して JS コードをデバッグおよびコンパイルする方法-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-05-30 09:47:35

オリジナル

15910 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。