Отладка JavaScript в production с помощью Source Maps
Инструменты

Отладка JavaScript в production с помощью Source Maps

Код, который вы пишете, отличается от того, что работает в бразуре в production-среде. Возможно, вы используете язык, «компилирующийся» в JavaScript — такой как CoffeeScript, TypeScript, или новую версию стандарта JavaScript, ECMAScript 2015 (ES6). Или, возможно, минифицируете исходный код, чтобы уменьшить размер скриптов, с помощью, скажем, UglifyJS.

Такие инструменты называют транляторами, они транслируют код с одного языка на другой.

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

Здесь на помощь приходят карты кода, или Source Maps.

Sources Maps

Карта кода (source map) — это JSON-файл, который содержит информацию о том, как транслировать код обратно в исходный код.

Пример карты кода:


{
    version : 3,
    file: "app.min.js",
    sourceRoot : "",
    sources: ["foo.js", "bar.js"],
    names: ["src", "maps", "are", "fun"],
    mappings: "AAgBC,SAAQ,CAAEA"
}

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

  • version — версия спецификации карты кода (должно быть"3″).
  • file — файл, с которым связана карта кода.
  • sourceRoot — url-адрес, по которому доступны все свзанные исходники (необязательно).
  • sources — массив URL-адресов, по которым доступны исходные файлы.
  • names — массив имен переменных/методов, найденных в вашем коде.
  • mappings — соответствующие минифицированные названия.

sourceMappingURL

Чтобы браузер мог определить, откуда загружать карту кода, в конце транслируемого файла должна быть директива sourceMappingURL:


// app.min.js
$(function () {
    // your application ...
});
//# sourceMappingURL=/path/to/app.min.js.map

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

Пошаговая отладка исходного кода ES6 + JSX в Firefox с помощью карт кода
Пошаговая отладка исходного кода ES6 + JSX в Firefox с помощью карт кода

Примечание: браузеры скачивают и используют карты кода только при открытой панели разработчика.

Генерация карт кода

Ок, теперь мы знаем как работают карты кода и как заставить браузер загружать и использовать их. Но как сгенерировать карту кода и сделать ссылку на нее в транслированном файле?

Хорошие новости: практически любой современный транслятор имеет опцию для генерации карты кода. Давайте рассмотрим несколько таких примеров.

UglifyJS

UglifyJS — это популярный инструмент минификации исходного кода для production-среды. Он может значительно уменьшить размер файлов путем устранения пробелов, изменения имен переменных, удаления мертвых ветвей кода, и так далее.

Если вы используете UglifyJS, команда ниже дополнительно создаст карту кода:


$ uglifyjs app.js -o app.min.js --source-map app.min.js.map

Если посмотреть на сгенерированный файл (app.min.js), можно заметить, что последняя строка содержит директиву sourceMappingURL, указывающую на сгенерированную карту кода.


//# sourceMappingURL=app.min.js.map

Обратите внимание, что адрес относительный. Для того, чтобы браузер мог скачать карту кода, она должна быть доступна в той же директории, что и минифицированный файл (app.min.js).

Относительный адрес — это не единственный способ указать sourceMappingURL. Вы можете передать UglifyJS параметр --source-map-url <url>. Также можно встроить карту кода сразу в минифицированный файл.

Webpack

Webpack — это мощный инструмент для сборки JavaScript модулей. Сгенерировать карту кода с помощью Webpack крайне просто. Нужно всего лишь указать параметр output.sourceMapFilename в конфигурационном файле:


// webpack.config.js
module.exports = {
    // ...
    entry: {
      "app": "src/app.js"
    },
    output: {
      path: path.join(__dirname, 'dist'),
      filename: "[name].js",
      sourceMapFilename: "[name].js.map",
    },
    // ...
};

Заключение

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

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться