通过

故障分析器工具

  • 项目

使用 故障分析器 工具分析和快速诊断生产中 Web 应用的崩溃。 在 故障分析器 工具中，可以输入在生产中收集的 JavaScript 堆栈跟踪，然后应用源映射来取消缩小堆栈跟踪，以便更快地调试。 使用故障分析器工具，可以采用缩小的 JavaScript 堆栈跟踪并快速向后工作，以确定导致错误的代码行。

故障分析器工具

当 Web 应用意外崩溃或挂起时，这可能会导致数据丢失和用户的不良体验。 收集有关用户体验的崩溃的信息有助于诊断和修复崩溃的根本原因。 但是，在生产环境中运行的代码通常会缩小，这会导致登录的 JavaScript 堆栈跟踪也发生崩溃。 故障分析器工具可帮助你将生产中收集的缩小堆栈跟踪映射回原始源代码，以便快速识别崩溃的根本原因。

下面是可以从生产中的 Web 应用收集的缩小的堆栈跟踪示例：

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

变量和函数名称通常缩短，如上面的变量 t 一样。 脚本 URL 通常指向生成的单行捆绑文件，如 prod.bundle.js 上面的文件。

相比之下，下面是未减少的堆栈跟踪的示例，其中包含原始变量和函数名称以及原始源文件名称和行号：

Uncaught Error: test error
    at shorten (util.ts:9:9)
    at processUIString (util.ts:2:10)
    at todoMarkupBuilder (todo.ts:35:41)
    at Todo.render (todo.ts:24:12)
    at app.ts:36:39
    at Array.map (<anonymous>)
    at App.render (app.ts:36:22)
    at new App (app.ts:29:10)
    at index.ts:9:13
    at index.ts:9:33

可通过两个步骤在 故障分析器 工具中分析缩小的生产堆栈跟踪：

  1. 首先，从生产中的 Web 应用收集特殊格式的堆栈跟踪。

    可通过多种方式从用户使用的浏览器收集堆栈跟踪。 下面的 收集生产中的堆栈跟踪部分提供了示例和建议。 此外，还介绍了如何设置堆栈跟踪的格式，以便可以在 故障分析器 工具中对其进行分析。

  2. 接下来，在 故障分析器 工具中分析堆栈跟踪。

    下面的 在崩溃分析器工具中分析堆栈跟踪部分介绍了如何首先使源映射在 DevTools 中可访问，然后使用 故障分析器 工具来分析堆栈跟踪。

在生产环境中收集堆栈跟踪

故障分析器工具不会为你收集堆栈跟踪。 必须先使用可用的工具和服务从 Web 应用收集堆栈跟踪。 下面是在生产环境中收集堆栈跟踪的一些方法：

  • 建议使用遥测系统（例如 Azure Monitor Application Insights ），该系统可以从 JavaScript 代码中捕获有关未经处理的错误的信息。

  • 还可以编写 JavaScript 代码来捕获 Web 应用中未经处理的错误。 以下示例演示如何使用 window.onerror 事件处理程序在 Web 应用中捕获未经处理的错误：

    window.onerror = function (message, source, line, column, error) {
  // Get the stack trace from the error object.
  const stackTrace = error.stack;

  // Send the stack trace to your telemetry system.
  // Code not shown.
};

设置故障分析器工具的堆栈跟踪的格式

在生产环境中收集堆栈跟踪是不够的。 故障分析器工具需要堆栈跟踪来包括名为“源模块”的部分。

下面是包含 “源模块 ”部分的堆栈跟踪示例：

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

Source modules:
    https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js 8b544e37b35d920a39d0e10f70fddc29b25d0db362741f3071eff86cef8613e9

“源模块”部分包括堆栈跟踪中涉及的 JavaScript 文件的 URL，以及每个文件内容的哈希。 哈希是一个 64 个字符的字符串，包含十六进制字符，对应于正在执行的脚本的 SHA-256 哈希。 这是每个 JavaScript 文件内容的字节对字节哈希。 通过 URL 和哈希， 崩溃分析器 工具可以在以后检索用于统一堆栈跟踪的源映射。

若要将 “源模块” 部分添加到错误堆栈跟踪，请在 Web 应用中使用 Edge DevTools 崩溃分析器支持 库，如下所示：

  1. 使用 npm 在项目中添加 Edge DevTools 崩溃分析器支持库：

    npm install @microsoft/edge-devtools-crash-analyzer-support

  2. 在 JavaScript 代码中导入库，然后调用 installErrorStackModuleAnnotations 函数：

    import { installErrorStackModuleAnnotations } from '@microsoft/edge-devtools-crash-analyzer-support';

installErrorStackModuleAnnotations(Error);

在故障分析器工具中分析堆栈跟踪

DevTools 中的 故障分析器 工具会取消管理从生产中用户收集的特殊格式堆栈跟踪。 如果源映射还包含原始源代码， 则故障分析器 工具将显示组成堆栈跟踪的原始文件名和函数名称。

在 DevTools 中使源映射可访问

故障分析器工具使用堆栈跟踪中的源模块信息来检索与堆栈跟踪中的脚本文件对应的源映射。 这意味着首先需要使源映射在 DevTools 中可访问。

如果使用 Azure Artifacts 符号服务器安全地存储源映射， 则故障分析器 工具效果最佳。 这是因为 DevTools 可以在分析错误时按需从 Azure Artifacts 符号服务器检索源映射。 请参阅 通过将源映射发布到 Azure Artifacts 符号服务器来安全地调试原始代码。

如果不使用 Azure Artifacts 符号服务器，则仍可以使用 故障分析器 工具，方法是确保 DevTools 可以访问对应于堆栈跟踪的源映射。 例如，如果之前已使用 //# sourceMappingURL= 注释加载源映射，DevTools 会缓存源映射以供以后重复使用。 若要了解详细信息，请参阅 DevTools 中的源映射 ， 将已处理的代码映射到原始源代码进行调试。

当域名为 localhost时，DevTools 不会缓存源映射。 这意味着，如果不使用 Azure Artifacts 符号服务器， 故障分析器 工具将仅适用于从生产环境收集的堆栈跟踪，而不适用于从使用该域的本地开发环境收集的 localhost 堆栈跟踪。

打开故障分析器工具

故障分析器工具是一种快速视图工具;默认情况下，它会在“快速视图”面板中打开，以便你可以将其与活动栏中打开的其他工具一起使用。

从“更多工具”菜单

若要使用 DevTools“更多工具”菜单打开故障分析器工具，请执行以下操作：

  1. 在 Microsoft Edge 中，选择“设置和更多” (Edge“设置和更多”图标) >更多工具>打开开发人员工具 (Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) ) 。 DevTools 随即打开。

  2. 在 DevTools 中，按 Esc 打开底部 (“ 快速视图 ”工具栏（如果尚未打开）) 。 在 “快速视图 ”工具栏中，单击“ 更多工具 ” (“更多工具”图标) 按钮，然后选择 “故障分析器”。

从命令菜单

若要使用命令菜单打开 故障分析器 工具，请执行以下操作：

  1. 在 Microsoft Edge 中，选择“设置和更多” (Edge“设置和更多”图标) >更多工具>打开开发人员工具 (Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) ) 。 DevTools 随即打开。

  2. 在 DevTools 中，单击“ 自定义和控制 DevTools ” (“自定义和控制 DevTools”图标) 按钮，然后选择“ 运行命令”。 或者，当 DevTools 具有焦点时，按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 。 命令菜单将打开。

  3. 开始键入 故障分析器，然后选择“ 显示崩溃分析器 [快速视图] ” 命令。 崩溃分析器工具将在“快速视图”面板中打开。

在故障分析器工具中输入堆栈跟踪

如果要测试 故障分析器 工具，但没有要分析的堆栈跟踪，请按照以下步骤收集示例堆栈跟踪：

  1. 在 Microsoft Edge 中，在新窗口或选项卡中打开 DevTools 故障分析器演示 。

  2. 要打开 DevTools，请右击网页，然后选择“检查”。 或者，按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 。 DevTools 随即打开。

  3. 在 DevTools 的 “活动”栏上，单击“ 控制台 ” (“控制台”图标) 。 将 打开控制台 工具。

  4. 选择 控制台 工具中显示的错误堆栈跟踪并复制它。

若要在 DevTools 中使用 故障分析器 工具，请执行以下操作：

  1. 打开 DevTools 的 故障分析器 工具，如上面 打开故障分析器工具中所述。

  2. 在 崩溃分析器 工具的左窗格中输入特殊格式的堆栈跟踪：

    故障分析器工具，将增强的调用堆栈粘贴到左侧面板中

  3. 在 故障分析器 工具中，单击“ 分析 ” (“分析”图标) 按钮 (或按 Ctrl+Enter) 。

    右侧窗格显示组成堆栈跟踪的原始文件名和函数名称：

    使用故障分析器工具调试非致命 JavaScript 异常

    这会加载与源模块对应的源映射，并尝试取消缩小源映射中包含 JavaScript 或 TypeScript 源内容的任何堆栈帧。

  4. 如果源代码在帧的源映射中可用，请单击该帧以显示源代码。

    原始源代码显示在 “源” 工具中，并突出显示了相关行：

    通过单击“故障分析器”选项卡的右窗格中访问的未减少的代码文件和代码行

  5. 若要复制未缩小的堆栈跟踪，请在 “崩溃分析器 ”选项卡的工具栏中，单击“ 复制未减量堆栈跟踪 ” (“复制未减量堆栈跟踪”图标) 按钮。 它生成完整且未缩小的堆栈跟踪并将其复制到剪贴板，作为传统堆栈跟踪格式的堆栈跟踪，但与原始代码匹配的信息除外，包括函数名称、源文件名称以及行号和列号：

Uncaught Error: test error
    at shorten (webpack://devtools-crash-analyzer/src/util.ts:9:9)
    at processUIString (webpack://devtools-crash-analyzer/src/util.ts:2:10)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:39)
    at Array.map (<anonymous>)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:22)
    at constructor for App (webpack://devtools-crash-analyzer/src/app.ts:29:10)
    at [Global code: "webpack://devtools-crash-analyzer/src/index.ts"] (webpack://devtools-crash-analyzer/src/index.ts:9:13)
    at (anonymous function) (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:2:2897)

UI 功能

故障分析器工具具有以下 UI 功能：

UI 项 描述
左窗格 要分析的堆栈跟踪。
右窗格 显示组成堆栈跟踪的原始文件名和函数名称。
“新建分析 (”新建分析“图标) 按钮 创建新的空白左窗格，以粘贴新的堆栈跟踪。
分析 (“分析”图标) 按钮 基于左侧窗格中的堆栈跟踪，在右侧窗格中创建新的分析。
分析 (“分析”下拉列表) 下拉列表 显示分析列表。
“删除此分析” (“删除此分析”图标) 按钮 删除当前分析。
复制未缩小的堆栈跟踪 (“复制未缩小的堆栈跟踪”图标) 按钮 生成完整且未缩小的堆栈跟踪并将其复制到剪贴板，作为传统堆栈跟踪格式的堆栈跟踪，但与原始代码匹配的信息除外，包括函数名称、源文件名称以及行号和列号。
“打开符号服务器设置 (”打开符号服务器设置“图标) 按钮 显示或修改 Azure Artifacts 符号服务器设置。
“ 如何使用 ” (“如何使用”图标) 按钮 打开本文。

提供反馈

在 MicrosoftEdge/DevTools 反馈存储库中留下反馈，并告知我们哪些功能有效、哪些无效，以及你想要哪些功能。

另请参阅

外部链接: