Как я могу взять минимизированную трассировку стека javascript и запустить ее против исходной карты, чтобы получить правильную ошибку?

Ответ 1

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

Если у вас есть опыт работы с NodeJS, уже есть пакет, который сделает это за вас.

https://github.com/mozilla/source-map/

Чтобы установить библиотеку

npm install -g source-map

или

yarn global add source-map

Создайте файл с именем "issue.js"

fs = require('fs');
var sourceMap = require('source-map');
var smc = new sourceMap.SourceMapConsumer(fs.readFileSync("./app.min.js.map","utf8"));
console.log(smc.originalPositionFor({line: 1, column: 3284}));

Запустите файл с узлом

node issue.js

Он должен выводить местоположение в исходном файле на консоль для первой строки трассировки стека.

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

Ответ 2

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

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

Для создания отчетов об ошибках вы можете рассмотреть такой инструмент, как rollbar. Это сообщит всем местным жителям в каждом фрейме, чтобы помочь отлаживать. Он поддерживает sourcemaps за пределами браузера для решения ваших проблем безопасности.

Ответ 3

Если добавить ответ @Reactgular, приведенный ниже фрагмент будет работать с последней версией карты источника

  const rawSourceMap = fs.readFileSync("./app.min.js.map","utf8");

  const whatever = sourceMap.SourceMapConsumer.with(rawSourceMap, null, consumer => {
    console.log(consumer.originalPositionFor({
      line: 1,
      column: 3284
    }));
  });

И добавить к обсуждению в ветке простое регулярное выражение, например /\/(\w*[-\.]?\w*).js:\d*:\d*/g

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

  //regex for patterns like utils.js, utils123.js, utils-name.js, utils.version.js
  var patt = /\/(\w*[-\.]?\w*).js:\d*:\d*/g; 
  // returns matches like ['/app.min.js:1:3284', '/bower.min.js:44:193', ..]
  var errorPositions = line.match(patt);
  console.log(errorPositions);
  if(!errorPositions || errorPositions.length === 0) {
      console.log("No error line numbers detected in the file. Ensure your stack trace file is proper");
      return;
  }
  errorPositions.forEach(function(error) {
    findInSourceMap(error);
  });
});

Ответ 4

Добавить директиву комментариев для запуска JS на странице.

//# sourceMappingURL =/путь/в/ваш/sourcemap.map

В firefox (не уверенный о хроме), чтобы сообщить отладчику использовать исходные карты, если они доступны, нажмите кнопку "Параметры отладчика" и выберите "Показать исходные источники" из списка всплывающих настроек: