Производственная среда серии Angular 11 (XIV) для отладки

Маленькая мразь · Опубликовано 11.08.2020 17:59:35

Динамически нагруженные компоненты серии Angular 9 (1)
https://www.itsvse.com/thread-9238-1-1.html

Угловые параметры передачи 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 Series (IV)
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Series (V) форматирует формат суммы валюты
https://www.itsvse.com/thread-9249-1-1.html

Angular 9 серия (VI) вызывает нативные переменные и методы JS
https://www.itsvse.com/thread-9254-1-1.html

Angular Series 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 Series (девять) #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 Series (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 (тринадцать) вводит диаграммы Baidu echarts
https://www.itsvse.com/thread-9347-1-1.html

Мы упаковываем проект Angular в производственную среду с командой сборки, и ожидаемый эффект может отличаться от того, что мы видим в нашей среде разработки.

Код TS:

Вход виден.

AppComponent — это текущий компонент.

Визуализации среды разработки и производственной среды следующие:

Производственная атмосфера совсем не была такой, как мы ожидали.

О данных команд сборки:

Оптимизация производительности угловой конструкции
https://www.itsvse.com/thread-9203-1-1.html

Сейчас нам нужно отладить её.
SourceMap — это информационный файл, который хранит отображение местоположения исходного кода и скомпилированного кода

В фронтенд-работе он в основном используется для решения отладочных задач по следующим трём аспектам:

a. После сжатия кода путаница
b. После компиляции в css или JS с использованием других языков, таких как sass и typeScript
c. После многофайлового объединения с помощью инструментов упаковки, таких как webpack

В этих трёх случаях мы не можем так легко отладить исходный код, как при отладке, поэтому нам нужен SourceMap, чтобы конвертировать его в исходный код в консоли для отладки.

Нужно изменить команду сборки, которая выглядит следующим образом:

Вход виден.

(Перед добавлением параметров)

(После добавления параметров)

Видно, что создаётся много файлов *.map.

Как показано на картинке выше, используйте Google Chrome, нажмите F12 для перехода в режим разработчика, выберите исходный код, выберите main.js, затем кликнете правой кнопкой мыши и выберите опцию «Добавить карту исходника», чтобы добавить адрес сгенерированного файла карты.

Например:

http://127.0.0.1:8089/main.568ae4bdd06023f965c7.js.map

(Конец)

[Угловат] Производственная среда серии Angular 11 (XIV) для отладки

Связанные публикации

Просмотренные разделы