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

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

2024-05-30 00:28:36作者:邓越浪Henry

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和高效的源映射处理使其成为任何使用现代前端构建工具的开发者的理想选择。赶快试试看,让源映射驱动的错误处理变得更加轻松!

登录后查看全文

项目优选

收起
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
295
957
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
493
393
ohos_react_nativeohos_react_native
React Native鸿蒙化仓库
C++
111
196
openGauss-serveropenGauss-server
openGauss kernel ~ openGauss is an open source relational database management system
C++
59
140
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码,欢迎大家投稿,在仓颉鸿蒙社区展现你的妙趣设计!
Cangjie
356
321
leetcodeleetcode
🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer(第 2 版)》、《程序员面试金典(第 6 版)》题解
Java
51
14
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
97
251
ArkAnalyzer-HapRayArkAnalyzer-HapRay
ArkAnalyzer-HapRay 是一款专门为OpenHarmony应用性能分析设计的工具。它能够提供应用程序性能的深度洞察,帮助开发者优化应用,以提升用户体验。
Python
18
6
arkanalyzerarkanalyzer
方舟分析器:面向ArkTS语言的静态程序分析框架
TypeScript
33
38
CangjieMagicCangjieMagic
基于仓颉编程语言构建的 LLM Agent 开发框架,其主要特点包括:Agent DSL、支持 MCP 协议,支持模块化调用,支持任务智能规划。
Cangjie
579
41