diff --git a/packages/app-frontend/src/index.ts b/packages/app-frontend/src/index.ts
index 7a100ec46..597be19e7 100644
--- a/packages/app-frontend/src/index.ts
+++ b/packages/app-frontend/src/index.ts
@@ -6,6 +6,8 @@ import { createApp, connectApp } from './app'
 import { setAppConnected } from './features/connection'
 import { getBridge } from './features/bridge'
 
+export { setAppConnected } from './features/connection'
+
 /**
  * Create the main devtools app. Expects to be called with a shell interface
  * which implements a connect method.
diff --git a/packages/shell-chrome/src/devtools.js b/packages/shell-chrome/src/devtools.js
index d21d5b39d..7382daf74 100644
--- a/packages/shell-chrome/src/devtools.js
+++ b/packages/shell-chrome/src/devtools.js
@@ -1,6 +1,6 @@
 // this script is called when the VueDevtools panel is activated.
 
-import { initDevTools } from '@front'
+import { initDevTools, setAppConnected } from '@front'
 import { Bridge } from '@vue-devtools/shared-utils'
 
 initDevTools({
@@ -21,6 +21,7 @@ initDevTools({
       let disconnected = false
       port.onDisconnect.addListener(() => {
         disconnected = true
+        setAppConnected(false)
       })
 
       const bridge = new Bridge({