My context: I'm new to TypeScript and next.js but I've been programming in Python (and occasionally in JavaScript) for several decades. When learning a new framework in Python I use the debugger to understand how everything works. I've noticed that this is not the normal practice (or even possible?) in TypeScript based projects because the source is almost never included in the npm package (and it appears source maps are also not commonly included).

So, here is my question: is there a way I can run next.js apps and be able to step into the original TypeScript next.js core code?

What I have done or tried so far:

1. I've read both of these READMEs:
next.js/blob/canary/contributing/core/developing.md
next.js/blob/canary/contributing/core/developing-using-local-app.md

2. I've tried the pnpm add ../next.js/{packages/next,node_modules/{react,react-dom}} approach. But stepping into any of the components doesn't take me to the TypeScript code (eg. import Image from "next/image"; is hard coded in next.js/packages/next/image.js to point to ./dist/shared/lib/image-external so vs code doesn't know where to find the original source).

3. Stepping into the component when I set a breakpoint on line 7 (<Image) in the page.tsx as generated by npx create-next-app@latest won't actually step into the component source (even though next.js/packages/next/dist/client/image-component.js.map is present)

4. Other than during debugging, I've also tried to improve Go To Definition usefulness while reading code by adding paths (this works) but then it breaks things when running with next dev:

"paths": {
"next/image": ["../next.js/packages/next/src/client/image-component.tsx"],
}

How can I use debugger and/or Go To Definition in vs code and get the original next.js TypeScript to show, while working on my app?