Add button to open devtools for stream views

src/node/StreamWindow.js

@@ -216,16 +216,25 @@ export default class StreamWindow extends EventEmitter {
     }
   }
 
-  reloadView(viewIdx) {
-    const view = this.views.find(
+  findViewByIdx(viewIdx, predicate) {
+    return this.views.find(
       (v) =>
         v.state.context.pos && v.state.context.pos.spaces.includes(viewIdx),
     )
+  }
+
+  reloadView(viewIdx) {
+    const view = this.findViewByIdx(viewIdx)
     if (view) {
       view.send('RELOAD')
     }
   }
 
+  openDevTools(viewIdx, inWebContents) {
+    const view = this.findViewByIdx(viewIdx)
+    view.send({ type: 'DEVTOOLS', inWebContents })
+  }
+
   send(...args) {
     this.overlayView.webContents.send(...args)
   }

src/node/index.js

@@ -90,8 +90,16 @@ async function main() {
       broadcastState(clientState)
     } else if (msg.type === 'reload-view') {
       streamWindow.reloadView(msg.viewIdx)
-    } else if (msg.type === 'browse') {
-      ensureValidURL(msg.url)
+    } else if (msg.type === 'browse' || msg.type === 'dev-tools') {
+      if (
+        msg.type === 'dev-tools' &&
+        browseWindow &&
+        !browseWindow.isDestroyed()
+      ) {
+        // DevTools needs a fresh webContents to work. Close any existing window.
+        browseWindow.destroy()
+        browseWindow = null
+      }
       if (!browseWindow || browseWindow.isDestroyed()) {
         browseWindow = new BrowserWindow({
           webPreferences: {
@@ -102,7 +110,12 @@ async function main() {
           },
         })
       }
-      browseWindow.loadURL(msg.url)
+      if (msg.type === 'browse') {
+        ensureValidURL(msg.url)
+        browseWindow.loadURL(msg.url)
+      } else if (msg.type === 'dev-tools') {
+        streamWindow.openDevTools(msg.viewIdx, browseWindow.webContents)
+      }
     }
   }
 

src/node/viewStateMachine.js

@@ -81,6 +81,9 @@ const viewStateMachine = Machine(
               },
               MUTE: '.muted',
               UNMUTE: '.listening',
+              DEVTOOLS: {
+                actions: 'openDevTools',
+              },
             },
             states: {
               muted: {
@@ -109,6 +112,12 @@ const viewStateMachine = Machine(
       unmuteAudio: (context, event) => {
         context.view.webContents.audioMuted = false
       },
+      openDevTools: (context, event) => {
+        const { view } = context
+        const { inWebContents } = event
+        view.webContents.setDevToolsWebContents(inWebContents)
+        view.webContents.openDevTools({ mode: 'detach' })
+      },
     },
     guards: {
       contentUnchanged: (context, event) => {