実用戦闘フロントエンドの行番号と列番号は、マップファイルを通じて異常ソースファイルに割り当てられます

クズども · 掲載地 2022/06/30 20:04:02

要件:フロントエンドプロジェクト(Angular、Vue)コードを本番環境にデプロイし、プロジェクトはコンパイルプロセスはコードを圧縮し難読化しますコンパイル中に地図ファイルが生成された場合、その地図ファイルを使ってソースファイルの位置を特定することができます。

Sourcemapとは何ですか?

ソースマップは本質的に、コード変換前後に対応する位置情報を格納する情報ファイルです。圧縮コードに対応する変換前のソースコードの位置を記録し、ソースコードと本番コード間のマッピングです。 Sourcemapは、パッケージング過程でコードが圧縮・スペース切り、コンパイルおよび変換される問題を解決し、コード間の大きな違いのためにデバッグが困難になる問題を解決します。

Sourcemapの役割

簡単に言えば、Sourcemapは前処理と後処理コードをつなぐ橋渡しを築き、本番環境でバグがどこに発生しているかを簡単に特定できます。今日のフロントエンド開発はモジュール化かつコンポーネントベースであるため、稼働前にJSやCSSファイルを統合・圧縮すると混乱を招きやすいです。 sourceMapの機能は、ブラウザのデバッグパネルが生成されたコードをソースコードファイルにマッピングし、開発者がソースコードファイル内でデバッグできるようにすることで、プログラマーのデバッグがはるかに簡単かつ簡単になります。

まず、新しいAngularプロジェクトを作成し、問題のあるコードを書きます。

HTMLコードは以下の通りです:

ログインが見えます。

TSコードは以下の通りです:

ログインが見えます。

開発段階では、エラーが発生した場合、下図のように誤った位置を特定するのが非常に容易です。

プロジェクトをリリースパッケージにビルドし、以下のコマンドでmapファイルを生成します:

ログインが見えます。

得られたファイルをIIS、NginxなどのHTTPサーバーに展開します。その間マップファイルを別のディレクトリに移動してください、テストに便利です。

WindowsにHTTP-serverをインストールしてHTTPサーバーを有効にします
https://www.itsvse.com/thread-6838-1-1.html

現時点でエラーメッセージやソースコードを直感的に確認できないため、「ソースコードロケーターツール」を以下のコマンドでインストールします。

ログインが見えます。

パラメータ紹介:

Usage: sl [options]

Options:
  -v, --バージョンバージョン番号を出力します
  -p, --source-flie-path 生成されたソースファイル compiled map file
  -l, --ine 生成されたソースコンパイルコードの行番号
  -c, --column 生成されたソースの列番号
  -h, --help 出力使用情報

テストはmapファイルを通じてソースコードの行番号やその他の情報を見つけることで、コマンドは以下の通りです:

ログインが見えます。

(終わり)

トビウオ · 掲載地 2022/06/30 21:36:37

学ぶために

[その他] 実用戦闘フロントエンドの行番号と列番号は、マップファイルを通じて異常ソースファイルに割り当てられます

関連記事

閲覧したセクション