diff --git a/src/runtime/app.ts b/src/runtime/app.ts
index 3fc6f5d7..d12bc624 100644
--- a/src/runtime/app.ts
+++ b/src/runtime/app.ts
@@ -7,6 +7,7 @@ import { Scheduler } from "./scheduler";
 import { validateProps } from "./template_helpers";
 import { TemplateSet, TemplateSetConfig } from "./template_set";
 import { validateTarget } from "./utils";
+import { toRaw, reactive } from "./reactivity";
 
 // reimplement dev mode stuff see last change in 0f7a8289a6fb8387c3c1af41c6664b2a8448758f
 
@@ -39,6 +40,8 @@ declare global {
       apps: Set<App>;
       Fiber: typeof Fiber;
       RootFiber: typeof RootFiber;
+      toRaw: typeof toRaw;
+      reactive: typeof reactive;
     };
   }
 }
@@ -47,6 +50,8 @@ window.__OWL_DEVTOOLS__ ||= {
   apps: new Set<App>(),
   Fiber: Fiber,
   RootFiber: RootFiber,
+  toRaw: toRaw,
+  reactive: reactive,
 };
 
 export class App<
diff --git a/tools/devtools/src/devtools_app/store/store.js b/tools/devtools/src/devtools_app/store/store.js
index d6389ee9..62b9d6be 100644
--- a/tools/devtools/src/devtools_app/store/store.js
+++ b/tools/devtools/src/devtools_app/store/store.js
@@ -513,6 +513,7 @@ export const store = reactive({
     evalFunctionInWindow("toggleTracing", [false]);
     this.traceSubscriptions = false;
     evalFunctionInWindow("toggleSubscriptionTracing", [false]);
+    this.updateIFrameList();
   },
 
   // Triggers manually the rendering of the selected component
diff --git a/tools/devtools/src/page_scripts/owl_devtools_global_hook.js b/tools/devtools/src/page_scripts/owl_devtools_global_hook.js
index 787760d8..ff6a0a3e 100644
--- a/tools/devtools/src/page_scripts/owl_devtools_global_hook.js
+++ b/tools/devtools/src/page_scripts/owl_devtools_global_hook.js
@@ -11,6 +11,10 @@
       this.Fiber = window.__OWL_DEVTOOLS__.Fiber;
       // Same but for RootFiber
       this.RootFiber = window.__OWL_DEVTOOLS__.RootFiber;
+      // This is for retrocompatibility purposes since new versions of owl should always expose toRaw and reactive
+      // in __OWL_DEVTOOLS__
+      this.toRaw = window.__OWL_DEVTOOLS__.toRaw ?? window.owl?.toRaw;
+      this.reactive = window.__OWL_DEVTOOLS__.reactive ?? window.owl?.reactive;
       // Set to keep track of the fibers that are in the flush queue
       this.queuedFibers = new WeakSet();
       // Set to keep track of the HTML elements we added to the page
@@ -400,7 +404,7 @@
       let targetToKeysToCallbacks;
 
       // Step 1: extract internal values from owl
-      const obj = owl.reactive({}, () => {});
+      const obj = self.reactive({}, () => {});
       let count = 0;
       WeakMap.prototype.get = function () {
         count++;
@@ -728,7 +732,7 @@
             }
         }
         if (obj) {
-          obj = owl.toRaw(obj);
+          obj = this.toRaw(obj);
         }
       }
       return obj;
@@ -836,7 +840,7 @@
         child.contentType = "undefined";
         child.hasChildren = false;
       } else {
-        obj = owl.toRaw(obj);
+        obj = this.toRaw(obj);
         switch (true) {
           case obj instanceof Map:
             child.contentType = "map";
@@ -1388,7 +1392,7 @@
         }
         getter.hasChildren = false;
       } else {
-        obj = owl.toRaw(obj);
+        obj = this.toRaw(obj);
         switch (true) {
           case obj instanceof Map:
             getter.contentType = "map";
@@ -1483,7 +1487,7 @@
         return;
       }
       if (objectType === "subscription") {
-        owl.reactive(obj)[key] = value;
+        this.reactive(obj)[key] = value;
       } else {
         obj[key] = value;
         if (objectType === "props" || objectType === "instance") {