Chrome DevTools中无法查看ES6和TypeScript库的源代码

Question

我正在分发我的ES6和TypeScript库，并提供源映射以及相关的源文件。然而，当这样的库被安装在应用程序中（位于node_modules下），Chrome调试器会显示编译后的JavaScript输出，而不是原始源文件。我该如何让调试器显示原始源文件？

这是我其中一个TypeScript库的分发情况：

如您所见，我在dist目录中有index.js.map和router-store.js.map。这些映射指向src目录中对应的TypeScript文件，例如：

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

尽管如此，当我在Chrome调试器中查看应用程序时，文件名显示为index.js，其中包含已编译的JavaScript输出。请参见下面的内容：

我错过了什么？

- Naresh

---

你们整体是如何打包这个应用的？如果使用Webpack，可能需要使用https://github.com/webpack-contrib/source-map-loader。 - loganfsmyth

是的，该应用程序使用Webpack进行捆绑。它实际上是由create-react-app创建的。我认为它没有使用source-map-loader。如果我弹出，我会看到在Webpack配置中使用了devtool：'cheap-module-source-map'。 - Naresh

我已经配置了webpack使用source-map-loader和devtool: 'source-map'，但是没有成功 :-( - Naresh

Answer 1

我在“资源”文件树中也看不到我的文件，但是（我使用的是Mac），如果按下Command+O，我可以通过名称搜索我的文件，然后Dev Tools会显示它，使我能够添加断点并逐步执行代码。

- Steve -Cutter- Blades

---

是的，我也在使用Mac，而且是的，command+O可以让你搜索文件。然而，我想说的是，显示的文件版本是编译后（ES5）的版本，而不是原始的ES6或TypeScript版本。 - Naresh

是的，我正在使用“devtool: 'source-map'”，可能是这个原因。 - Steve -Cutter- Blades