Vue version

3.3.9

Link to minimal reproduction

https://play.vuejs.org/#eNqNUk1PwkAQ/StrL2gC3QMnCRrUkKgHNWripRfsDmVxvzI7BRLS/+60RSxEjbfdeW/2vXmz2+QqhHRVQjJKxjFHHUhEoDJcZk7b4JHEViDMRSXm6K3oMbWXuczl3kUSNhbiosZPe7dgjBdvHo066Z21BG8gNb44ZRpXxrIV4Kf5QmCDmRHwTYhxNJ6E5PNYdoCkn7QmBnYW0mX0jm1u64ZsB8QsGYmmUtfYXH3PkgVRiCMpc+W4TYHRK0wdkHTBygnTJJaOtIWB8nYyTIfpuVQ6UrecQrSDd/TrCJgG9IpfypJ+R0sysgIcIDgFCPhf7aO2rv4RdOChlq/Vq8xVnAxFjniui6Nccm+DNoCPgTSv4CCfGa9ofd/UCEvYz5IvIP/4ob6Mm3amJ4TGWWd+mmEB1MLTlwfY8HkPWq9Ks9vFL+Az8Pcoa48t7bp0im13eI3bu2bN2hWvcbohcPFrqNpok0bDb/Zx88fo33Y57X2K1SdglAOb

Steps to reproduce

1. Open Chrome dev tools and enable custom formatter
2. Run playground and see the console log
3. You will see the msg ref is not been formatted

What is expected?

Show formatted logging

What is actually happening?

Showing unformatted loggin

System Info

No response

Any additional comments?

No response

They seem to work in development mode (click the PROD/DEV button). I'd imagine the custom formatters aren't included in a production build.

Or were you expecting the Playground to add them itself in production mode?

Oh it really works in DEV mode.

I'm not sure if SFC Playground should have a custom formatter added in PROD, because the default mode is PROD, and sometimes I just want to log some values there for testing. I would also like to hear other people's opinions.

After https://github.com/vuejs/core/commit/fc7902982a4bc9f0c9cdb0c9c222bc43a9d5c458 (which is a relatively recent change), the PROD flag now also uses the corresponding production build of Vue to best simulate production behavior. This means all dev-only logic, including warnings and custom formatter, is tree-shaken. So this is expected behavior.