Безопасная отладка исходного кода с помощью исходных карт Azure артефактов

Чтобы безопасно просматривать исходный код разработки и работать с ним в средствах разработки, а не скомпилированный, минифицированный и объединенный рабочий код, возвращаемый веб-сервером, можно использовать исходные карты, опубликованные на сервере символов Azure Артефакты.

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

Скачивание исходных карт с сервера символов артефактов Azure позволяет отлаживать рабочий веб-сайт, безопасно извлекая исходный код разработки.

Предварительные требования. Публикация исходных карт на сервере символов артефактов Azure

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

Сведения о публикации исходных карт см. в статье Безопасная отладка исходного кода путем публикации исходных карт на сервере символов Azure Артефакты.

Шаг 1. Включение карт источников в средствах разработки

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

1. Чтобы открыть средства разработки, в Microsoft Edge щелкните правой кнопкой мыши веб-страницу и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS).

2. В средствах разработки щелкните Параметры () >Параметры.

3. Убедитесь, что установлены флажки Включить исходные карты JavaScript и Включить карты источника CSS :

   

Шаг 2. Подключение средств разработки к серверу символов Azure Artifacts

DevTools необходимо настроить для успешного получения опубликованных исходных карт для веб-сайта.

Чтобы настроить Средства разработки, создайте подключение к серверу символов артефактов Azure. Существует два типа подключений: Microsoft Entra ID, который является самым простым в использовании, и личный маркер доступа.

Подключение к серверу символов с помощью Microsoft Entra ID

1. В средствах разработки щелкните Параметры () >Сервер символов.

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

3. В раскрывающемся списке Режим авторизации выберите Microsoft Entra ID.

   Если параметр Microsoft Entra ID отключен, войдите в Microsoft Edge. Дополнительные сведения см. в статье Вход для синхронизации данных Microsoft Edge на разных устройствах.

4. В разделе Azure организация DevOps нажмите кнопку Выбрать.

   

   Отобразится список организаций DevOps, в которые вы входите.

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

6. Нажмите кнопку Добавить , чтобы создать подключение.

   

7. Нажмите кнопку Закрыть ( в правом верхнем углу, чтобы закрыть панель Параметры , а затем нажмите кнопку Перезагрузить средства разработки .

Подключение к серверу символов с помощью личного маркера доступа

Чтобы подключиться к серверу символов с помощью личного маркера доступа (PAT), сначала создайте новый PAT в Azure DevOps, а затем настройте Средства разработки.

Создание нового PAT в Azure DevOps

1. Войдите в свою Azure организацию DevOps, перейдя по адресу https://dev.azure.com/{yourorganization}.

2. В Azure DevOps перейдите в раздел Параметры пользователейЛичные маркеры> доступа:

   

   Откроется страница Личные маркеры доступа :

   

3. Щелкните Создать токен. Откроется диалоговое окно Создание личного маркера доступа :

   

4. В текстовом поле Имя введите имя для PAT, например "Карты источника средства разработки".

5. В разделе Срок действия введите дату окончания срока действия для PAT.

6. В разделе Области щелкните Показать все области , чтобы развернуть раздел.

7. Прокрутите вниз до пункта Символы и установите флажок Чтение .

8. Нажмите кнопку Создать. Откроется диалоговое окно Успешно:

   

9. Нажмите кнопку Копировать в буфер обмена , чтобы скопировать PAT. Обязательно скопируйте маркер и сохраните его в безопасном расположении. Для вашей безопасности он не будет отображаться снова.

Дополнительные сведения о PAT см. в статье Использование личных маркеров доступа.

Теперь создан новый pat-файл. Затем настройте средства разработки.

Настройка средств разработки

1. В средствах разработки щелкните Параметры () >Сервер символов.

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

3. В раскрывающемся списке Режим авторизации выберите Личный маркер доступа.

4. В текстовом поле Azure DevOps organization (Организация DevOps) введите Azure организацию DevOps, в которой вы создали PAT.

5. В текстовое поле Личный маркер доступа вставьте личный маркер доступа (PAT):

   

6. Нажмите кнопку Добавить. Подключение будет создано.

7. Нажмите кнопку Закрыть ( в правом верхнем углу, чтобы закрыть панель Параметры , а затем нажмите кнопку Перезагрузить средства разработки .

Шаг 3. Получение исходного кода в средствах разработки

После выполнения описанных выше действий по настройке при использовании средств разработки для работы со сборкой веб-сайта, для которой были опубликованы символы, вы можете увидеть исходный исходный код вместо преобразованного кода.

• В средстве консоли ссылки из сообщений журнала на исходные файлы переходят к исходным файлам, а не к скомпилированным файлам.

• При пошаговом выполнении кода в средстве Источники исходные файлы отображаются в области Навигатор слева.

• В средстве Источники ссылки на исходные файлы, которые отображаются в стеке вызовов области Отладчик , открывают исходные исходные файлы.

Подключение к нескольким серверам символов артефактов Azure

Чтобы получить исходные карты из нескольких Azure организаций DevOps, настройте DevTools для подключения к нескольким серверам символов артефактов Azure следующим образом:

1. В средствах разработки щелкните Параметры () >Сервер символов.

2. Щелкните Добавить подключение к серверу символов , чтобы создать дополнительное подключение.

3. Настройте новое подключение. См. статью Подключение к серверу символов с помощью Microsoft Entra ID или Подключение к серверу символов с помощью личного маркера доступа.

Чтобы изменить или удалить существующее подключение, наведите указатель мыши на подключение и нажмите кнопку Изменить () или Удалить () рядом с подключением на странице параметров сервера символов :

Фильтрация сопоставлений источников по URL-адресу

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

1. В средствах разработки щелкните Параметры () >Сервер символов.

2. Создайте новое подключение или измените существующее.

3. В раскрывающемся списке Поведение фильтра выберите список исключений , чтобы исключить определенные карты источников, или Список включений , чтобы включить только определенные карты источников.

4. В текстовом поле под раскрывающимся списком введите один URL-адрес на строку для исходных карт, которые необходимо исключить или включить:

   

5. Нажмите кнопку Сохранить .

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

   Подстановочный знак	Смысл
   ?	Соответствует одному символу.
   *	Соответствует одному или нескольким символам.

   Если выбрать список исключений, devTools попытается найти любые исходные карты для сценариев, кроме тех, которые имеют URL-адрес, соответствующий одной из записей в списке.

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

   https://cdn.contoso.com/*
   https://packages.contoso.com/*
   

   В этом примере DevTools пытается разрешить только исходные карты, соответствующие этим двум шаблонам URL-адресов, и не пытается загрузить карты источника для других сценариев.

Проверка состояния скачанных карт исходного кода

Вы можете проверка состояние исходных карт с помощью средства "Монитор карт источника".

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

См. также

• Безопасная отладка исходного кода путем публикации исходных карт на сервере символов Azure Artifacts
• Сопоставление обработанного кода с исходным исходным кодом для отладки
• Средство мониторинга карт источника
• Усовершенствования подключения DevTools к серверу символов Артефакты Azure в новых средствах разработки (Microsoft Edge 115).