时间戳

首页 > 解决方案 > 代码在 chrome 调试器中没有按预期工作

angular - 代码在 chrome 调试器中没有按预期工作

问题描述

我在我的打字稿项目（角度应用程序）中遇到了一个奇怪的行为。我有这个代码：

const idx = myclone.findIndex(x => x.id === action.id);
const hasVal = idx>-1; // this line gets skipped by chrome debugger
if (idx>-1) { // this will always be false, even though idx===0
  myclone[idx].upload = action.status;
  return {
    ...state,
    ProgressFiles: myclone,
  };
} else {
  return state; // this branch is used even if idx > -1
}

第 2 行（调试添加）和第 3 行似乎有问题，但我无法弄清楚它是什么。对我来说，它看起来像是有效代码，但 chrome 调试器将跳过第 2 行，并且总是将 if 表达式评估为 false，尽管 idx === 0。有什么问题？

标签： angulartypescript

解决方案

简短回答：尝试debugger;在第 2 行之后添加一个语句。

说明： 此行为很可能是由您使用的 Angular 版本生成的源映射中的一个小问题引起的。

源映射是一些浏览器和 IDE 可以读取的映射器（主要以 JS 注释的形式）。这些映射器链接实际构建的文件（实际在浏览器中运行的代码）和您的代码文件（例如：.ts）。

您可能已经知道 TypeScript 默认情况下不会在浏览器环境中运行，因此它会经过转译和其他一些步骤，并且源映射在开发模式下由 angular 自动生成，以确保您可以调试它。

因此调试器读取生成的 JS 代码和源映射，并将运行的行映射到 TypeScript 文件中的行。这些文件可能看起来有点不同（缺少一些行，添加了一些行）。由于源映射不佳，调试器可能会错过一些行。但它不应该离你的调试目标太远。

无论如何，调试器语句确保您在需要的地方获得断点。

推荐阅读