Есть ли ошибка онлайн? Не бойтесь, так позиционируется!

JavaScript

Резюме:Исходная карта по-прежнему потрясающая.

  • Общедоступный номер: Front-end Xiaoyuan

FundebugПерепечатано и изменено с разрешения, авторские права принадлежат оригинальному автору.

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

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

Проверка функциональности SourceMap

Сначала установите reverse-sourcemap глобально

npm install --global reverse-sourcemap

Выберите скомпилированный код для тестирования.Ниже приведен код, сгенерированный компиляцией проекта vue.

Выполните команду в командной строке, чтобы декомпилировать main.js обратно в исходный код и вывести его в каталог исходного кода.

reverse-sourcemap -v dist/main.a8ebc11c3f03786d8e3b.js.map  -o sourcecode

Выше приведен каталог исходного кода, выводимый при выполнении команды.Сгенерированная структура каталога такая же, как и каталог исходного кода.Откройте файл и сравните его с исходным кодом:

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

Как найти расположение исходного кода, когда код рабочей среды сообщает об ошибке

если используетсяFundebugЕсли используется функция Source Map, очень удобно определить местонахождение ошибки:

Если инструмент мониторинга не используется, код в рабочей среде сжимается и компилируется, что не способствует отладке. Для решения этой проблемы необходимо подготовить файл карты кода рабочей среды, для удобства можно добавить в package.json проекта команду отладки для генерации файла карты. За исключением открытия исходной карты, другая конкретная конфигурация веб-пакета такая же, как и конфигурация рабочей среды.

    "scripts": {
        "start": "vue-cli-service serve --mode dev",
        "stage": "vue-cli-service build --mode staging",
        "online": "vue-cli-service build",
        "debug": "vue-cli-service build --mode debug"
    }

С помощью файла карты местоположение исходного кода можно определить с помощью API, предоставляемого SourceMap. Ниже приведен основной код реализации.

// Get file content
const sourceMap = require('source-map');
const readFile = function (filePath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(filePath, {encoding:'utf-8'}, function(error, data) {
      if (error) {
        console.log(error)
        return reject(error);
      }
      resolve(JSON.parse(data));
    });
  });
};

// Find the source location
async function searchSource(filePath, line, column) {
  const rawSourceMap = await readFile(filePath)
  const consumer = await new sourceMap.SourceMapConsumer(rawSourceMap);
  const res = consumer.originalPositionFor({
    'line' : line,
    'column' : column
   });
   consumer.destroy()
  return res
}

Самое главное — использовать originalPositionFor API, предоставляемый SourceMap. SourceMapConsumer.prototype.originalPositionFor(generatedPosition)

Параметр API originalPositionFor — это объект, содержащий свойства строки и столбца.line 编译生成代码的行号，从1开始 column 编译生成代码的列号，从0开始Этот метод возвращает объект со следующими свойствами

{
    "source": "webpack:///src/pages/common/403.vue?c891", // 源代码文件的位置,如果无法获取，返回null。
    "line": 4, // 源代码的行号，从1开始，如果无法获取，返回null。
    "column": 24, // 源代码的列号，从0开始，如果无法获取，返回null。
    "name": "get" // 源代码的标识，如果无法获取，返回null。
}

Инструмент поиска исходного кода

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

Установить

npm install --global source-location

Введение параметра

Usage: sl [options]

Options:
  -v, --version           output the version number
  -p, --source-flie-path  The generated source file  编译后的map文件
  -l, --ine               The line number in the generated source  编译后代码行号
  -c, --column            The column number in the generated source  编译后代码列号
  -h, --help              output usage information

Случаи применения

Команда выполнения терминала:

sl -p dist/1.f47efcb58028826c7c05.js.map -l 1 -c 34

Командная строка выведет: путь к исходному файлу: путь, номер исходной строки: строка, исходный код: имя.

Адрес проекта на гитхабе:GitHub.com/front-end-имеет…Пожалуйста, укажите на ошибки.

Наконец, рекомендуется использоватьFundebug, очень полезный инструмент мониторинга ОШИБОК, поддерживает функцию Source Map~

Категории