Сохраняйте клиентский код читабельным и отлаживаемым даже после того, как вы его объединили, минимизировали или скомпилировали. Используйте карты исходного кода , чтобы сопоставить исходный код с скомпилированным кодом на панели «Источники» .
Начало работы с препроцессорами
Карты исходного кода из препроцессоров заставляют DevTools загружать исходные файлы в дополнение к минимизированным.
Chrome на самом деле запустит ваш минифицированный код, но на панели «Источники» будет показан код, который вы написали. Вы можете установить точки останова и выполнить пошаговый код в исходных файлах, и все ошибки, журналы и точки останова будут автоматически сопоставлены.
Это создает видимость отладки кода в том виде, в котором вы его написали, в отличие от кода, который обслуживается вашим сервером разработки и выполняется браузером.
Чтобы использовать исходные карты на панели «Источники» :
- Используйте только те препроцессоры, которые могут создавать исходные карты.
- Убедитесь, что ваш веб-сервер может обслуживать исходные карты.
Используйте поддерживаемый препроцессор
Общие препроцессоры, используемые в сочетании с исходными картами, включают, помимо прочего:
- Транспиллеры: Вавилон
- Компиляторы: TypeScript и Dart.
- Минификаторы: более краткие
- Бандлеры и серверы разработки: Webpack , Vite , esbuild и Parcel.
Расширенный список см. в разделе Исходные карты: языки, инструменты и другая информация .
Включить исходные карты в настройках
В 
Настройки > Настройки > Источники , обязательно проверьте 
Карты исходного кода JavaScript .
Проверьте, успешно ли загружены исходные карты.
См. Ресурсы для разработчиков: просмотр и загрузка исходных карт вручную .
Отладка с исходными картами
Когда исходные карты готовы и включены , вы можете сделать следующее:
- Откройте источники вашего веб-сайта на панели «Источники» .
Чтобы сосредоточиться только на коде, который вы создаете, сгруппируйте созданные и развернутые файлы в дереве файлов . Затем разверните
Авторский раздел и откройте исходный файл в редакторе .