angular - 为什么 Chrome 调试器中没有导入的打字稿功能

问题描述

我正在尝试调试已导入 Angular 组件的方法。然而，打字稿的一些范围特性意味着我无法通过调试器访问导入的方法。

该方法是formatDuration来自的方法date-fns。我希望能够直接在调试器中调试该方法，但是由于某种原因，该方法无法在调试器中访问并且始终未定义。

import { Component } from '@angular/core'
import { formatDuration } from 'date-fns' // <= method imported

...

export class EntryComponent {

  duration:integer = 1000
  constructor() { }

  get duration():string{

    let duration_str = formatDuration({ seconds: this.duration },
                                      {format: ['hours', 'minutes']}
    )
    // I want to be able to jump in here and use the `formatDuration` method:
    debugger // <= debug statement

    return duration_str
  }
}

当我尝试调用该方法时，调试器将无法识别它

当我运行上面的代码并尝试formatDuration在控制台中调用该方法时，出现错误：

该方法可用于携带它的代码

我无法使用调试器调用该方法，但是如果我删除调试器语句，它将被成功调用。出于某种原因，它超出了调试器的范围 ‍♂️</p>

将方法复制到局部变量使其可用...

get duration():string{

  let duration_str = formatDuration({ seconds: this.duration },
                                    {format: ['hours', 'minutes']}
  )
  // make a copy -------------
  let myVersion:any = formatDuration; 
  // -------------------------
  debugger // <= debug statement
  
  return duration_str
}

myVersion现在在控制台中运行会按预期返回函数：

Stackblitz 演示

这是一个显示问题的 stackblitz 应用程序。在加载页面之前打开调试器，然后按照调试行之前的说明进行操作。Stackblitz 页面的源代码在这里。

范围发生了什么，以至于我无法直接访问导入的方法？

标签： angulartypescriptjavascript-debugger

您应该检查编译后的 JS 文件，因为这是控制台的目标。这通常取决于 tsconfig.json 中的目标和/或打包系统。因为你使用的是 Angular，所以打包是用 webpack 完成的。您可以在formatDuration此处的某处找到您的功能：

_date-fns__WEBPACK_IMPORTED_MODULE_1__.formatDuration

1也可以是2or0或100，您必须检查Scope调试器部分中的闭包。它通常位于以您正在调试的打字稿文件为名称的闭包中。例如：

Closure (./src/app/components/entry.component.ts)

例如，在这里您可以看到我的应用程序中某个服务的导入：

显然，如果你使用--prod，这一切都会被缩小，并且会让事情变得更难追踪 :)