使用sourcemapped-stacktrace：优雅地处理浏览器中的源映射栈轨迹

sourcemapped-stacktrace 是一个简洁的JavaScript模块，专为在浏览器环境中应用源映射到JS堆栈跟踪而设计。如果你在使用CoffeeScript、Traceur或Babel等编译到JavaScript的工具时遇到困难，因为它们的错误堆栈不易理解，那么这个库将会是你的救星。

解决的问题

当浏览器处理错误时，它可以在控制台中显示应用了源映射的堆栈跟踪，但不幸的是，这种方法不适用于Error.stack()。这意味着当你尝试直接查看或记录堆栈信息时，它们会显示原始的、未映射的代码位置。sourcemapped-stacktrace正是为了填补这一空白而诞生的。

演示与安装

你可以访问在线演示来体验sourcemapped-stacktrace的效果。要安装此库，只需一行命令：

npm install sourcemapped-stacktrace

NPM包包含了可以直接在页面中使用的dist/sourcemapped-stacktrace.js文件。

设置与API

通过AMD模块加载器或传统script标签引入sourcemapped-stacktrace.js。作为AMD模块，它暴露了mapStackTrace方法。如果未找到AMD加载器，该函数将被设置在全局对象window.sourceMappedStackTrace.mapStackTrace上。

使用示例

try {
  // 引发错误
  bork();
} catch (e) {
  // 应用源映射
  window.mapStackTrace(e.stack, function(mappedStack) {
    // 处理映射后的堆栈信息
    console.log(mappedStack.join("\n"));
  }, {
    filter: function (line) {
      // 只处理包含`spec.js`的来源
      return /(spec\.js)/.test(line);
    }
  });
}

技术解释

该项目使用Mozilla的source-map库，通过获取和解析错误堆栈中引用的所有脚本，并检查是否存在源映射声明，然后从服务器加载这些映射。整个过程完全模拟了现代浏览器对于源映射的支持。

支持的环境

目前，sourcemapped-stacktrace支持以下浏览器：

• Google Chrome
• Mozilla Firefox
• Apple Safari
• Internet Explorer 11及以上
• Microsoft Edge

已知问题

• 不支持除Chrome和Firefox之外的浏览器的异常格式
• 仅支持内联的//# sourceMappingURL=声明，尚不支持SourceMap HTTP头
• 部分源映射生成器（如CoffeeScript、Traceur、Babel）未提供完整的names列表，导致转换后的代码框架中的函数名显示为(unknown)。这些问题可能需要上游库进行改进以提供更好的支持。

总的来说，sourcemapped-stacktrace是一个实用的工具，旨在帮助开发者解决由于编译到JS的源码而导致的复杂调试问题。它的简单API和高效的源映射处理使其成为任何使用现代前端构建工具的开发者的理想选择。赶快试试看，让源映射驱动的错误处理变得更加轻松！