typescript - 在 Chrome DevTools 中看不到 ES6 和 TypeScript 库的源代码

标签 typescript ecmascript-6 google-chrome-devtools source-maps

我正在分发我的 ES6 和 TypeScript 库以及源映射以及相关的源文件。然而,当这样的库安装在应用程序中时(在 node_modules 下),Chrome 调试器显示编译后的 JavaScript 输出而不是原始源文件。如何让调试器显示原始源文件?

这是我的一个 TypeScript 库的分布:

enter image description here

如您所见,我在 dist 目录中有 index.js.maprouter-store.js.map。这些映射指向 src 目录中相应的 TypeScript 文件,例如

"sources":["../src/index.ts"]

尽管如此,当我在 Chrome 调试器中查看应用程序时,文件名显示为 index.js 并包含已编译的 JavaScript 输出。见下文:

enter image description here

我错过了什么?

最佳答案

我也没有在源文件树中看到我的文件,但是(我在 Mac 上),如果我执行 Command+O,我可以按名称搜索我的文件,开发工具将显示它,允许我添加断点并单步执行代码。

关于typescript - 在 Chrome DevTools 中看不到 ES6 和 TypeScript 库的源代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52847386/

相关文章:

visual-studio-2013 - 没有为 TypeScript 编译器提供编译文件,因此它将跳过编译

javascript - `[()]` 语法在 Angular2 中的用途是什么?

javascript - 如果将项目放入数组并排序,则确定项目的潜在索引。

javascript - 使用 ES6 Proxy 观察对象

javascript - React.js 和 ES2015 - 将方法从父级传递给子级

google-chrome - Chrome 开发工具中的网络选项卡停止记录请求

typescript - typescript是否需要先编译成es6再编译成es5

javascript - axios 错误 typescript ,注释必须是 'any' 或 'unknown' 如果?

node.js - 如何使用 chrome puppeteer 访问 ssl 证书内容

javascript - Chrome Developer Console 中不同颜色的变量类型是什么?