Что такое карты исходных текстов и как их правильно использовать

Вы отлаживаете веб-приложение для клиента, но минифицированная версия кода Javascript и CSS не позволяет понять, какие утверждения на самом деле выполняет браузер.

Вы можете разбивать исходный код строка за строкой в редакторе, помещая несколько утверждений «console.log()» здесь и там, или попытаться отладить его из преобразованного состояния.

Именно здесь вам поможет использование карт исходного кода в качестве удобного инструмента в вашем арсенале разработчика. Как и следует из названия, карты исходного кода позволяют сопоставить код в сжатом файле Javascript с исходным положением в исходном файле, а также помогают в отладке. Это полезный, быстрый и простой способ понять, как отлаживать браузер, а также легко читать скомпилированные скрипты.

Итак, как именно работают карты исходников?

Что такое карты исходных текстов?

Карта исходного текста — это файл, который отображает преобразованный или транспилированный код обратно в исходный текст. Она позволяет разработчикам отлаживать транспилированный код в таких инструментах разработчика, как Chrome Developer Tools или Firefox Developer Tools, просматривая исходный код, включая номера строк, столбцов, имена функций и идентификаторы, которые могли быть изменены в процессе минификации или транспиляции.

Ниже приведен пример карты исходного кода:

{
  "version": 3,
  "sources": ["../src/index.js"],
  "names": ["Celebrate", "ReactDOM", "render", "document", "getElementById"],
  "mappings": "AAAA,MAAMA,SAAS,GAAG,MAAM;AACtB,sBAAO,oFAAP;AACD,CAFD;;AAIAC,QAAQ,CAACC,MAAT,eACE,oBAAC,SAAD,OADF,EAEEC,QAAQ,CAACC,cAAT,CAAwB,MAAxB,CAFF",
  "sourcesContent": [
    "const Celebrate = () => {n  return <p>It's working! 🎉🎉🎉</p>;n};nnReactDOM.render(n  <Celebrate />,n  document.getElementById('root'),n);"
  ]
}

После компиляции кода он будет нечитабелен для человека, поскольку был адаптирован для компьютера, чтобы занимать меньше места при передаче по сети и повысить производительность выполнения.

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

Это значительно облегчает отладку.

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

Встроенная карта исходников

Встроенные карты источников — это просто URL-адреса данных, содержащие объект JSON, который мы видели ранее, закодированный в base64. Это будет выглядеть примерно так:

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC5qcyJdLCJuYW1lcyI6WyJDZWxlYnJhdGUiLCJSZWFjdERPTSIsInJlbmRlciIsImRvY3VtZW50IiwiZ2V0RWxlbWVudEJ5SWQiXSwibWFwcGluZ3MiOiJBQUFBLE1BQU1BLFNBQVMsR0FBRyxNQUFNO0FBQ3RCLHNCQUFPLG9GQUFQO0FBQ0QsQ0FGRDs7QUFJQUMsUUFBUSxDQUFDQyxNQUFULGVBQ0Usb0JBQUMsU0FBRCxPQURGLEVBRUVDLFFBQVEsQ0FBQ0MsY0FBVCxDQUF3QixNQUF4QixDQUZGIiwic291cmNlc0NvbnRlbnQiOlsiY29uc3QgQ2VsZWJyYXRlID0gKCkgPT4ge1xuICByZXR1cm4gPHA+SXQncyB3b3JraW5nISDwn46J8J+OifCfjok8L3A+O1xufTtcblxuUmVhY3RET00ucmVuZGVyKFxuICA8Q2VsZWJyYXRlIC8+LFxuICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgncm9vdCcpLFxuKTsiXX0=

Это специальный комментарий, помещенный в ваш обычный файл JavaScript, чтобы указать браузеру, как связать скомпилированный код с оригинальной версией.

Внешняя карта исходников

Карту исходников можно также поместить в отдельный файл. Это удобно для производственного использования, так как в этом случае загрузка карты исходников необязательна.

Вот пример того, как внешняя карта исходников объявляется прямо из кода фронтенда Inspector:

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

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

Скрытая карта исходников

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

Как использовать карты источников

Все современные браузеры обеспечивают полную поддержку карт источников.

Если вы используете Google Chrome, вы можете легко увидеть доступные карты источников, перейдя на вкладку «Источники» в инструментах разработчика Chrome.

Как показано на рисунке ниже, вы можете вставить точку останова в исходный код, и инструменты разработчика Chrome автоматически сопоставят эту точку останова с минифицированной строкой исходного файла во время выполнения.

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

Карты исходного кода и Google Chrome

Chrome настроен очень эффективно, когда речь идет о картах исходных текстов, поскольку Google приложил немало усилий к спецификации карт исходных текстов. Он ориентирован на отладку, что дает ему небольшое преимущество в этом аспекте. Chrome предлагает расширение отладки для встроенных и внешних карт источников.

Карты исходных текстов и Mozilla Firefox

При использовании инструментов разработчика Firefox для создания карт исходных текстов процесс в некоторой степени схож без добавления расширения прямо в браузер. Вы должны создать карту источников и включить комментарий, который будет указывать на карту источников.

Это позволит увидеть некомбинированный сценарий и значительно упростит отладку, аналогично Chrome.

Резюме по картам исходников

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

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

Попробуйте Inspector бесплатно и столько, сколько захотите

Чтобы дать возможность всем желающим попробовать новый инструмент мониторинга выполнения кода, Inspector предлагает бесплатный уровень с включением до 30 000 ежемесячных транзакций. И это не ограниченная пробная версия. Таким образом, вы и ваша команда можете познакомиться с Inspector без давления сроков.

Inspector помогает разработчикам автоматически находить ошибки и узкие места в своих приложениях. До того, как их заметят пользователи. Узнайте больше о библиотеке Node.js.

-Начните прямо сейчас с 30 000 бесплатных ежемесячных транзакций.