Finished with error: Failed to establish connection with the application instance in Chrome

Question

Finished with error: Failed to establish connection with the application instance in Chrome. This can happen if the websocket connection used by the web tooling is unabled to correctly establish a connection, for example due to a firewall.

I am getting this error, when i run my flutter web application on chrome browser. I also turn off my firewall even that didnot solve my problem.

What will be the possible solution for resolving this eror?

Temporary Solution that i had tried:
I had this issue when upgrading from dev channel to master channel. what i did to solve this problem is, clean my project's build cache (flutter clean), then run the project using release mode. After that, i can run it on debug mode.

This solved my problem temporarily and after some time i still facing the same issue. And implementing the same solution didnot solve my problem.

Answer 1

I have try all the answer above, it not works.

It is my solution.

sudo vim /etc/hosts

#add this line
127.0.0.1 localhost

It works for me!

Answer 2

flutter run -d chrome --release

running in release mode is the solution to this problem

*this solves the problem but also makes it impossible to debug your app at the same time when running it

Answer 3

I solved this error using these two command,

1. first run this command flutter clean
2. after cleaning run this command flutter pub cache repair

after repair, you start the flutter app on the web it will ask a question, To hot restart changes while running, press "r" or "R". so press r hot restart also enable, Happy Coding

Answer 4

The solution of this problem is quite simple : If you are using VS Code :

1. Go to Extensions Market Place
2. Search for "Debugger for Chrome"
3. Install it and restart your IDE and enjoy !

If you are using Android Studio then download the same extension/plugin in marketplace in Android Studio.

This plugin is going to facilitate the establishing of connection with the application instance in Chrome. Thus it's gonna run the flutter web in debug mode. Worked for me I hope it works for you as well !!

Answer 5

try running the following commands in the same order:

flutter clean

flutter pub cache repair

flutter run --verbose -d chrome

This is what worked for me.

Answer 6

There might be some error in the index.html file under the web directory.

In my case, I was using firebase-messaging-sw.js (service worker)

After commenting it worked.

Answer 7

You can either run the following commands below:

flutter channel beta

flutter doctor

flutter config --enable-web

then restart your windows and the next step:

flutter create --web

for creating a project. Or you can use this command:

flutter run -d --release

Actually the first step worked for me :)

Answer 8

$flutter clean it will delete the dart and build folder

$flutter pub cache repair

it will update the packages list like this

Downloading _discoveryapis_commons 0.1.9...
Downloading _fe_analyzer_shared 1.0.3...
Downloading analyzer 0.38.5...
Downloading analyzer 0.39.4...
Downloading analyzer_plugin 0.2.1...
Downloading archive 2.0.11...
Downloading args 1.5.2...
Downloading assets_audio_player 1.2.3...
Downloading async 2.4.0...
Downloading audioplayer 0.5.2...
Downloading audioplayers 0.14.0...
Downloading battery 0.3.1+4...
Downloading bazel_worker 0.1.23...
Downloading bazel_worker 0.1.23+1...
Downloading boolean_selector 1.0.5...
Downloading browser_launcher 0.1.5...
Downloading build 1.2.1...
Downloading build 1.2.2...
Downloading build_config 0.4.1+1...
Downloading build_config 0.4.2...
Downloading build_daemon 2.1.0...
Downloading build_daemon 2.1.3...
Downloading build_modules 2.6.3...
Downloading build_modules 2.7.0...
Downloading build_modules 2.8.0...
Downloading build_modules 2.8.1...
Downloading build_resolvers 1.2.1...
Downloading build_resolvers 1.3.1...
Downloading build_resolvers 1.3.2...
Downloading build_resolvers 1.3.3...
Downloading build_runner 1.7.2...
Downloading build_runner 1.7.3...
Downloading build_runner 1.7.4...
Downloading build_runner_core 4.1.0...
Downloading build_runner_core 4.3.0...
Downloading build_runner_core 4.4.0...
Downloading build_test 0.10.9+1...
Downloading build_test 0.10.12...
Downloading build_test 0.10.12+1...
Downloading build_vm_compilers 1.0.4...
Downloading build_web_compilers 2.7.1...
Downloading build_web_compilers 2.8.0...
Downloading build_web_compilers 2.9.0...
Downloading built_collection 4.2.2...
Downloading built_collection 4.3.2...
Downloading built_value 6.8.2...
Downloading built_value 7.0.8...
Downloading built_value 7.0.9...
Downloading built_value_generator 6.8.2...
Downloading charcode 1.1.2...
Downloading charcode 1.1.3...
Downloading checked_yaml 1.0.2...
Downloading code_builder 3.2.0...
Downloading code_builder 3.2.1...
Downloading collection 1.14.11...
Downloading collection 1.14.12...
Downloading completion 0.2.1+1...
Downloading completion 0.2.2...
Downloading connectivity 0.4.5+3...
Downloading convert 2.1.1...
Downloading coverage 0.13.3+1...
Downloading coverage 0.13.3+3...
Downloading coverage 0.13.4...
Downloading coverage 0.13.6...
Downloading crypto 2.1.3...
Downloading crypto 2.1.4...
Downloading csslib 0.16.1...
Downloading cupertino_icons 0.1.2...
Downloading cupertino_icons 0.1.3...
Downloading dart_style 1.3.3...
Downloading device_info 0.4.1+1...
Downloading devtools 0.1.8-dev.1...
Downloading devtools 0.1.11...
Downloading devtools 0.1.15...
Downloading devtools_server 0.1.9...
Downloading devtools_server 0.1.12...
Downloading devtools_server 0.1.13...
Downloading dwds 0.7.9...
Downloading dwds 0.8.5...
Downloading dwds 1.0.1...
Downloading e2e 0.2.1+1...
Downloading file 5.1.0...
Downloading file_testing 2.1.0...
Downloading fixnum 0.10.11...
Downloading flutter_gallery_assets 0.1.9+2...
Downloading font_awesome_flutter 8.7.0...
Downloading front_end 0.1.27...
Downloading glob 1.2.0...
Downloading googleapis 0.54.0...
Downloading googleapis_auth 0.2.10...
Downloading graphs 0.2.0...
Downloading html 0.14.0+3...
Downloading http 0.12.0+2...
Downloading http 0.12.0+4...
Downloading http_multi_server 2.1.0...
Downloading http_multi_server 2.2.0...
Downloading http_parser 3.1.3...
Downloading image 2.1.4...
Downloading intl 0.16.0...
Downloading intl 0.16.1...
Downloading intl_translation 0.17.7...
Downloading io 0.3.3...
Downloading isolate 2.0.2...
Downloading js 0.6.1+1...
Downloading json_annotation 3.0.0...
Downloading json_annotation 3.0.1...
Downloading json_rpc_2 2.1.0...
Downloading kernel 0.3.27...
Downloading linter 0.1.101...
Downloading logging 0.11.3+2...
Downloading logging 0.11.4...
Downloading matcher 0.12.6...
Downloading meta 1.1.8...
Downloading mime 0.9.6+3...
Downloading mockito 4.1.1...
Downloading multi_server_socket 1.0.2...
Downloading multicast_dns 0.2.2...
Downloading mustache 1.1.1...
Downloading native_stack_traces 0.2.2...
Downloading node_interop 1.0.3...
Downloading node_io 1.0.1+2...
Downloading node_preamble 1.4.8...
Downloading package_config 1.1.0...
Downloading package_resolver 1.0.10...
Downloading path 1.6.4...
Downloading path_provider 1.4.2...
Downloading path_provider 1.6.1...
Downloading pedantic 1.8.0+1...
Downloading pedantic 1.9.0...
Downloading petitparser 2.4.0...
Downloading platform 2.2.1...
Downloading plugin 0.2.0+3...
Downloading pool 1.4.0...
Downloading process 3.0.12...
Downloading protobuf 1.0.1...
Downloading pub_semver 1.4.2...
Downloading pub_semver 1.4.3...
Downloading pubspec_parse 0.1.5...
Downloading quiver 2.0.5...
Downloading quiver 2.1.2+1...
Downloading rxdart 0.23.1...
Downloading scoped_model 1.0.1...
Downloading scratch_space 0.0.4+1...
Downloading scratch_space 0.0.4+2...
Downloading shelf 0.7.5...
Downloading shelf_packages_handler 1.0.4...
Downloading shelf_proxy 0.1.0+7...
Downloading shelf_static 0.2.8...
Downloading shelf_web_socket 0.2.3...
Downloading shrine_images 1.1.2...
Downloading source_gen 0.9.4+6...
Downloading source_map_stack_trace 1.1.5...
Downloading source_maps 0.10.8...
Downloading source_maps 0.10.9...
Downloading source_span 1.5.5...
Downloading source_span 1.6.0...
Downloading sse 2.1.2...
Downloading sse 3.1.1...
Downloading sse 3.1.2...
Downloading stack_trace 1.9.3...
Downloading stream_channel 2.0.0...
Downloading stream_transform 0.0.20...
Downloading stream_transform 1.1.0...
Downloading string_scanner 1.0.5...
Downloading sync_http 0.1.4...
Downloading sync_http 0.2.0...
Downloading term_glyph 1.1.0...
Downloading test 1.9.4...
Downloading test 1.12.0...
Downloading test_api 0.2.11...
Downloading test_api 0.2.14...
Downloading test_core 0.2.15...
Downloading test_core 0.3.0...
Downloading timing 0.1.1+2...
Downloading typed_data 1.1.6...
Downloading url_launcher 5.2.5...
Downloading url_launcher_platform_interface 1.0.1...
Downloading usage 3.4.1...
Downloading uuid 2.0.2...
Downloading uuid 2.0.4...
Downloading vector_math 2.0.8...
Downloading video_player 0.10.2+5...
Downloading vm_service 1.2.0...
Downloading vm_service_client 0.2.6+2...
Downloading watcher 0.9.7+12...
Downloading watcher 0.9.7+13...
Downloading web_socket_channel 1.1.0...
Downloading webdev 2.5.4...
Downloading webdriver 2.1.1...
Downloading webdriver 2.1.2...
Downloading webkit_inspection_protocol 0.5.0...
Downloading xml 3.5.0...
Downloading yaml 2.2.0...
Reinstalled 194 packages.
Reactivating webdev 2.5.4...
Precompiling executables...
Precompiled webdev:webdev.
Installed executable webdev.

If you want to create a test web app run this $ flutter create myApp(your app name)

If you have already a project and want to add web support to that package then run $ flutter create .

open your pubspec.yaml file under the dev_dependencies add the below build_runner and other three values

then run the packages get command on the top.

build_runner: ^1.7.2
build_test: ^0.10.12
build_web_compilers: ^2.7.1

restart the IDE and check whether the web configuration is true using

`````$flutter config

Settings:
android-sdk: e:\android\sdk
enable-web: true

Analytics reporting is currently enabled.

Once it is true and If you want to debug using chrome run the following command

$flutter run -d chrome

Answer 9

Here's what I did:

• turn off Anti Virus
• flutter run -d Chrome

If you still got error, because I did, so I do this too:

• change to beta channel
• reload window
• recreate to new project
• flutter create .
• flutter run -d Chrome

If you still got error: Failed to compile application or Failed to compile application for the Web run flutter upgrade then reload window then run flutter run -d Chrome

Worked for me.

Answer 10

Set up:

1. Run the following commands to use the latest version of the Flutter SDK:

   • flutter channel stable
   • flutter upgrade

2. To serve your app from localhost in Chrome, enter the following from the top of the package:

   • flutter run -d chrome

Answer 11

If you have a web-server option in the list of devices found, you can choose to serve the code there instead and follow the link that it will give you.

flutter run

Multiple devices found:

Web Server (web) • web-server • web-javascript • Flutter Tools
Chrome (web)     • chrome     • web-javascript • Google Chrome 87.0.4280.88
Edge (web)       • edge       • web-javascript • Microsoft Edge 88.0.705.63
[0]: Web Server (web-server)
[1]: Chrome (chrome)
[2]: Edge (edge)

Please choose one (To quit, press "q/Q"): 0
Running "flutter pub get" in flutter_istack...                   1,417ms
Launching lib\main.dart on Web Server in debug mode...
Syncing files to device Web Server...                              39.7s
lib\main.dart is being served at http://localhost:52569

Answer 12

I face the same problem for the first time I want to run the web app, but when I re-run the web app ,it works fine. Try to re-run

Answer 13

It mostly has nothing to do with flutter but, it's either because you have log your computer in safe mode.

In my case shift key was stuck and I had no idea I was in safemode.

Or perhaps you need to check your firewall

• system preferances>security and privacy>>firewall
• click the lock below and enter your system password
• and then click firewall option enter image description here
• In there add your editor to allow internet connection (android studio Or VsCode)

It looks something like this:

https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.macinstruct.com%2Fnode%2F165&psig=AOvVaw060gaYno6OT6j3iRu2WdFK&ust=1605766855994000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCNiv3-y5i-0CFQAAAAAdAAAAABAD

Answer 14

use some commands like below ----->>

flutter run -d chrome --release

or

on Editor Android Studio or Intellij goto -> Run >> Flutter Run In Release Mode

these are work for me

to enable web---->

flutter channel beta
flutter doctor
flutter config --enable-web (for a ready project) 

and

flutter create --web 

for creating a project

Answer 15

Use below commands:

flutter channel master
flutter create --web
flutter config --enable-web
flutter devices
run -d web
flutter clean
flutter run -d chrome

Answer 16

Use command:

flutter run -d --release

Answer 17

When working on VSCode in Windows in Flutter beta channel, use the command flutter run -d chrome to run in Chrome instead of F5.
Works every time for me.

Answer 18

You have to download Dart Debug Extension from chrome to run Flutter app on web

Answer 19

I've been facing this problem as well. I always get this error when i run 'flutter run -d chrome' the first time, but if i run it again for the second time, it runs perfectly.

Answer 20

I'm glad that you solved the issue, when upgrading version or changing channel it's generally a good idea to run flutter clean and if needed flutter pub cache repair; I believe there's no action to be taken.