Файл css map что это

Обновлено: 04.07.2024

Исходный код компонентов фремворка Bootstrap распределен по множеству CSS-файлов. Как известно, загрузка большого количества маленьких файлов обычно медленнее, чем загрузка одного большого. По этой причине таблицы стилей CSS Bootstrap "конкатенированы" (объединены) специальным инструментом и распространяются в виде единственного файла bootstrap.css.

Однако, у файла bootstrap.css есть и недостаток: он содержит много символов (пробелы, разрывы строки, комментарии и т.д.), ненужные для выполнения кода и лишь впустую тратящие пропускную способность сети при скачивании файла, что увеличивает время загрузки страницы. Для решения этой проблемы используется минификация.

Минификация - это процесс удаления всех ненужных символов из исходного кода без изменения его функциональности. Минифицированный файл Bootstrap называется bootstrap.min.css.

Как правило, рекомендуется использовать мнифицированный файл, особенно в производственной среде, потому что это уменьшает время загрузки страницы. Однако, если вы планируете разбираться в коде Bootstrap, чтобы понять, как он работает, лучше используйте обычный (не минифицированный) файл или вообще скачайте оригинальные исходные файлы (еще не конкатенированные).

Давайте детальнее посмотрим на файлы, хранящиеся внутри каталога APP_DIR/public и его подкаталогов (рисунок В.1).

Рисунок В.1. Структура каталога APP_DIR/public

Рисунок В.1. Структура каталога APP_DIR/public

Каталог css содержит таблицы стилей CSS:

Файлы bootstrap.css и bootstrap.min.css - соответственно обычная и минифицированная версия Bootstrap.

Файл bootstrap-theme.css - опциональный файл темы, используется для совершенствования внешнего вида сайта. bootstrap-theme.min.css - его минифицированная версия.

Файл style.css - таблица стилей, которую вы можете использовать (а также расширить), чтобы определить свои собственные CSS-правила - они будут применены поверх правил Bootstrap. Таким образом вы можете кастомизировать внешний вид вашего веб-приложения.

Также вы можете заметить различные файлы с расширением .map - это MAP-файлы 50 , которые могут быть использованы для отладки CSS-кода.

50) После конкатенации и минификации CSS-код сложен для чтения и отладки. MAP-файл (карта кода) позволяет вернуть минифицированный файл к его обычному виду.

Каталог fonts содержит несколько файлов (например, glyphicons-halflings-regular.svg) нужных Bootstrap для рендеринга иконок (так называемых глиф-иконок, glyphicons). Их можно использовать для улучшения внешнего вида кнопок и выпадающих меню.

Подкаталог APP_DIR/public/js содержит расширения JavaScript фреймворка Bootstrap. Они реализованы как плагины jQuery:

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

В таких случаях отладка скомпилированного CSS может быть как хлопотной, так и длительной. Sass предоставляет флаг для включения номеров строк ( --line-numbers ), который включает комментарии (как --line-numbers ниже) в вашем CSS.

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

Итак, как мы можем сделать этот процесс проще?

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

Требования к браузеру и Sass

Функция исходных карт привлекла большое внимание, когда она была впервые представлена, и с тех пор многое изменилось. Теперь он доступен в последних стабильных версиях Chrome, Firefox и Safari.

Вам не требуется Chrome Canary, и вам не нужно редактировать chrome://flags чтобы использовать это. Вам нужно только применить правильные настройки, чтобы включить его.

Для исходных карт требуется Sass 3.3 или выше ( Sass 3.4 был выпущен недавно).

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

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

Ниже приведено содержимое усеченного файла .map .

Как помогают Source Maps?

При отладке веб-страницы с помощью инструментов разработчика Chrome с использованием исходных карт на панели стилей будет отображаться, с какой частью Sass пришел ваш CSS, вместо того, чтобы указывать на файл CSS. style.css вместо того, чтобы показывать источник как style.css , он будет отображаться как _buttons.scss .

В примере на скриншоте ниже стили для элемента body происходят из части с именем _body.scss .

Скриншот инструментов Dev

При проверке я хотел бы знать, где я определил color: black участок в этом.

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

Проверка и живое редактирование Sass в браузере

Использование исходных карт в Workspaces позволяет редактировать и сохранять изменения из инструментов разработчика Chrome. Если sass --watch запущен, он обнаружит изменение и перекомпилирует CSS. Браузер автоматически перезагрузит этот новый CSS.

Включение исходных карт в плагинах node-sass

Все плагины node-sass имеют API для включения опции карты источника Sass.

broccoli- sourceMap: true активирует исходные карты.

Включение исходных карт с использованием драгоценного камня Sass Ruby

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

Включение исходных карт с помощью Compass

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

Или вы можете добавить sass_options = в файл config.rb и запустить config.rb compass watch как обычно.

Включение исходных карт в Chrome

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

Чтобы это работало в Chrome, выполните следующие действия:

  1. Открытые инструменты разработчика.
  2. Нажмите на значок шестеренки (вверху справа), чтобы открыть Настройки.
  3. В разделе «Общие» найдите раздел «Источники». В этом разделе выберите «Включить исходные карты CSS».
  4. Убедитесь, что сопровождающий «Автоматическая перезагрузка сгенерированного CSS» также включен.

Включение исходных карт в браузере

Последний шаг помогает перезагрузить CSS при его изменении. Думайте об этом как о функции перезагрузки в реальном времени только для CSS.

Примечание. Вам все равно придется компилировать SCSS отдельно, используя Grunt, Gulp, sass watch или compass watch. Как только CSS будет сгенерирован, функция автоматически перезагрузит его для вас.

Живое редактирование SCSS в браузере

Включение Chrome Workspaces позволит вам сохранить (при желании) изменения, которые вы вносите в свои настоящие файлы в веб-инспекторе Chrome. Таким образом, вам не нужно пробовать свои изменения в браузере, смотреть, что работает, а затем возвращаться к своему редактору, чтобы сохранить эти изменения.

Чтобы включить рабочие области в Chrome, выполните следующие действия.

  1. Откройте инструменты разработчика Chrome.
  2. Нажмите на значок шестеренки, чтобы открыть панель настроек.
  3. Выберите опцию «Рабочая область» в левой части панели «Настройки».
  4. Выберите корневую папку вашего проекта в разделе «Папки».
  5. Дайте Chrome разрешение на доступ к вашей локальной файловой системе.

Включение рабочих областей в Chrome

Это добавит все ваши файлы проекта на панель «Источники» в инструментах разработчика.

Отображение с локального хоста на файл на диске

Последний шаг для редактирования SCSS в браузере требует сопоставления файлов с локального хоста с исходными файлами. Выполнение следующих действий активирует это отображение:

  1. При просмотре страницы на вашем локальном сервере, проверьте любой элемент на вашей странице.
  2. В инструментах разработчика выберите вкладку Sources.
  3. В дереве файлов слева щелкните правой кнопкой мыши таблицу стилей и выберите «Сопоставить с ресурсом файловой системы…».
  4. Это вызовет диалог поиска файлов. Выберите соответствующий файл (вашу таблицу стилей).
  5. Перезапустите инструменты разработчика.

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

Если вы следите за изменениями в Sass, SCSS будет скомпилирован, и CSS автоматически обновится на вашей странице, включая ваши изменения.

Вывод

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

Хотя эта статья посвящена тому, чтобы исходные карты работали в Chrome, вы можете сделать то же самое в Firefox и Safari . Internet Explorer 11 также поддерживает исходные карты, но, похоже, нет никакой информации об использовании исходных карт в этом браузере с Sass, поэтому вам придется попробовать его самостоятельно.

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

Что это означает и где взять ее? В скрипте такого файла нет.

1 ответ 1

Это значит, что данный CSS код был сгенерирован с помощью какого-то CSS-препроцессора с использованием Карты Кода(Source Map). Если в этом файле тебе всё понятно(или разбираться в нём не нужно) и работает он корректно, то эту строку можно смело удалить.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript css или задайте свой вопрос.

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459

Sass — это отличный и очень популярный CSS-препроцессор. Если вы не знакомы с ним, взгляните на эти уроки.

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

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

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

Синтаксис ассоциативных массивов Sass

Получить значение по ключу можно так:

Настройка

У вас, вероятно, есть Sass-файл, в котором вы объявляете все переменные (что-то вроде _variables.scss или _base.scss). Если нет, вы должны его создать. Здесь же мы опишем и наши мэпы.

После нескольких попыток и ошибок я поняла, что лучший способ настроить ассоциативные массивы — сначала объявить переменные, а затем создать Map с этими переменными. Такой способ позволяет использовать простые переменные в коде (например, $color-robin) вместо получения значения с помощью map-get (например, map-get($ui-colors, primary)).

Я обычно объявляю 4 мэпа:

  • Цвета темы (цвета фирменного стиля)
  • Цвета элементов интерфейса (цвета для ошибок, всплывающих подсказок, кнопок)
  • Оттенки серого (цвета для текста, теней, фонов)
  • Фирменные цвета (используется, например, для иконок социальных сетей)

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

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

Кнопки

Я использую директиву each, которая проходится циклом по массиву $ui-colors и создает класс-модификатор для базового класса .button. Мы получаем модификаторы для стилизации кнопок как ‘error’ или ‘success’.


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

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

Иконки социальных сетей

Я использовала тот же шаблон, что и в прошлом примере, но на этот раз добавила иконки социальных сетей. Код ниже создает класс блока social-media-icon и модификаторы для различных иконок.


Заключение

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

Ассоциативные массивы хорошо подходят для организации цветов, типографики, иконок или изображений.

Одним блоком кода можно создать множество классов-модификаторов, что избавляет от необходимости дублировать код.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2018

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


Вот представь, собрал ты 10 файлов в 1 бандл, потом минифицировал, а как дебажить эту лапшу?

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

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

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

Если будет ответ по моему шаблону, это будет полный, замечательный ответ.

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

Здесь вступают в игру source maps, указывая точное сопоставление в нашем production коде на исходный авторский код. В этом вводном учебнике мы рассмотрим простой проект и пропустим его через различные компиляторы JavaScript, чтобы поиграться с source maps в браузере.

Что такое Source Maps?

Source Maps предлагают не зависимый от языка способ сопоставления production кода с исходным кодом.

Исходные карты предлагают не зависимый от языка способ сопоставления производственного кода с исходным кодом, который был создан в вашей среде разработки. Когда мы в конечном счете смотрим на базу кода, сгенерированную и подготовленную к production, становится очень сложно найти то место, где происходит сопоставление строк с нашим исходным авторским кодом. Однако во время компиляции source map хранит эту информацию, поэтому, когда мы запрашиваем строку, она вернет нам точное местоположение в исходном файле! Это дает огромное преимущество разработчику, поскольку код становится читаемым и даже отлаживается!

В этом уроке мы рассмотрим очень простой код JavaScript и SASS, запустим их через различные компиляторы, а затем просмотрим исходные файлы в браузере с помощью исходных карт. Загрузите демо-файлы, и давайте начнем!

Браузеры

Обратите внимание, что при написании этой статьи Chrome (версия 23) поддерживает карты исходников JavaScript и даже карты SASS. Firefox также должен получить поддержку в ближайшем будущем, так как в настоящее время он находится в активной стадии разработки. Итак, давайте посмотрим, как мы можем использовать карты источников в браузере!

Source maps в Chrome

Во-первых, мы должны включить поддержку в Chrome, выполнив следующие простые шаги:




Настройка

Если вы хотите продвигаться вместе с этой статьей, загрузите демоверсию и откройте каталог «start». Файлы и структура каталогов довольно простые, с некоторым простым JavaScript внутри scripts/script.js . Вы должны иметь возможность открывать index.html и даже добавлять некоторые названия цветов CSS или шестнадцатеричные значения, чтобы изменить цвет фона.




Просмотрите простые файлы сценариев в простых JavaScript, TypeScript или CoffeeScript. Используя различные компиляторы JavaScript, мы создадим готовую для production версию, а также сгенерируем соответствующие карты.

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

Вариант A : компилятор Closure

Closure Compiler от Google - это инструмент для оптимизации JavaScript. Он делает это, анализируя ваш код, удаляя ненужные биты, а затем минимизируя остальные. Кроме того, он также может генерировать карты.

Для создания оптимизированной версии script.js , используя компилятор Closure, сделаем следующие шаги:




Когда мы открываем index.html в браузере и перейдем к Source панели в средствах разработчика, то будет ссылка только на оптимизированную версию script.closure.js ; у нас нет способа вернуть соотношение к нашему оригинальному, исходному файлу. Давайте создадим файл карты, выполнив следующую команду в каталоге scripts :

Обратите внимание, что Closure Compiler использует два варианта: --create_source_map и --source_map_format для создания файла карты script.closure.js.map с версией 3. Затем добавьте URL-адрес исходного URL-адреса в конец скомпилированного файла сценария, script.closure.js , так что оптимизированный файл содержит информацию о местоположении карты:

Теперь, когда мы просматриваем проект в браузере, в директории «scripts» под панелью Source инструментов разработчика будет показан как исходный файл, так и оптимизированная версия script.closure.js . Хотя браузер, конечно же, использует оптимизированный файл, на который мы первоначально ссылались в index.html , карты позволяют нам создать связь с исходным файлом.

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




Вариант B : задача GruntJS для JSMin

Если вы уже используете Grunt.js для процессов сборки, вам понадобится плагин Grunt для карт JSMin. Он не только оптимизирует ваш код, но также создаст карту!

Следующие шаги продемонстрируют, как создать оптимизированную версию script.js с плагином Grunt JSMin:

  1. установите Grunt.js и инициируйте gruntfile, grunt.js , в корне каталога:
  2. Установите Grunt-плагин grunt-jsmin-sourcemap; когда вы это сделаете, будет создан каталог с именем node_modules/grunt-jsmin-sourcemap :
  3. Отредактируйте вновь созданный файл grunt.js , чтобы он содержал только задачу jsmin-sourcemap - чтобы все было как можно проще.
  4. Вернитесь в командную строку и запустите grunt ; это выполнит задачу jsmin-sourcemap, поскольку задание по умолчанию указано как таковое в файле grunt.js:
  5. В файле созданной карты, script.grunt-jsmin.js.map , убедитесь, что источником является "sources":["script.js"] .
  6. Раскомментируйте вариант B для ссылки на вновь созданный файл, script.grunt-jsmin.js , в index.htm l, и откройте его в браузере.

С Grunt и плагином, jsmin-sourcemap, процесс сборки создал два файла: оптимизированный файл сценария с URL-адресом исходного источника, а также карту. Для просмотра всех их в браузере вам потребуются они оба.




Вариант C : UglifyJSё

UglifyJS2 - это еще один парсер JavaScript, minfier и компрессор. Подобно двум альтернативам выше, UglifyJS2 создаст оптимизированный файл сценария, добавленный с URL-адресом исходного источника, а также файл карты, который будет содержать сопоставление с исходным файлом. Чтобы использовать UglifyJS, выполните следующую команду в командной строке каталога «start»:

  1. Установите модуль NPM, uglify-js , локально; будет создан каталог node_module/uglify-js .
  2. Внутри каталога «scripts» мы выполним команду для создания оптимизированной версии, а также исходного файла с параметрами --source-map и --output , чтобы указать имя выходного файла.
  3. Наконец, убедитесь, что index.html правильно связан с скриптом script.uglify.js




Вариант D : CoffeeScript Redux

Для предыдущих трех вариантов нам потребовалась только одношаговая оптимизация - от исходного кода до оптимизированного JavaScript. Однако для таких языков, как CoffeeScript, нам нужен двухэтапный процесс: CoffeeScript > JavaScript > оптимизированный JavaScript. В этом разделе мы рассмотрим, как создавать многоуровневые карты с помощью CoffeeScript и компилятора CoffeeScript Redux.

Шаг 1: CoffeeScript для простого JavaScript

Перейдите в каталог «start» в командной строке. В следующих шагах мы сопоставим оптимизированный файл сценария с CoffeeScript:

  1. Установите CoffeeScript в качестве глобального пакета npm
  2. Скомпилируйте файл CoffeeScript, script.coffee.coffee , чтобы создать простую версию JavaScript, используя следующую команду:
  3. Установите CoffeeScript Redux:
  4. Затем мы создадим файл карты, script.coffee.js.map, который будет хранить информацию о преобразовании из сгенерированного JavaScript обратно в файл CoffeeScript:
  5. Убедитесь, что сгенерированный файл JavaScript, script.coffee.js , имеет URL-адрес исходного кода в конце со следующей строкой:
  6. Убедитесь, что файл карты, script.coffee.js.map , имеет правильный файл ссылки как "file":"script.coffee.coffee" и исходный файл как "sources":["script.coffee.coffee"]

Шаг 2: Обычный JavaScript для минификации-JavaScript

  1. Наконец, мы снова будем использовать UglifyJS, чтобы минимизировать сгенерированный JavaScript, а также создать карту. На этот раз это займет карту, чтобы мы могли вернуться к исходному файлу CoffeeScript. Выполните следующую команду в каталоге «scripts»:
  2. Наконец, убедитесь, что файл карты, script.coffee.min.js.map , имеет правильный ссылочный файл как "file":"script.coffee.min.js" и правильные источники как "sources":["script.coffee.coffee"] .




Вариант E : TypeScript

TypeScript, как и CoffeeScript, также требует двухэтапный процесс: TypeScript > Обычный JavaScript > Мини-код JavaScript. Поскольку скрипт использует плагин jQuery, нам нужны два файла TypeScript, которые уже предоставлены: script.typescript.ts и jquery.d.ts .

Шаг 1: TypeScript для простого JavaScript

Перейдите в каталог «scripts» из командной строки и выполните следующую команду:

Вышеприведенная команда создаст новый файл JavaScript, с именем script.typescript.js , с url внизу: //@sourceMappingURL=script.typescript.js.map . С помощью этой единственной команды он также создаст файл карты, script.typescript.js.map .

Шаг 2: Обычный JavaScript для минифицированного JavaScript

Как и в примере с CoffeeScript, следующим шагом будет использование UglifyJS.

Наконец, убедитесь, что index.htm l ссылается на правильный файл сценария, scripts/script.typescript.min.js и откройте его в браузере!




Карты для SASS

Помимо JavaScript, в настоящее время Chrome также поддерживает карты SASS или SCSS. Для сопоставления исходника SASS исправьте несколько настроек в Chrome, а затем скомпилируем SASS в CSS с параметрами отладки:

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













Помимо просто просмотра файла SASS, если вы используете LiveReload в фоновом режиме и вносите изменения в файл SASS, страница также будет обновляться, чтобы отразить изменения. Например, давайте откроем проект в Firefox и проверим страницу, используя расширение Firebug.




Информация на карте

Если мы просмотрим любой из файлов *.map , он будет содержать информацию о сопоставлении из исходного файла в оптимизированный файл. Структура карты обычно находится в формате JSON, используя спецификации версии 3. Обычно он содержит следующие пять свойств:

  1. version: номер версии карты - обычно «3.»
  2. file: имя оптимизированного файла.
  3. sources: Имена исходных файлов.
  4. names: Символы, используемые для сопоставления.
  5. mappings: отображение данных.




Дополнительные ресурсы

Карты по-прежнему очень активно развиваются, но уже есть некоторые большие ресурсы, доступные в Интернете. Обязательно рассмотрите следующие, если вы хотите узнать больше.

  • Введение в карты JavaScript Райана Седдона, HTML5 Rocks
  • Эпизод 3 точки останова: карты JavaScript от команды разработчиков Google
  • Эпизод 2 точки останова: карты SASS от команды разработчиков Google
  • Source Maps wiki о языках, инструментах и статьях об картах.
  • Многоуровневые карты с использованием CoffeeScript и TypeScript Райана Седдона

Заключение

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

Читайте также: