为什么导入的打字稿函数在 Chrome 调试器中不可用

Question

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

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

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 方法时，我得到一个错误：

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

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

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

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 现在在控制台中 returns 预期的功能：

Stackblitz 演示

Here's a stackblitz app that shows the problem. Open your debugger before loading the page and then follow the instructions just before the debug line. The source code for the Stackblitz page is here.

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

Answer 1

您应该检查已编译的 JS 文件，因为这是控制台的目标。这通常也取决于 tsconfig.json and/or 打包系统中的目标。因为你用的是angular，打包是用webpack完成的。您可以在此处找到您的 formatDuration 函数：

_date-fns__WEBPACK_IMPORTED_MODULE_1__.formatDuration

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

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

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

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

为什么导入的打字稿函数在 Chrome 调试器中不可用

Why is imported typescript function not available in Chrome Debugger

angular

typescript

javascript-debugger

调试器无法识别我尝试调用的方法

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

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

Stackblitz 演示