Can't see source code for ES6 and TypeScript libraries in Chrome DevTools

Question

I am distributing my ES6 and TypeScript libraries with source maps as well as the associated source files. However when such a library is installed in an app (under node_modules), the Chrome debugger shows the compiled JavaScript output instead of the original source file. How can I make the debugger show the original source file?

Here's the distribution of one of my TypeScript libraries:

As you can see I have index.js.map and router-store.js.map in the dist directory. These maps point to the corresponding TypeScript files in the src directory, e.g.

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

In spite of this, when I look at the app in Chrome Debugger, the file name shows as index.js and contains the compiled JavaScript output. See below:

What am I missing?

Answer 1

I do not see my files in the Sources file tree either, but (and I'm on a Mac), if I do Command+O I can search for my file, by name, and Dev Tools will show it, allowing me to add breakpoints and step through code.