Vue version

3.0.5

Link to minimal reproduction

https://coffee-cart.netlify.app/

Steps to reproduce

The reproduction steps are explained in this Chrome DevTools bug report:

1. Go to https://coffee-cart.netlify.app/ and open DevTools
2. Set a breakpoint in App.vue line 25 and reload
3. Hover with the mouse cursor over "showTemplate" in line 25

What is expected?

It should show a preview of this.showTemplate ideally.

What is actually happening?

No preview.

System Info

No response

Any additional comments?

For several reasons (including the fact that this is a proxy in case of Vue, and that proxy's get trap has side effects), this is not currently possible. But the most pressing bug here is that the sourcemaps that fall out of the Vue compiler are incomplete.

As you can tell from the picture (refer to https://crbug.com/1383892#c5 for the sourcemap and generated file), the "this." part is not mapped. DevTools could try to work around this, but it'd be a hack with unknown consequences. Given that the rest of the bundle is mostly sourcemapped correctly by Vue, this looks like a bug that is somewhat easy to fix.

Would you like to try the latest version of vue?

Updating to 3.2.45 seems to fix this. Thanks!