Бөлісу құралы:

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

  • Мақала

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

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

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

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

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

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

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

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

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

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

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

    Экран настройки параметров в параметрах DevTools

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

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

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

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

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

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

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

    Если параметр идентификатора Microsoft Entra отключен, войдите в 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 введите организацию Azure DevOps, в которой вы создали PAT.

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

    Экран конфигурации сервера символов в параметрах DevTools с полями, необходимыми для создания нового подключения PAT

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопки удаления и редактирования на элементе подключения на странице параметров сервера символов

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

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

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

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

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

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

    Параметр списка включения на экране редактирования подключения к серверу символов

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

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

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

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

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

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

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

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

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

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

См. также