Flutter web break points change to unverified when the chrome connects

Question

I had a Flutter project for Android and iOS and the debugging using break points and tracing the code worked fine. When I added web platform it was Ok at first, but at some point I lost the breakpoints. All of them turn to gray circles (unverified) as soon as the chrome connects and I they don't work.

Solution

I upload my webapp to a sub-folder on the server, so the base path is not / anymore. I change the <base href="/"> to <base href="/pwa/"> in web/index.html file for it to work on the server. And this was what caused the confusion between the debugger and chrome.

Changing it back to <base href="/"> made the break points active again.

Hope it saves someone several days and many builds and new test projects that took me to find the problem.

BTW: Please let me know if there is any option I can set in launch.json to fix it so I don't have to change that href back and forth.