vscodeのデバッグコンパイル済みJSコードステップ分析

今回は vscode のデバッグとコンパイルされた js コードの手順の分析をお届けします。vscode のデバッグとコンパイルされた js コードの注意点は何ですか? 以下は実際的なケースです。

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

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

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

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

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

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

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

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

{
 // 使用 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",
 ]
 // ...
 }
 ]
}

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

を使用できます。 コンパイルされたファイルができたので、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 サイトの他の関連記事に注目してください。

推奨読書:

vueにjsテンキーを導入する手順を詳しく解説

jQueryのクラス名セレクター(.class)の使い方を詳しく解説

以上がvscodeのデバッグコンパイル済みJSコードステップ分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。