|
|
Publié sur 30/06/2022 20:04:02
|
|
|
|
Exigences : déployez le code du projet front-end (Angular, vue) dans l’environnement de production, et le projet est en placeLe processus de compilation compresse et obscurcit le codeSi un fichier map est généré lors de la compilation, nous pouvons utiliser ce fichier map pour localiser l’emplacement du fichier source.
Qu’est-ce que Sourcemap ?
Une sourcemap est essentiellement un fichier d’information qui stocke les informations de localisation correspondantes avant et après la conversion de code. Il enregistre la localisation du code source avant la conversion correspondant au code compressé, et constitue une correspondance entre le code source et le code de production. Sourcemap résout le problème selon lequel, lors du processus d’emballage, le code est compressé, déspaceé, puis compilé et transformé, ce qui rend impossible le débogage en raison des grandes différences entre les codes.
Le rôle de Sourcemap
En termes simples, Sourcemap construit un pont entre le prétraitement et le post-traitement du code, facilitant la localisation des bugs en production. Parce que le développement front-end actuel est modulaire et basé sur des composants, fusionner et compresser des fichiers JS et CSS avant la mise en ligne peut facilement créer de la confusion. La fonction de sourceMap est de permettre au panneau de débogage du navigateur de mapper le code généré au fichier source, et les développeurs peuvent déboguer le fichier source, ce qui facilitera et facilitera le débogage pour les programmeurs.
D’abord, créez un nouveau projet Angular et écrivez un morceau de code problématique.
Le code html est le suivant :
Le code TS est le suivant :
Lors de l’étape de développement, en cas d’erreur, il est très facile de localiser le mauvais emplacement, comme le montre la figure ci-dessous :
Intégrez le projet dans un paquet de release et générez un fichier map avec la commande suivante :
Déploie le fichier résultant sur un serveur HTTP, tel qu’IIS, Nginx, etc. pendant ce tempsDéplacez le fichier map dans un autre répertoire, pratique pour les tests.
À ce stade, nous ne pouvons pas voir intuitivement le message d’erreur ni le code source, nous installons l'« Outil de localisation du code source » avec la commande suivante :
Introduction des paramètres :
Usage: sl [options]
Options:
-v, --version produit le numéro de version
-p, --source-flie-path Le fichier source généré compilait le fichier map
-l, --ine Le numéro de ligne dans la ligne de code compilée source générée
-c, --colonne Le numéro de colonne dans la source générée
-h, --aide aux informations d’utilisation de la sortie
(Fin)
|
Précédent:Extraire tout le texte d’un fichier PDF en C# (compatible .NET Core)Prochain:Connaissance front-end de JavaScript communément appelée ES6, ES8, ES 2017, ECMAScript
|
Publié sur 30/06/2022 21:36:37