Ескертпе
Бұл бетке кіру үшін қатынас шегін айқындау қажет. Жүйеге кіруді немесе каталогтарды өзгертуді байқап көруге болады.
Бұл бетке кіру үшін қатынас шегін айқындау қажет. Каталогтарды өзгертуді байқап көруге болады.
Чтобы просматривать исходный код и работать с ним при отладке 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 щелкните Настройка и управление Средствами разработки (
) >Параметры () >Параметры.На странице Параметры в разделе Источники установите флажок Разрешить средствам разработки загружать ресурсы, например карты источников, из удаленных путей к файлам. Отключено по умолчанию из соображений безопасности.
Отладка с помощью карт источников
При отладке кода и при включении исходных карт карты используются в нескольких местах:
В средстве консоли ссылки из сообщений журнала на исходные файлы переходят к исходным файлам, а не к скомпилированным файлам.
При пошаговом выполнении кода в средстве Источники исходные файлы отображаются в области Навигатор слева. При открытии исходного файла отображается его исходный код, в котором можно задать точки останова. Дополнительные сведения об отладке с помощью точек останова в средстве Источники см. в статье Приостановка кода с точками останова.
В средстве Источники ссылки на исходные файлы, которые отображаются в стеке вызовов области Отладчик , открывают исходные исходные файлы.
В инструменте Производительность на диаграмме пламени отображаются исходные имена функций, а не скомпилированные имена функций.
См. также
- Безопасная отладка исходного кода путем публикации исходных карт на сервере символов Azure Artifacts
- Безопасная отладка исходного кода с помощью исходных карт Azure артефактов
- Средство мониторинга карт источника
Примечание.
Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и авторами Меггин Кирни и Пол Бакаус.
Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.