Генератор исходных карт
Создавайте файлы исходной карты v3 из исходного источника JavaScript и его уменьшенной или запутанной версии. Инструмент токенизирует оба входных данных, выравнивает соответствующие токены для создания точных сопоставлений позиций и кодирует их с использованием Base64-VLQ для получения допустимой исходной карты JSON. Включает отслеживание идентификаторов, дополнительное встраивание sourceContent, таблицу предварительного просмотра сопоставления и средство просмотра необработанного JSON. Вся обработка является локальной и частной.
Зачем использовать наш генератор исходных карт?
- Генерация исходной карты v3. Создавайте стандартные файлы исходной карты v3 из исходного и минимизированного кода JavaScript. Создает действительные сопоставления в кодировке VLQ, ссылки на исходные файлы, массив имен и дополнительный источник SourceContent для полной реконструкции источника. Совместимость с браузерами, сборщиками и инструментами отладки.
- 100% локальная обработка в браузере: вся генерация исходных карт происходит полностью в вашем браузере. Ваш исходный исходный код и минифицированный JavaScript никогда не покидают ваше устройство. Не требуется загрузка на какой-либо сервер, не требуется регистрация и нет ограничений на использование. Полностью бесплатно навсегда.
- Подробный предварительный просмотр сопоставления: просмотр полной таблицы сопоставления, показывающей каждую сгенерированную позицию и соответствующий ей исходный файл, строку и столбец. Изучите необработанную исходную карту JSON, проверьте декодированные сегменты VLQ и проверьте точность сопоставления перед загрузкой или копированием.
- Мгновенная генерация со статистикой: исходные карты генерируются в режиме реального времени по мере ввода или вставки кода. Сразу увидите, сколько сопоставлений было создано, размер исходного файла карты, степень сжатия, а также количество исходных файлов и именованных идентификаторов. Скопируйте или загрузите созданный файл .map одним щелчком мыши.
Распространенные случаи использования генератора исходных карт
- Отладка запутанного производственного кода. Создавайте карты исходного кода для запутанных пакетов JavaScript, чтобы можно было отлаживать производственные проблемы с помощью исходных имен переменных, структуры файлов и комментариев. Подключите исходную карту к инструменту мониторинга ошибок (Sentry, Datadog, New Relic), чтобы получить читаемые трассировки стека минимизированных производственных ошибок.
- Интеграция конвейера обфускации. Применяя обфускацию JS (переименование переменных, кодирование строк, выравнивание потока управления) как часть конвейера сборки, создавайте исходные карты, которые сопоставляют запутанный вывод обратно с предварительно запутанным кодом. Это позволяет выполнять отладку с помощью читаемого кода, одновременно поставляя защищенный JavaScript.
- Отладка с помощью инструментов разработчика браузера. Прикрепите сгенерированные карты исходного кода к развернутым пакетам JavaScript, чтобы инструменты разработчика Chrome, инструменты разработчика Firefox и веб-инспектор Safari могли отображать исходный исходный код на панели «Источники». Устанавливайте точки останова, проверяйте переменные и выполняйте исходный код, даже если в браузере выполняется минимизированный JavaScript.
- Артефакты исходных карт CI/CD. Создавайте исходные карты во время работы конвейера CI/CD и загружайте их в службу отслеживания ошибок, не раскрывая их конечным пользователям. Этот инструмент поможет вам понять формат исходной карты и протестировать конвейер генерации перед интеграцией с инструментами сборки.
- Формат исходной карты Образование и исследования: узнайте, как работает исходная карта v3, просматривая сопоставления в кодировке VLQ, созданные в режиме реального времени из вашего собственного кода. Этот инструмент отлично подходит для изучения формата исходной карты, кодировки VLQ, сопоставления строк и столбцов, а также способов ссылки на имена и источники.
- Ручная деобфускация трассировки стека. Если у вас есть запутанная/минимизированная трассировка производственного стека, но вы потеряли исходные карты, вручную восстановите сопоставление, вставив исходный и минимизированный код. Сгенерированную карту исходного кода можно использовать с Unminifier исходной карты для восстановления точных позиций исходного кода.
Что такое исходная карта?
Карта исходного кода — это файл, который отображает преобразованный, минимизированный или запутанный код обратно в исходный источник. Формат исходной карты v3 использует кодировку Base64-VLQ (количество переменной длины) для компактного хранения сопоставлений позиций. Каждое сопоставление записывает сгенерированную строку/столбец и соответствующий исходный файл, строку и столбец, а также необязательное имя идентификатора. Когда браузер или отладчик загружает исходную карту вместе с минифицированным кодом, он может отображать исходный исходный код с правильными именами переменных, организацией файлов и комментариями, что делает возможной отладку производственного кода.
Как работает наш генератор исходных карт
- Введите исходный код: вставьте исходный читаемый исходный код JavaScript в левую панель. Это версия до минификации/предобфускации, из которой вы хотите сопоставить.
- Введите минифицированный/запутанный код. Вставьте минифицированный или запутанный код JavaScript на правую панель. Генератор сравнит каждую строку и позицию символа, чтобы создать точные сопоставления между двумя версиями.
- Генерация исходной карты: инструмент генерирует действительный JSON-файл исходной карты v3, содержащий сопоставления в кодировке VLQ, список исходных файлов, массив имен для идентификаторов и, при необходимости, полный исходный исходный контент (sourcesContent) для полной реконструкции. Вы можете скопировать JSON или загрузить его как файл .map.
Подробности формата исходной карты v3
- Версия: формат исходной карты в настоящее время имеет версию 3, определенную спецификацией исходной карты. Поле версии всегда равно 3.
- Сопоставления: поле сопоставлений содержит строки в кодировке VLQ, разделенные точкой с запятой (для разрывов строк) и запятыми (для отдельных сегментов внутри строки). Каждый сегмент кодирует до 5 значений: сгенерированный столбец, исходный индекс, исходную строку, исходный столбец и индекс имени — все они сохраняются как относительные смещения для оптимального сжатия.
- Источники: массив путей к исходным файлам, на которые ссылается индекс в сопоставлениях. Вы можете указать собственные имена исходных файлов для структуры вашего проекта.
- Имена: Массив имен идентификаторов (имена переменных, имена функций и т. д.), которые появляются как в исходном, так и в сгенерированном коде, на которые ссылается индекс в сопоставлениях.
- sourceContent: необязательный массив, содержащий полный исходный исходный код для каждого исходного файла. Если они есть, отладчики могут отображать точный исходный код без необходимости доступа к исходным файлам на диске.
- Кодировка VLQ: Base64-VLQ — это компактная кодировка переменной длины, в которой каждый символ представляет 6 бит (0–63). Бит продолжения (бит 6) сигнализирует, следуют ли за тем же значением дополнительные символы. Знак кодируется как младший значащий бит (1 = отрицательный, 0 = положительный), что допускает отрицательные смещения в относительных отображениях.
Конфиденциальность, безопасность и доступность
Ваш код JavaScript полностью обрабатывается в вашем браузере. Никакой код никогда не загружается на какой-либо сервер, не сохраняется, не регистрируется и не передается третьим лицам. Инструмент не требует создания учетной записи, регистрации и не накладывает ограничений на размер кода. Это совершенно бесплатно, без каких-либо премиальных уровней, ограничений на использование или скрытых платежей. Вы можете использовать его так часто, как необходимо для создания исходных карт, отладки или образовательных целей.
Часто задаваемые вопросы
Карта исходного кода — это файл, который отображает преобразованный, минифицированный или запутанный код JavaScript обратно в его исходный источник. Это позволяет отладчикам и инструментам мониторинга ошибок отображать исходный исходный код, даже если в браузере выполняется минимизированный JavaScript. Создание карт исходного кода необходимо для отладки производственного JavaScript, интеграции со службами отслеживания ошибок, таких как Sentry, и поддержания производительности разработчиков при развертывании оптимизированного кода.
Исходная карта v3 — текущий стандартный формат исходных карт. Он использует кодировку Base64-VLQ (количество переменной длины) для компактного хранения сопоставлений позиций. Формат включает в себя: версию (всегда 3), файл (имя выходного файла), источники (пути исходного исходного файла), имена (имена идентификаторов), сопоставления (данные о положении в кодировке VLQ), sourceContent (необязательный исходный исходный код) и sourceRoot (необязательный префикс пути). Кодировка VLQ позволяет каждому сегменту сопоставления представлять до 5 значений (сгенерированный столбец, индекс источника, исходную строку, исходный столбец, индекс имени) с использованием относительных смещений для оптимального сжатия.
Кодировка VLQ (количество переменной длины) представляет числа с использованием переменного количества символов Base64. Каждый символ кодирует 6 бит, причем 6-й бит (бит продолжения) указывает, продолжается ли значение в следующем символе. Знак кодируется младшим битом (0 = положительный, 1 = отрицательный). Это позволяет кодировать небольшие числа (которые часто встречаются в смещениях положения исходной карты) всего 1-2 символами, тогда как большие числа могут использовать больше символов.
Генератор работает путем токенизации как исходного, так и минимизированного кода JavaScript, а затем выравнивает токены по значению контента для создания сопоставлений позиций. Для каждого соответствующего токена он записывает сгенерированную позицию строки/столбца и соответствующий исходный файл, строку и столбец. Идентификаторы (имена переменных, имена функций) отслеживаются в массиве имен. Сопоставления кодируются с использованием Base64-VLQ с относительными смещениями для максимального сжатия в соответствии со спецификацией Source Map v3.
sourceContent — это необязательное поле в карте исходного кода, в которое встраивается полный исходный код для каждого файла, на который есть ссылка. Если они включены, отладчики и инструменты деобфускации могут отображать точный исходный код без необходимости доступа к исходным файлам на диске или сетевому подключению. Обратной стороной является то, что это увеличивает размер исходного файла карты, поскольку исходный источник встроен в строку.
Да. Созданные исходные карты полностью совместимы с Chrome DevTools, Firefox Developer Tools и Safari Web Inspector. Чтобы использовать исходную карту, поместите файл .map рядом с вашим файлом JavaScript (например, script.js и script.js.map), добавьте комментарий //# sourceMappingURL=script.js.map в конце вашего файла JavaScript или встройте исходную карту в качестве URL-адреса данных.
Генератор обрабатывает это автоматически. Карты исходного кода предназначены для отображения кода, который может иметь совершенно разную структуру строк. Генератор создает сопоставления для каждого совпавшего токена, записывая точную исходную строку/столбец для каждой сгенерированной позиции. Строки, не имеющие соответствующего исходного сопоставления, просто не имеют записи сопоставления, что соответствует спецификации.
Абсолютно. Вся генерация исходных карт происходит полностью в вашем браузере. Ваш исходный исходный код и минифицированный JavaScript никогда не покидают ваше устройство и никогда не отправляются на какой-либо сервер. Учетная запись не требуется, данные не сохраняются и отслеживание не происходит. Это делает инструмент безопасным для создания исходных карт для собственного кода JavaScript, коммерческих приложений или проектов, чувствительных к безопасности.
Такие бандлеры, как Webpack, Rollup, Vite и ESBuild, автоматически генерируют исходные карты в процессе сборки. Этот инструмент предназначен для случаев, когда вам необходимо сгенерировать исходную карту отдельно — например, если вы потеряли исходные исходные карты, если у вас есть пользовательская обфускация, которую не поддерживает ваш сборщик, если вы хотите понять формат исходной карты или если вам нужно создать исходную карту для минимизированных или объединенных вручную скриптов.
Да, 100% бесплатно. Здесь нет регистрации, премиум-уровня, ограничений на использование и ограничений на размер кода. Этот инструмент полностью работает в вашем браузере и всегда будет бесплатным для использования в Aback Tools.