Add support loading app from pear://runtime/devtools/INSPECTOR_KEY

lib/devtools.js

@@ -101,10 +101,10 @@ customElements.define('developer-tooling', class extends HTMLElement {
               <p> Add the following code to the application, before any other code: </p>
 
 <pre><code>if (Pear.config.dev) {
-  const { Inspector } = await import('@holepunchto/pear-inspect')
+  const { Inspector } = await import('pear-inspect')
   const inpector = await new Inspector()
   const key = await inpector.enable()
-  console.log('Pear Inspector key:', key.toString('hex'))
+  console.log('Debug with', key.toString('hex'))
 }</code></pre>
 
               <p>When the application is opened in development mode the inspection key will be logged.</p>
@@ -141,36 +141,15 @@ customElements.define('developer-tooling', class extends HTMLElement {
     this.addKeyFormElem.addEventListener('submit', e => {
       e.preventDefault()
       const inspectorKey = this.addKeyInputElem.value
-      if (inspectorKey.length !== 64) {
+      this.addApp(inspectorKey)
-        this.addKeyErrorElem.textContent = 'Key needs to be 64 characters long'
-        return
-      }
-
-      const sessionId = generateUuid()
-      const inspectorSession = new Session({ inspectorKey: b4a.from(inspectorKey, 'hex') })
-      const app = {
-        inspectorKey,
-        title: '',
-        url: '',
-        inspectorSession
-      }
-
-      inspectorSession.on('close', () => {
-        this.apps.delete(sessionId)
-        this.renderApps()
-      })
-      inspectorSession.on('info', ({ filename }) => {
-        app.url = filename
-        app.title = filename.split('/').pop()
-        this.apps.set(sessionId, app)
-        this.renderApps()
-      })
-
-      this.addKeyInputElem.value = ''
-      this.addKeyErrorElem.textContent = ''
-      this.renderApps()
     })
 
+    const shouldLoadApp = Pear.config.linkData?.startsWith('devtools/')
+    if (shouldLoadApp) {
+      const id = Pear.config.linkData.split('/').pop()
+      this.addApp(id)
+    }
+
     const devtoolsHttpServer = http.createServer()
     const devToolsWsServer = new WebSocketServer({ noServer: true })
 
@@ -244,6 +223,7 @@ customElements.define('developer-tooling', class extends HTMLElement {
       div.innerHTML = `
         <div class="app">
           <div class="remove" data-session-id="${sessionId}">✕</div>
+          <div>devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:9229/${sessionId}</div>
           <div class="title">${app.title} (${app.url})</div>
         </div>
       `
@@ -260,7 +240,38 @@ customElements.define('developer-tooling', class extends HTMLElement {
     } else {
       this.noAppsElem.classList.remove('hidden')
     }
+  }
 
+  addApp (inspectorKey) {
+    const isIncorrectLength = inspectorKey.length !== 64
+    if (isIncorrectLength) {
+      this.addKeyErrorElem.textContent = 'Key needs to be 64 characters long'
+      return
+    }
+
+    const sessionId = generateUuid()
+    const inspectorSession = new Session({ inspectorKey: b4a.from(inspectorKey, 'hex') })
+    const app = {
+      inspectorKey,
+      title: '',
+      url: '',
+      inspectorSession
+    }
+
+    inspectorSession.on('close', () => {
+      this.apps.delete(sessionId)
+      this.renderApps()
+    })
+    inspectorSession.on('info', ({ filename }) => {
+      app.url = filename
+      app.title = filename.split('/').pop()
+      this.apps.set(sessionId, app)
+      this.renderApps()
+    })
+
+    this.addKeyInputElem.value = ''
+    this.addKeyErrorElem.textContent = ''
+    this.renderApps()
   }
 
   load () {