Cet article est un article miroir de traduction automatique, veuillez cliquer ici pour accéder à l’article original.

Architect_Programmer_Code Réseau agricole»Architecte › Conception front-end & web › Cadre frontal › Débogage de l’environnement de production Angular 11 Série (XIV) ...
Vue: 11213|Répondre: 0

[Angulaire] Environnement de production Angular 11 série (XIV) pour le débogage

[Copié le lien]
Publié sur 11/08/2020 17:59:35 | | | |
Composants dynamiquement chargés de la série Angular 9 (1)
https://www.itsvse.com/thread-9238-1-1.html

Paramètres de transmission dynamique des composants de la série angulaire 9 (2)
https://www.itsvse.com/thread-9245-1-1.html

La série Angular 9 (3) s’inscrit aux événements dynamiques à composants
https://www.itsvse.com/thread-9246-1-1.html

Canalisations personnalisées Angular 9 Series (IV)
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) formate le format de la monnaie de la quantité
https://www.itsvse.com/thread-9249-1-1.html

La série angulaire 9 (VI) appelle des variables et méthodes JS natives
https://www.itsvse.com/thread-9254-1-1.html

Lunette CSS de type CSS de la série Angular 9 (VII)
https://www.itsvse.com/thread-9264-1-1.html

La série angulaire 9 (VIII) met à jour la valeur d’un composant enfant en déclenchant un événement via un ensemble
https://www.itsvse.com/thread-9267-1-1.html

Série Angular 9 (neuf) #id sélectionneur appliqué sur la page
https://www.itsvse.com/thread-9278-1-1.html

La série Angular 9 (10) intègre les panneaux de débogage des développeurs vconsole et eruda
https://www.itsvse.com/thread-9286-1-1.html

Série Angular 9 (XI) : 5 façons de définir les styles
https://www.itsvse.com/thread-9305-1-1.html

La série Angular 9 (XII) génère des jetons dynamiques basés sur des OTP
https://www.itsvse.com/thread-9325-1-1.html

La série Angular 10 (treize) introduit les graphiques echarts Baidu
https://www.itsvse.com/thread-9347-1-1.html

Nous empaquetons le projet Angular dans un environnement de production avec la commande de compilation, et l’effet attendu peut différer de ce que nous observons dans notre environnement de développement.

Code TS :



AppComponent est le composant actuel.

Les rendus de l’environnement de développement et de l’environnement de production sont les suivants :



L’environnement de production n’était pas du tout ce à quoi nous nous attendions.

À propos des données de commande de compilation :

Optimisation des performances de construction angulaire
https://www.itsvse.com/thread-9203-1-1.html
À ce stade, nous devons le déboguer.
SourceMap est un fichier d’information qui stocke la correspondance de localisation du code source et du code compilé

Dans le travail front-end, il est principalement utilisé pour résoudre des problèmes de débogage dans les trois aspects suivants :

a. Après que la compression de code soit confuse
b. Après compilation en css ou JS en utilisant d’autres langages tels que sass et typeScript
c. Après la fusion multi-fichiers en utilisant des outils de packaging tels que webpack

Dans les trois cas ci-dessus, nous ne pouvons pas déboguer le code source aussi facilement que lors du débogage, donc nous avons besoin de SourceMap pour nous aider à le convertir en code source dans la console afin de débogager.


Nous devons modifier la commande build, qui est la suivante :



(Avant d’ajouter des paramètres)



(Après ajout de paramètres)

Vous pouvez voir que beaucoup de fichiers *.map sont générés.





Comme montré sur l’image ci-dessus, utilisez Google Chrome, appuyez sur F12 pour entrer en mode développeur, sélectionnez la source, sélectionnez main.js, puis faites un clic droit et sélectionnez l’option « Ajouter la carte source » pour ajouter l’adresse du fichier de carte générée.

Par exemple:

http://127.0.0.1:8089/main.568ae4bdd06023f965c7.js.map
(Fin)




Précédent:La série Angular 10 (treize) introduit les graphiques echarts Baidu
Prochain:Appels de navigateurs PC pour exécuter des applications .NET

Articles connexes
Démenti:
Tous les logiciels, supports de programmation ou articles publiés par Code Farmer Network sont uniquement destinés à l’apprentissage et à la recherche ; Le contenu ci-dessus ne doit pas être utilisé à des fins commerciales ou illégales, sinon les utilisateurs assumeront toutes les conséquences. Les informations sur ce site proviennent d’Internet, et les litiges de droits d’auteur n’ont rien à voir avec ce site. Vous devez supprimer complètement le contenu ci-dessus de votre ordinateur dans les 24 heures suivant le téléchargement. Si vous aimez le programme, merci de soutenir un logiciel authentique, d’acheter l’immatriculation et d’obtenir de meilleurs services authentiques. En cas d’infraction, veuillez nous contacter par e-mail.
Mail To:help@itsvse.com