Ресурсы для разработчиков: просмотр и загрузка исходных карт вручную.

София Емельянова
Sofia Emelianova

Используйте вкладку «Ресурсы для разработчиков» , чтобы проверить, успешно ли DevTools загружает исходные карты. При необходимости их можно загрузить вручную.

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

Ошибка загрузки исходной карты в консоли.

На вкладке «Ресурсы для разработчиков» вы можете просмотреть состояние загрузки исходной карты и даже загрузить исходные карты вручную.

Откройте ресурсы для разработчиков и проверьте статус

Чтобы проверить статусы загрузки исходных карт:

  1. Откройте DevTools , обязательно включите исходные карты и перейдите к Трехточечное меню. > Дополнительные инструменты > Ресурсы для разработчиков .
  2. В таблице проверьте значения в следующих столбцах:

    • Статус , чтобы узнать, была ли загрузка исходной карты успешной или неудачной.
    • Ошибка чтения сообщения об ошибке, если таковое имеется.

Столбцы Статус и Ошибка.

Фильтрация ресурсов по URL-адресу или ошибке

Чтобы сосредоточиться на исходных картах, которые вас интересуют, введите текст в текстовое поле вверху, чтобы отфильтровать исходные карты, которые не содержат этот текст в URL-адресах или сообщениях об ошибках.

Фильтрация исходных карт, которые не содержат «js» в URL.

Устранение неполадок

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

Чтобы веб-сайт сначала запрашивал исходные карты, в правом верхнем углу Ресурсов для разработчиков установите флажок Флажок. Включите загрузку через target .

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

Загрузите исходную карту вручную

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

  1. Создавайте исходные карты, используя инструменты, которые их поддерживают .
  2. Разместите исходные карты локально.
  3. Откройте DevTools на своей странице и обязательно включите исходные карты .
  4. Откройте развернутый (обработанный) файл в Sources , щелкните его правой кнопкой мыши в Editor и выберите в меню Add source map .

    В меню выберите «Добавить исходные карты».

  5. В текстовом поле укажите URL-адрес исходной карты и нажмите «Добавить» .

    Указание URL-адреса исходной карты.

  6. Проверьте, появилась ли исходная карта в Ресурсах для разработчиков , а исходный файл (сопоставленный из развернутого) — в дереве файлов.

    При загрузке исходной карты вручную исходный файл появляется в дереве файлов.

  7. Приступайте к отладке исходного файла .