Start on random unused port. Support links to be pasted

lib/devtools.js

@@ -7,7 +7,6 @@ import { spawn } from 'child_process'
 
 customElements.define('developer-tooling', class extends HTMLElement {
   router = null
-  port = 9229
 
   constructor () {
     super()
@@ -109,7 +108,7 @@ customElements.define('developer-tooling', class extends HTMLElement {
         <div>
           <h1>Developer Tooling</h1>
           <div>
-            <div id=remote-inspect-explain>
+            <div id="remote-inspect-explain">
               <h2>Remotely inspect Pear applications.</h2>
               <p> Some application setup is required to enable remote debugging </p>
               <p> Install the <code>pear-inspect</code> module into the application </p>
@@ -120,13 +119,14 @@ customElements.define('developer-tooling', class extends HTMLElement {
   const { Inspector } = await import('pear-inspect')
   const inpector = await new Inspector()
   const key = await inpector.enable()
-  console.log('Debug with', key.toString('hex'))
+  console.log('Debug with pear://runtime/devtools/'
+    + key.toString('hex'))
 }</code></pre>
 
               <p>When the application is opened in development mode the inspection key will be logged.</p>
-              <p>Paste the logged key into the input and use a compatible inspect protocol tool, such as chrome://inspect to view the remote target</p>
+              <p>Paste the logged key into the input to add it. Then open in Chrome or copy the URL to a compatible inspect tool to view the remote target.</p>
             </div>
-            <div id=remote-inspect>
+            <div id="remote-inspect">
               <div>
                 <form id="add-key-form">
                   <input id="add-key-input" type="text" placeholder="Paste Pear Inspector Key Here"/>
@@ -139,6 +139,7 @@ customElements.define('developer-tooling', class extends HTMLElement {
             </div>
           </div>
         </div>
+      </div>
     `
     this.root = this.attachShadow({ mode: 'open' })
     this.root.appendChild(this.template.content.cloneNode(true))
@@ -162,14 +163,13 @@ customElements.define('developer-tooling', class extends HTMLElement {
 
     const shouldLoadApp = Pear.config.linkData?.startsWith('devtools/')
     if (shouldLoadApp) {
-      const id = Pear.config.linkData.split('/').pop()
-      this.addApp(id)
+      this.addApp(Pear.config.linkData)
     }
 
     this.initServer()
   }
 
-  renderApps () {
+  render () {
     this.appsElem.replaceChildren(...[...this.apps].map(([sessionId, app]) => {
       const div = document.createElement('div')
       div.innerHTML = `
@@ -188,7 +188,7 @@ customElements.define('developer-tooling', class extends HTMLElement {
       })
       div.querySelector('.remove').addEventListener('click', () => {
         this.apps.delete(sessionId)
-        this.renderApps()
+        this.render()
       })
 
       return div
@@ -202,6 +202,8 @@ customElements.define('developer-tooling', class extends HTMLElement {
   }
 
   addApp (inspectorKey) {
+    const isUrl = inspectorKey.includes('devtools/')
+    if (isUrl) inspectorKey = inspectorKey.split('devtools/').pop()
     const isIncorrectLength = inspectorKey.length !== 64
     if (isIncorrectLength) {
       this.addKeyErrorElem.textContent = 'Key needs to be 64 characters long'
@@ -219,25 +221,28 @@ customElements.define('developer-tooling', class extends HTMLElement {
 
     inspectorSession.on('close', () => {
       this.apps.delete(sessionId)
-      this.renderApps()
+      this.render()
     })
     inspectorSession.on('info', ({ filename }) => {
       app.url = filename
       app.title = filename.split('/').pop()
       this.apps.set(sessionId, app)
-      this.renderApps()
+      this.render()
     })
 
     this.addKeyInputElem.value = ''
     this.addKeyErrorElem.textContent = ''
-    this.renderApps()
+    this.render()
   }
 
   initServer () {
     const devtoolsHttpServer = http.createServer()
     const devToolsWsServer = new WebSocketServer({ noServer: true })
 
-    devtoolsHttpServer.listen(this.port, () => console.log(`[devtoolsHttpServer] running on port ${this.port}`))
+    devtoolsHttpServer.listen(0, () => {
+      this.port = devtoolsHttpServer.address().port
+      console.log(`[devtoolsHttpServer] running on port ${this.port}`)
+    })
     devtoolsHttpServer.on('request', (req, res) => {
       if (req.url !== '/json/list') {
         res.writeHead(404)
@@ -293,11 +298,11 @@ customElements.define('developer-tooling', class extends HTMLElement {
         inspectorSession.disconnect()
         inspectorSession.off('message', onMessage)
         app.connected = false
-        this.renderApps()
+        this.render()
       })
 
       app.connected = true
-      this.renderApps()
+      this.render()
     })
   }