How to debug a TypeScript library using Chrome Dev Tools?
Asked Answered
L

0

6

I have created a TypeScript library that has been published to npm using the following structure:

mobx-state-router
|--- package.json
|--- src
|    `--- index.ts     (TypeScript source)
`--- dist
     |--- index.js     (compiled JavaScript)
     |--- index.js.map (sourcemap)
     `--- index.d.ts   (type definitions)

I then use this library in a React app by adding a dependency to it. When debugging my React app in Chrome Dev Tools, I would like to add breakpoints in my library. However, Chrome Dev Tools shows me the compiled version of the source instead of the original TypeScript. I was hoping that by including the TypeScript source and the sourcemap in my package, Chrome Dev Tools would be able to show my TypeScript file.

  1. Is it possible to bundle a TypeScript library in a way that it can be debugged in a dependent web app?
  2. If not, should I not bother bundling the source and the sourcemap in my package, thus reducing the bundle size? What is the best practice around this?
Litigant answered 21/5, 2020 at 15:40 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.