Сохраняйте клиентский код читабельным и отлаживаемым даже после того, как вы его объединили, минимизировали или скомпилировали. Используйте карты исходного кода , чтобы сопоставить исходный код с скомпилированным кодом на панели «Источники» .
Начало работы с препроцессорами
Карты исходного кода из препроцессоров заставляют DevTools загружать исходные файлы в дополнение к минимизированным.
Chrome фактически запустит ваш минифицированный код, но на панели «Источники» будет показан код, который вы написали. Вы можете установить точки останова и выполнить пошаговый код в исходных файлах, и все ошибки, журналы и точки останова будут автоматически сопоставлены.
Это создает видимость отладки кода в том виде, в котором вы его написали, в отличие от кода, который обслуживается вашим сервером разработки и выполняется браузером.
Чтобы использовать исходные карты на панели «Источники» :
- Используйте только те препроцессоры, которые могут создавать исходные карты.
- Убедитесь, что ваш веб-сервер может обслуживать исходные карты.
Используйте поддерживаемый препроцессор
Общие препроцессоры, используемые в сочетании с исходными картами, включают, помимо прочего:
- Транспиллеры: Вавилон
- Компиляторы: TypeScript и Dart.
- Минификаторы: более краткие
- Бандлеры и серверы разработки: Webpack , Vite , esbuild и Parcel.
Расширенный список см. в разделе Исходные карты: языки, инструменты и другая информация .
Включить исходные карты в настройках
В 
Настройки > Настройки > Источники , обязательно проверьте 
Карты исходного кода JavaScript .
Проверьте, успешно ли загружены исходные карты.
См. Ресурсы для разработчиков: просмотр и загрузка исходных карт вручную .
Отладка с исходными картами
Когда исходные карты готовы и включены , вы можете сделать следующее:
- Откройте источники вашего веб-сайта на панели «Источники» .
Чтобы сосредоточиться только на коде, который вы создаете, сгруппируйте созданные и развернутые файлы в дереве файлов . Затем разверните
Авторский раздел и откройте исходный файл в редакторе . 
Установите точку останова , как обычно. Например, логпоинт . Затем запустите код.
Обратите внимание, что редактор помещает ссылку на развернутый файл в строку состояния внизу. Аналогично это происходит и с развернутыми CSS-файлами.
Откройте ящик консоли . В этом примере рядом с сообщением точки журнала консоль показывает ссылку на исходный файл, а не на развернутый.
Измените тип точки останова на обычный и запустите код еще раз. На этот раз выполнение приостанавливается.
Обратите внимание, что на панели «Стек вызовов» отображается имя исходного файла, а не развернутого.
В строке состояния в нижней части редактора щелкните ссылку на развернутый файл. Панель «Источники» приведет вас к соответствующему файлу.
Когда вы открываете любой развернутый файл, DevTools уведомляет вас, если он обнаружил комментарий //# sourceMappingURL и связанный с ним исходный файл.
Обратите внимание, что редактор автоматически распечатывает развернутый файл. На самом деле он содержит весь код в одной строке, за исключением комментария //# sourceMappingURL .
Назовите вызовы eval() с #sourceURL
#sourceURL позволяет упростить отладку при работе с вызовами eval() . Этот помощник очень похож на свойство //# sourceMappingURL . Дополнительную информацию см. в спецификации Source Map V3 .
Комментарий //# sourceURL=/path/to/source.file указывает браузеру искать исходный файл при использовании eval() . Это поможет вам назвать ваши оценки, встроенные скрипты и стили.
Проверьте это на этой демонстрационной странице :
- Откройте DevTools и перейдите на панель «Источники» .
- На странице введите произвольное имя файла в поле ввода «Назовите свой код:» .
- Нажмите кнопку «Компилировать» . Появится предупреждение с оцененной суммой из источника CoffeeScript.
- В дереве файлов на панели страниц откройте новый файл с введенным вами пользовательским именем. Он содержит скомпилированный код JavaScript с комментарием
// #sourceURLс оригинальным именем исходного файла. - Чтобы открыть исходный файл, нажмите ссылку в строке состояния Редактора .
