Web - VSCode launches on localhost:8080 by default, refused to connect

[awfin]

Describe the bug
It is concerning that the default Flutter app created in VSCode has a configuration that prevents a workable launch, following the official doc instructions. There is also no official documentation (and limited online community) coverage on this issue.

To Reproduce
Steps to reproduce the behavior:

1. Install VSCode and Flutter according to https://flutter.dev/docs/get-started/install/macos#web-setup
2. Create a new Flutter app in VSCode
3. Click Run > Run Without Debugging
4. Chrome window opens with localhost:8080, page shows refused to connect error
5. If I launch by terminal, or replace the default "pwa-chrome" config in launch.json by the following

        {
            "name": "Flutter for web",
            "type": "dart",
            "request": "launch",
            "program": "lib/main.dart",
            "args": [
              "-d",
              "chrome"
            ]
        }

then it launches as desired

Expected behavior

1. Click Run > Run Without Debugging
2. Chrome window launches with the app

Screenshots
If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

• VS Code version: 1.50.1
• Dart extension version: 3.15.1
• Dart/Flutter SDK version: 1.23.0-18.1.pre

[DanTup]

I'm not unable to reproduce this, by creating a new project and clicking Run -> Run Without Debugging it ran on a random port:

Could you capture a log?

• Run the Dart: Capture Logs command
• Untick Analysis Server but leave everything else ticked and click OK
• Reproduce the issue
• Click Cancel on the logging notification
• Attach the log here

Thanks!

[awfin]

I tried to launch a new project with VSCode Flutter extension, however this time I got the right launch config

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "test2911",
            "request": "launch",
            "type": "dart"
        }
    ]
}

instead of the one that caused the error which contained

        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        },

[DanTup]

Ah, I see. pwa-chrome is not related to this extension, and therefore we can't control what it does. I suspect when you tried to run the project you didn't have a Dart file open, so it should've shown this prompt:

Here only the "Dart & Flutter" option will invoke our code. If you run the others, it will invoke their debuggers.

Let me know if you have any further issues/questions!

[Dusica73]

I cant find window how to change environment

[DanTup]

@Dusica73 you'll have to be more specific for me to help. It would be better to file a new issue than comment on the bottom of closed issues. Thanks!

[WarmBreezeRising]

Describe the bug It is concerning that the default Flutter app created in VSCode has a configuration that prevents a workable launch, following the official doc instructions. There is also no official documentation (and limited online community) coverage on this issue.

Hi, I have the same problem and we're not alone.
A simple (not) solution is to delete the launch.json from your project settings directory.
It would be cool to understand how to set it up correctly as it allows to set multiple configuration, but at least, once you get rid of it, it will work.
Hope it helps

[DanTup]

@WarmBreezeRising if deleting the launch.json file resolves the issue, it suggests there was something incorrect in there. If you're able to share a launch.json that prevents things from working, I may be able to explain what.

Generally you shouldn't need a launch.json unless you need to customise something, but doing so should not impact this. However if you do create one, it does need to be set to use the dart debugger (and not another language/extension like the pwa-chrome one noted above).

[WarmBreezeRising]

@DanTup Hi,

@WarmBreezeRising if deleting the launch.json file resolves the issue, it suggests there was something incorrect in there. If you're able to share a launch.json that prevents things from working, I may be able to explain what.
How to obtain a bogus launch.json:

1. Launch the debug of your project for chrome once
2. Stop the debug
3. Launch another time: This time, vscode ask you for a target (or device, idk how you would call it) which it didn't ask on first run. Amongst the target you have chrome which I selected. VScode then generate a launch.json file:

{
    // Utilisez IntelliSense pour en savoir plus sur les attributs possibles.
    // Pointez pour afficher la description des attributs existants.
    // Pour plus d'informations, visitez : https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

This file is the problem.

Another way to have this bogus configuration is going to menu:
Run > Add a configuration
and then select Chome: Launch
which gives a somehow similar entry which is as bogus as the previous one;

        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        },

Another way to see the problem is searching in google:
vscode flutter launch.json localhost not working site:stackoverflow.com

The are so many threads, unfortunatly not anwsering the problem. I suspect sometimes people are having different problems, but you'll find many questions with the auto-generated snippets I mentioned. Deleting it is painful, because you eventually have to delete it many times.

Generally you shouldn't need a launch.json unless you need to customise something, but doing so should not impact this. However if you do create one, it does need to be set to use the dart debugger (and not another language/extension like the pwa-chrome one noted above).

That maybe an answer which could help a lot of people (even if we just consider questions on stackoverflow). At least it worked for me.

I used Run > Add a configuration once again and this time selected Dart: Launch and Flutter: Launch
Both generate the same entries except for the names of the records:

    {
            "name": "Flutter",
            "type": "dart",
            "request": "launch",
            "program": "lib/main.dart"
        },
        {
            "name": "Dart",
            "type": "dart",
            "request": "launch",
            "program": "bin/main.dart"
        },

I'm following the flutter first app tutorial, so, I don't have a real advised look upon all of that. I wonder if this could make a difference in the case you want to specify a launch url (does it make any sense ? I don't know for now). And I don't know why the Chrome; Launch option exists and don't work, neither why the others work. They launch chrome probably because I selected it as a target a the bottom right of vscode. All of this is a mistery to me (and apparently, to a lot of people).

But using those Dart: Launch and Flutter: Launch seems to work (at least for my simple case).

[DanTup]

@WarmBreezeRising thanks for the info. The issue here is that the Chrome option you selected is unrelated to this extension, but something added by VS Code:

The Chrome entry here is for running a simple web page in Chrome (it creates a launch.json entry for paw-chrome which is not handled by the Dart/Flutter extension). You should always select Dart & Flutter here for a Flutter app, even if you want to run it on the Chrome device.

This prompt should only appear if you don't have a Dart file open though. If you have a Dart file open and press F5, it should always use the Dart debugger by default. If you're seeing something different to that, please let me know.

[DanTup]

I've opened a VS Code issue to see if this prompt could be made clearer (and not create a launch.json unnecessarily). Please add 👍 if you'd like to see some changes there:

microsoft/vscode#146338

[WarmBreezeRising]

@DanTup Thanks for your replies and explanations. It helped a lot for me and hope it helps others.
I voted for the issue you opened. Any of the solutions would indeed make more sense and be less confusing (at least for beginners).
Anyway, thanks a lot