この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

眺める: 11213|答える: 0

[角] デバッグ用のAngular 11シリーズ(XIV)本番環境

[リンクをコピー]
掲載地 2020/08/11 17:59:35 | | | |
Angular 9シリーズ(1)動的負荷成分
https://www.itsvse.com/thread-9238-1-1.html

Angular 9系列(2)動的成分伝送パラメータ
https://www.itsvse.com/thread-9245-1-1.html

Angular 9シリーズ(3)は動的コンポーネントイベントをサブスクライブします
https://www.itsvse.com/thread-9246-1-1.html

Angular 9シリーズ(IV)カスタムパイプパイプライン
https://www.itsvse.com/thread-9248-1-1.html

Angular 9シリーズ(V)は金額通貨形式をフォーマットします
https://www.itsvse.com/thread-9249-1-1.html

Angular 9シリーズ(VI)はネイティブのJS変数とメソッドを呼び出します
https://www.itsvse.com/thread-9254-1-1.html

Angular 9シリーズ(VII)CSSスタイルのスコープ
https://www.itsvse.com/thread-9264-1-1.html

Angular 9シリーズ(VIII)は、集合を通じてイベントをトリガーすることで子コンポーネントの値を更新します
https://www.itsvse.com/thread-9267-1-1.html

Angular 9シリーズ(9)#id セレクターがページに適用されています
https://www.itsvse.com/thread-9278-1-1.html

Angular 9シリーズ(10)はvconsoleおよびerudaの開発者デバッグパネルを埋め込みます
https://www.itsvse.com/thread-9286-1-1.html

Angular 9シリーズ(XI)スタイルの定義方法5
https://www.itsvse.com/thread-9305-1-1.html

Angular 9シリーズ(XII)はOTPに基づいて動的トークンを生成します
https://www.itsvse.com/thread-9325-1-1.html

Angular 10シリーズ(13)は百度eチャートチャートを導入します
https://www.itsvse.com/thread-9347-1-1.html

Angularプロジェクトをビルドコマンドで本番環境にパッケージ化しますが、期待される効果は開発環境で見られるものとは異なる場合があります。

TSコード:



AppComponentが現在のコンポーネントです。

開発環境および本番環境のレンダリングは以下の通りです。



本社環境は私たちが期待していたものとは全く違っていました。

ビルドコマンドデータについて:

Angularビルドパフォーマンス最適化
https://www.itsvse.com/thread-9203-1-1.html
今はデバッグが必要です。
SourceMapは、ソースコードとコンパイルされたコードの位置マッピングを保存する情報ファイルです

フロントエンドの作業では、主に以下の3つの側面でデバッグ問題を解決するために使われます。

a. コード圧縮が混乱する場合
b. sassやtypeScriptなど他の言語を使ってCSSやJSにコンパイルした後
c. webpackのようなパッケージングツールを用いたマルチファイルの統合後

上記の3つのケースでは、デバッグ時ほど簡単にソースコードをデバッグできないため、コンソール内でソースコードに変換してデバッグするためにSourceMapが必要です。


ビルドコマンドを修正する必要があります。以下は以下の通りです:



(パラメータを追加する前に)



(パラメータを追加した後)

多くの*.mapファイルが生成されているのがわかります。





上の写真のように、Google Chromeを使い、F12キーで開発者モードに入り、ソースを選択し、main.jsを選択し、右クリックして「ソースマップを追加」オプションを選択して生成されたマップファイルアドレスを追加します。

例えば:

http://127.0.0.1:8089/main.568ae4bdd06023f965c7.js.map
(終わり)




先の:Angular 10シリーズ(13)は百度eチャートチャートを導入します
次に:.NETアプリケーションを実行するためのPCブラウザ呼び出し
免責事項:
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。

Mail To:help@itsvse.com