|
|
Публикувано в 30.06.2022 г. 20:04:02 ч.
|
|
|
|
Изисквания: Разгръщане на фронтенд кода на проекта (Angular, vue) в продукционната среда и проектът е вПроцесът на компилация компресира и замъглява кодаАко по време на компилацията се генерира файл с карта, можем да използваме файла с картата, за да локализираме местоположението на изходния файл.
Какво е Sourcemap?
Sourcemap е по същество информационен файл, който съхранява съответната информация за местоположението преди и след конверсията на кода. Той записва местоположението на изходния код преди конверсията, съответстващо на компресирания код, и представлява съпоставяне между изходния код и продукционния код. Sourcemap решава проблема, че по време на процеса на опаковане кодът се компресира, разсейва и компилира и трансформира, което води до невъзможност за дебъгване поради големите разлики между кодовете.
Ролята на Sourcemap
Просто казано, Sourcemap изгражда мост между предварителния и последващия код, което улеснява намирането на места за възникване на бъгове в продукцията. Тъй като днешната front-end разработка е модулна и базирана на компоненти, сливането и компресирането на JS и CSS файлове преди стартиране лесно може да предизвика объркване. Функцията на sourceMap е да позволи на панела за дебъгване на браузъра да съпоставя генерирания код с изходния файл, а разработчиците могат да дебъгват в изходния код, което прави дебъгването много по-лесно и по-лесно за програмистите.
Първо, създайте нов проект за Angular и напишете проблемен код.
Html кодът е следният:
Кодът на TS е следният:
В етапа на разработка, ако има грешка, е много лесно да се намери грешното място, както е показано на фигурата по-долу:
Изградете проекта в пакет за освобождаване и генерирайте картографски файл със следната команда:
Разположи получения файл на HTTP сървър, като IIS, Nginx и др. МеждувременноПремести файла с картата в друга директория, удобно за тестване.
В момента не можем да видим съобщението за грешка и изходния код интуитивно, инсталираме "Tool Source Code Locator Tool" със следната команда:
Въвеждане на параметри:
Usage: sl [options]
Options:
-v, --версия изводи номера на версията
-p, --source-flie-path Генерираният изходен файл компилира картография
-l, --ine Номерът на линия в генерирания изходен компилиран ред код
-c, --колона Номерът на колоната в генерирания източник
-h, --помощ за изход на информация за използване
(Край)
|
Предишен:Извлечете целия текст от PDF файл с помощта на C# (поддържа .NET Core)Следващ:Предно познаване на JavaScript, често наричано ES6, ES8, ES 2017, ECMAScript
|
Публикувано в 30.06.2022 г. 21:36:37 ч.