Сопоставление обработанного кода с исходным исходным кодом для отладки

Статья
02/06/2024

Чтобы просматривать исходный код и работать с ним при отладке JavaScript в средствах разработки, а не работать с скомпилированной и уменьшенной версией кода, возвращаемой веб-сервером, используйте исходные карты.

Сопоставление исходного кода обеспечивает читаемый и отлаживаемый код на стороне клиента даже после компиляции и минимизации кода и объединения его в один файл. Исходные карты сопоставляют скомпилированный, минифицированный код с исходными файлами исходного кода. Затем в средствах разработки можно читать и отлаживать знакомый исходный код вместо неузнаваемого преобразованного и скомпилированного кода.

Чтобы использовать исходные карты, при создании кода необходимо использовать средство, которое может создавать исходные карты. Существует множество средств, таких как:

Sass или PostCSS, которые могут создавать исходные карты для CSS.
Компилятор TypeScript , который компилирует TypeScript в JavaScript и может создавать исходные карты для отладки исходного кода TypeScript.
Транспилер Babel, который может создавать карты источников CSS и JavaScript.
Средства сборки, такие как Webpack, Rollup, Vite и Parcel, которые также могут создавать исходные карты.

В этой статье объясняется, как включить исходные карты в devTools и как использовать их для отладки кода. В нем не объясняется, как создавать исходные карты в процессе сборки. Дополнительные сведения о публикации исходных карт на сервере символов Azure Artifacts см. в статье Безопасная отладка исходного кода путем публикации исходных карт на сервере символов Azure Artifacts.

Исходные карты в средствах разработки

Исходные карты из средств сборки заставляют DevTools загружать исходные файлы в дополнение к миниифицированным файлам и заменять миниифицированный код исходным кодом. Например:

В средстве Источники можно просмотреть исходные файлы и задать в них точки останова.
В средстве Производительность можно просмотреть исходные имена функций на диаграмме пламени.
В средстве Консоли можно просмотреть исходные имена файлов и номера строк в трассировках стека.

В то же время Microsoft Edge фактически выполняет миниифицированный код для отрисовки веб-страницы. Исходные карты используются только средствами разработки и только для отображения исходного кода разработчикам.

DevTools знает, как загрузить карту источника при обнаружении //# sourceMappingURL= комментария в скомпилированном файле. Например, следующий комментарий указывает DevTools загрузить карту источника из http://example.com/path/to/your/sourcemap.map:

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

Включение исходных карт в средствах разработки

Исходные карты включены по умолчанию.

Чтобы убедиться, что карты источника включены, выполните следующие действия:

Чтобы открыть средства разработки, в Microsoft Edge щелкните правой кнопкой мыши веб-страницу и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS).
В DevTools щелкните Настройка и управление Средствами разработки () >Параметры () >Параметры.
На странице Параметры в разделе Источники установите флажки Включить исходные карты JavaScript и Включить карты источников CSS :
В правом верхнем углу окна Параметры нажмите кнопку Закрыть ().

Включение загрузки карт источника из удаленных путей к файлам

По умолчанию Средства разработки не загружают карты источников, если URL-адрес карты источника является удаленным путем к файлу, например когда URL-адрес исходной карты начинается с file:// и предназначен для файла, который не находится на текущем устройстве.

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

В DevTools щелкните Настройка и управление Средствами разработки () >Параметры () >Параметры.
На странице Параметры в разделе Источники установите флажок Разрешить средствам разработки загружать ресурсы, например карты источников, из удаленных путей к файлам. Отключено по умолчанию из соображений безопасности.

Отладка с помощью карт источников

При отладке кода и при включении исходных карт карты используются в нескольких местах:

В средстве консоли ссылки из сообщений журнала на исходные файлы переходят к исходным файлам, а не к скомпилированным файлам.
При пошаговом выполнении кода в средстве Источники исходные файлы отображаются в области Навигатор слева. При открытии исходного файла отображается его исходный код, в котором можно задать точки останова. Дополнительные сведения об отладке с помощью точек останова в средстве Источники см. в статье Приостановка кода с точками останова.
В средстве Источники ссылки на исходные файлы, которые отображаются в стеке вызовов области Отладчик , открывают исходные исходные файлы.
В инструменте Производительность на диаграмме пламени отображаются исходные имена функций, а не скомпилированные имена функций.

См. также

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и авторами Меггин Кирни (Технический писатель) и Пол Бакаус (Open Web Developer Advocate, Google: Tools, Performance, Animation и UX).

Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.

Поделиться через