我正在调试一个导入到Angular组件中的方法。但是,一些关于typescript的作用域特性意味着我不能通过调试器访问导入的方法。
这个方法是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
将返回预期的函数:
Stackblitz演示
Here's a stackblitz app that shows the problem。在加载页面之前打开调试器,然后按照调试行前面的说明进行操作。The source code for the Stackblitz page is here。
作用域发生了什么事情,以至于我不能直接访问导入的方法?
2条答案
按热度按时间mqkwyuun1#
您应该检查编译后的JS文件,因为这是控制台的目标。这通常取决于tsconfig.json中的目标和/或打包系统。因为您使用的是angular,打包是通过webpack完成的。您可以在这里找到您的
formatDuration
函数:1
也可以是2
或0
或100
,您必须检查调试器的Scope
部分中的闭包。它通常在闭包中,闭包的名称就是您正在调试的类型脚本文件。例如:例如,在这里您可以看到从我的应用程序中的某个服务导入的内容:
显然,如果使用
--prod
,这一切都将被缩小,并将使事情更难跟踪:)7fyelxc52#
使用导入模块的一种更简单的方法,补充一下Poul Kruijt的答案:
在使用该模块的函数中创建一个断点,在断点面板的devtools中,转到Scope,查找导入的模块,如下所示:
右键单击所需的模块,选择“Store function as global variable”(将函数存储为全局变量),即可正常调用,如“temp1.whatever()”