CODEWITHSUNDEEP
flutterdartvisual-studio-codemicrosoft-edgeflutter-web
phaylali
phaylali

Reputation: 53

Debug Flutter web app in VS Code without creating a Microsoft Edge new instance

everything is set up and working but when I start debugging flutter in vs code using microsoft edge it starts a new instance , meaning the browser data, password, settings .... are all reset, so i need to enter passwords and change settings every time i start debugging or i need to open two browser instances which is both resources intensive and clingy. is there like vs code configuration for flutter that works as "attach" to an existing browser instance instead of "launch" a new instance ?

Upvotes: 4

Views: 6434

Answers (4)

aqel
aqel

Reputation: 485

The accepted solution misses the feature of auto reload in VS Code. You will have to input r in terminal for refreshing. You can follow these steps to configure VS Code to always start flutter web in the same port.

  1. Go to settings
  2. Search for Dart: Flutter Run Additional Args
  3. Enter --web-port=1234
  4. Click Add Item

VS Code setting to set up flutter web port

Upvotes: 0

Phake
Phake

Reputation: 1349

I don't have a perfect solution, as this one requires you to install the Dart Debug Extension, but you can create a launch.json and paste this command:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter Web Project",
            "type": "dart",
            "request": "launch",
            "program": "lib/main.dart",
            "args": [
                "-d",
                "web-server"
            ]
        }
    ]
}

Upvotes: 0

Ruchit
Ruchit

Reputation: 2770

you have to run with following command,

flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0

then access http://<your-ip> or localhost:8080

with this you can open your flutter web-app in regular browser and also you can open it in other devices in network(with your ip) ** also you should ensure that your port(8080) is open.

Upvotes: 4

Xudong Peng
Xudong Peng

Reputation: 2378

Normally, if Microsoft Edge is already running when you start debugging with a launch config, then the new instance won't start in remote debugging mode.

So by default, the extension launches Microsoft Edge with a separate user profile in a temp folder. Use userDataDir to set a different path to use, or set to false to launch with your default user profile.

A simple example:

{
    "configurations": [
        {
            "name": "Launch Microsoft Edge",
            "request": "launch",
            "type": "edge",
            "url": "...\\Index.html", // Provide your project's url to finish configuring
            "userDataDir": false // You could also add ${local_app_data}\Edge\Profile, such as C:\Users\<Current-user>\AppData\Local\Microsoft\Edge\Profile
        }
    ]
}

Upvotes: -1

Related Questions