Chrome 控制台如何查看函数的调用者？

Question

在 chrome dev tools 的 network tab 里，我们可以查看发起网络请求的调用地址

问题：在 console 界面如何查看某一个打印的调用源文件呢？

如上图，我在这个函数的内部添加了一条打印，现在我无法定位代码里具体哪个文件调用了 useFileSort.ts。

举个例子：现在我在 fileListView.ts 这个文件夹里调用了，我该如何通过 chrome console tab 或者其他方法 定位到这里呢？

（请不要说在 vscode 里搜索这个函数名称，主要太多了）

---

console.trace() 完美解决

Answer 1

最简单的办法就是在你代码里面加一句 console.trace()

手上没有 Vue 项目，没测试。如果允许的话，就你点进去的位置，打个断点，调试页面右侧的调用栈应该也就能看到。

Answer 2

这个不就是文件吗?点击可以查看源文件

或者你在需要定位的函数前比如fileListView.ts文件里加上debugger, 打开控制台刷新会开启调试模式