Код онлайн-сжатия — ошибка позиционирования

внешний интерфейс JavaScript

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

1. Получить информацию об ошибке кода сжатия (количество строк, столбцов, информацию об ошибке, файл ошибки)

Вот сообщение об ошибке через консоль

window.addEventListener('error', function (e) {
    console.debug('lineno: ', e.lineno, ' colno: ', e.colno)
    console.debug('errorMessage:', e.message)
    console.debug('errorFile:', e.filename)
}, true)

Мы пишем плохой кусок кода (фрагмент single.vue)

method: {
   test (option) {
        const data = option.test
        const dataTest = option.data.test
        return data + dataTest
    }
}, 
created () {
    // 设置异步错误的原因是，同步的错误会被vue捕获
    setTimeout(() => {
        this.test({
          testOption: 1
        })
    }, 300)
}

Запуск в браузере, результаты ошибки следующие

Получите сообщение об ошибке:

  • Номер строки ошибки: 1

  • Плохое количество столбцов: 59236

  • Сообщение об ошибке: невозможно прочитать свойство «тест» неопределенного

  • Плохой файл: 0.0a77f.js

2. Найдите неправильный скрипт узла

Установить исходную карту зависимостей

npm install source-map

Сценарий узла выглядит следующим образом (map/index.js)

// 读取文件
var fs = require('fs')
// souceMap处理文件
var SourceMapConsumer = require('source-map').SourceMapConsumer
// 启动构建进程（已构建则不需要）
var exec = require('child_process').exec

var lineno = process.argv[2] || 0   // 第一个参数为行数
var columnno = process.argv[3] || 0 // 第二个参数为列数
var fileName = process.argv[4] || '' // 第三个参数为错误文件（错误文件名就好）
 
// 构建有map的线上代码
// node build onlineMap为构建命令
exec('node build onlineMap', function () {
 // 读取错误文件的map文件
 var consumer = new SourceMapConsumer(fs.readFileSync('./dist/' + fileName + '.map', 'utf8'))
  // 输出map的错误信息
  console.log(consumer.originalPositionFor({
    line: +lineno,      // +是为了转化为数字
    column: +columnno
  }))
})

Запустите узел скрипта

node map 1 59236 0.0a77f.js

Эффект следующий:

В сочетании с информацией, выводимой из консоли, вы можете найти код ошибки

Давайте еще раз посмотрим, включим исходную карту для кода и посмотрим, соответствует ли информация об ошибке.

Расположение кода ошибки является точным и доказано возможным.

3. Последующие идеи расширения

Текущая реализация представляет собой относительно простой скрипт, поэтому есть некоторые проблемы:

  • Требуется, чтобы текущий контент сборки и онлайн были согласованы
  • Операция более сложная

Идея оптимизации заключается в следующем:

Последующая оптимизация будет добавляться медленно~

Ссылаться на

Ошибки скриптов оптимизированы до предела — сделайте ошибки скрипта понятными с первого взгляда

Категории