検索
ホームページウェブフロントエンドjsチュートリアル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",
 ]
 // ...
 }
 ]
}

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

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 サイトの他の関連記事に注目してください。

推奨読書:

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

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

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール